1

I have written a node module but when I try to use it in a react app created using create-react-app I get this error when I run react-scripts start or react-scripts build:

ERROR in ./node_modules/@xxx/react-file-input/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/c/Users/xxx/file-picker-demo/node_modules/@xxx/react-file-input/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (40:11):

  38 |     if (maxFileSize && maxFileSize > 0 && file.size > maxFileSize) {
  39 |       return (
> 40 |           <span>{String.fromCharCode(9888)}</span>
     |           ^
  41 |       );
  42 |     }
  43 |   };

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

The error does NOT happen if I copy and paste the code into the main application and do not import the node module.

Is there some config file that I need to add to my node module? I looked here and tried adding .babelrc, babel.config.js, webpack.config.js to my node module and none of them makes the error go away. How can I fix this?

Further details: I am using react-scripts 5.0.0. I don't have any babel or webpack config files in my project (create-react-app does not generate any). I understand react-scripts has an internal configuration for babel and webpack that it uses.

morpheus
  • 18,676
  • 24
  • 96
  • 159

2 Answers2

1

JSX has to be compiled via Babel to convert it into a form that browsers can understand. React does this compilation for JSX files in the main application but does not process JSX files in the main app's dependencies. So the only solution is to build your node module using Babel and perhaps webpack or rollup. Refer below links for how to do that:

After that you can import the module and there will be no error.

morpheus
  • 18,676
  • 24
  • 96
  • 159
0

Are you not using a build (like esm/ cjs) for your @xxx/react-file-input module?

My reputation is not enough to write a comment :)

Muhammad Ashraf
  • 18
  • 6
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 02 '22 at 05:47