'How to bundle a collection of React components so that they can be imported with a create-react-app app?
I am using create-react-app to create an initial project which needs to import custom React components from a separate node package.
I tried having the React app import a component from the package but this shows an error message stating that it could not transpile scripts from inside node_modules. It seems that it's necessary to pre-process and bundle the JSX syntax.
How can I configure browserify/babel/babelify to bundle the series of components so that the exports are recognised by the app?
import { Panel } from "components-module/react";
The IntelliSense picks up the component imports in VS Code but in the browser console the react app shows an error stating that the react component is undefined and suggests that the module lacks the export statements.
In the Babel configuration I tried setting modules: false under @babel/preset-env to preserve ES6 module syntax in the bundle but this leads to a different error (this time when bundling):
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|