How to properly bundle the React 17 library with new JSX transform as ES Module?

To properly bundle a React 17 library with the new JSX transform as an ES module, you need to configure your build tools to support ES modules and transpile your code with the new JSX transform. The new JSX transform allows you to use JSX without the need for importing the React module in every file.

Here's a step-by-step guide on how to bundle a React 17 library with the new JSX transform as an ES module:

1. Initialize Your Library Project: Set up a new project for your React library using your preferred build tool, such as Webpack or Rollup. Make sure to initialize it as an ES module.

2. Configure Babel: Install Babel and the necessary plugins to handle JSX transformation and ES module output.

   bashCopy code
   npm install @babel/core @babel/preset-env @babel/preset-react --save-dev
   

   Create a .babelrc file or add the Babel configuration in your package.json:

   jsonCopy code
   {
     "presets": ["@babel/preset-env", "@babel/preset-react"]
   }
   

3. Update React Version: Ensure that you have React 17 or later as a dependency in your package.json. React 17 supports the new JSX transform without the need for importing React in every file.

   jsonCopy code
   {
     "dependencies": {
       "react": "^17.0.0",
       "react-dom": "^17.0.0"
     }
   }
   

4. Use ES Modules for Exports: Ensure that your library uses ES modules for exporting components and functions. This can be done by using the export statement instead of module.exports.

   javascriptCopy code
   // src/MyComponent.js
   export function MyComponent() {
     // Your component code here
   }
   

5. Bundle with Webpack (Optional): If you're using Webpack as your build tool, make sure to configure it to output ES modules. Set output.libraryTarget to 'module' in your Webpack configuration:

   javascriptCopy code
   // webpack.config.js
   const path = require('path');
   
   module.exports = {
     mode: 'production',
     entry: './src/index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'my-library.js',
       library: 'MyLibrary',
       libraryTarget: 'module', // Set to 'module' for ES module output
     },
   };
   

6. Build the Library: Build your library using your chosen build tool.

   bashCopy code
   # For Webpack
   npx webpack
   
   # For Rollup (if applicable)
   npx rollup -c
   

7. Use the Library in a Project: Once your library is built, you can import and use it in a modern JavaScript environment that supports ES modules. The new JSX transform will work seamlessly without the need to import React in your application code.

   javascriptCopy code
   // app.js
   import { MyComponent } from 'my-library';
   
   // Use the component
   function App() {
     return <MyComponent />;
   }
   

By following these steps, you can bundle your React 17 library with the new JSX transform as an ES module. This allows consumers of your library to use it with the latest syntax, including JSX, without the need to manually import React.