ESM Build for React
This package provides an ECMAScript Module (ESM) build for React, making it easier to consume React in ESM-based environments. It includes type definitions and ensures compatibility with modern JavaScript module workflows.
- Fully compatible with ESM environments
- Works with the latest versions of React and React DOM
- Includes TypeScript definitions
- Simplified imports for both React and React DOM
You can install the package using a package manager like npm:
npm install @ria-develop/react-esmOr using bun:
bun add @ria-develop/react-esmImport React and React DOM directly from the package:
import React from '@ria-develop/react-esm';
import ReactDOM from '@ria-develop/react-esm/client';The package includes comprehensive TypeScript definitions, which will automatically work when imported into your TypeScript projects.
This package provides an exports map, ensuring correct resolution of modules:
- The root entry point
@ria-develop/react-esmmaps to the React implementation. - The
@ria-develop/react-esm/cliententry point maps to React DOM.
When using this package with popular JavaScript bundlers like Webpack, Vite, or Rollup, you may need to externalize react and react-dom to avoid bundling these libraries unnecessarily. Externalizing ensures they are resolved at runtime from the environment rather than bundled into your output.
Webpack:
module.exports = {
externals: {
react: 'react', // Externalize React
'react-dom': 'react-dom' // Externalize ReactDOM
}
};Rollup:
Install the external package if not installed:
npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs --save-devThen configure Rollup:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: 'src/index.js',
output: {
file: 'bundle.js',
format: 'esm'
},
external: ['react', 'react-dom'], // Externalize dependencies
plugins: [resolve(), commonjs()]
};Vite:
Vite automatically treats react and react-dom as externalized dependencies. However, ensure you have the proper aliases configured in vite.config.js:
import { defineConfig } from 'vite';
export default defineConfig({
resolve: {
alias: {
react: '@ria-develop/react-esm',
'react-dom': '@ria-develop/react-esm/client'
}
}
});The following is an example of how you can use this package in a web-based ESM environment with an import map:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Example of React ESM use case</title>
<script type="importmap">
{
"imports": {
"react/jsx-runtime": "https://cdn.jsdelivr.net/npm/@ria-develop/react-esm",
"react": "https://cdn.jsdelivr.net/npm/@ria-develop/react-esm",
"react-dom": "https://cdn.jsdelivr.net/npm/@ria-develop/react-esm",
"react-dom/client": "https://cdn.jsdelivr.net/npm/@ria-develop/react-esm"
}
}
</script>
<script type="module">
import { createRoot } from "react-dom/client";
import { StrictMode, Suspense } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
function App() {
return jsxs(Suspense, { fallback: "Loading...", children: ['hello'] });
}
const root = createRoot(document.getElementById("root"));
root.render(jsx(StrictMode, { children: jsx(App, {}) }));
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>This demonstrates how you can leverage import maps and properly set up the jsx-runtime in an ESM-based environment to render a simple React application in the browser.
The package is built using Bun and TypeScript. To rebuild the package:
-
Clone the repository:
git clone https://github.com/ria-develop/react-esm.git cd react-esm -
Install dependencies:
bun install
-
Build the package:
bun run build
Find the source code and contribute at GitHub.
This project is licensed under the MIT License.