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.

    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:

    { "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.

    { "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.

    // 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:

    // 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.

    # 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.

    // 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.

Have questions or queries?
Get in Touch