ChordSheetJs v5.1.2 and react 17.0.2 got error

[alexaung]

I got the following error after I import import ChordSheetJS from "chordsheetjs";

Compiled with problems:X

ERROR in ./node_modules/handlebars/lib/index.js 15:11-24

Module not found: Error: Can't resolve 'fs' in '/Users/zzzzz/Development/chordsheep/node_modules/handlebars/lib'

[martijnversluis]

Hey @alexaung. Thanks for reporting your issue.

Could you maybe describe your build setup, or link your project on GitHub/Gitlab? That could help me trying to figure out your error.

[alexaung]

npx create-react-app my-app
cd my-app
yarn start
yarn add chordsheetjs
import in app.js

That all I did but could not build.

But I create the project with vitejs, this error is gone.

[danielsarin]

I had the same issue with Next.js. I think it's related to this handlebars-lang/handlebars.js#1174.

The error was:

error - ./node_modules/handlebars/lib/index.js:17:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/chordsheetjs/lib/formatter/html_table_formatter.js
./node_modules/chordsheetjs/lib/index.js
./songs/getFormattedSong.ts
./songs/index.ts
./components/songs/SongsTable.tsx
./components/songs/index.ts
./pages/songs/[slug].tsx

I fixed it by adding a custom webpack config:

module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      handlebars: 'handlebars/dist/handlebars.min.js'
    };
    return config;
  }
};