CODEWITHSUNDEEP
reactjsrollup
Riyan Gonsalves
Riyan Gonsalves

Reputation: 11

react's esm rollup bundle not working in browser, trying to access process.env

I have been trying to bundle a simple react app using rollup. According to a recent merge (Oct 2), they have added jsx transpilation to js as core functionality using the jsx option from the config. I used this on the react app and the bundle that I got won't work when imported from the html file in the browser. Here are the contents of my rollup.config.mjs file:

import {nodeResolve} from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

export default [
    {
        input: 'main.jsx',
        output: {
            file: 'bundle.js',
            format: 'esm',
            exports: 'named',
            name: 'theBundle',
        },
        jsx: true,
        plugins: [
            nodeResolve(),
            commonjs(),
        ]
    }
];

My main.jsx file:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App/>
    </StrictMode>
);

My App.jsx file:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App/>
    </StrictMode>
);

and my index-prod.html file, that I am accessing using VS Code's live server plugin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React + Rollup</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="./bundle.js"></script>
</body>
</html>

When visiting the page on the browser, I get this error message in the console:

Uncaught ReferenceError: process is not defined
    requireReact http://127.0.0.1:5500/bundle.js:2772
    <anonymous> http://127.0.0.1:5500/bundle.js:2780

Finally here is the output of npm list:

rollup-tut@ C:\rollup-demo
├── @babel/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

There are several places in bundle.js where the variable process.env is tried to be accessed. But this is only possible in the context of a node environment AFAIK. Then how do I bundle my react app for the browser correctly with this new jsx option that the rollup devs have added? Or if this isn't possible, can you tell me about the regular way, using babel, etc.? I can't seem to find any up to date information.

I have tried setting jsx in rollup config to 'react' and 'react-jsx' but the result is the same.

Upvotes: 0

Views: 47

Answers (1)

Riyan Gonsalves
Riyan Gonsalves

Reputation: 11

I solved the issue, for anyone wanting to know how, here is the new rollup config:

import {nodeResolve} from '@rollup/plugin-node-resolve';
import commonjs from "@rollup/plugin-commonjs";
import replace from '@rollup/plugin-replace';

export default [
    {
        input: 'main.jsx',
        output: {
            file: 'bundle.js',
            format: 'esm',
            name: 'theBundle',
        },
        jsx: 'react-jsx',
        plugins: [
            nodeResolve(),
            commonjs(),
            replace({
                preventAssignment: true,
                values: {
                    'process.env.NODE_ENV': JSON.stringify('production'),
                }
            }),
        ]
    }
];

You need to install rollup replace plugin (npm i --save-dev @rollup/plugin-replace as time of writing) and set the jsx option to 'react-jsx'. The replace plugin will replace the process.env.NODE_ENV variable hence removing the error.

Upvotes: 1

Related Questions