[plugin-commonjs]: "Error: 'useState' is not exported by node_modules/react/index.js, imported by index.jsx;"

Rollup Plugin Name: @rollup/plugin-commonjs
Rollup Plugin Version:^21.0.1
Rollup Version:^2.53.2
Operating System (or Browser):MacOS Catalina 10.15.7 Chrome v93.0.4577.82
Node Version:v14.17.6
Link to reproduction (⚠️ read below): https://replit.com/join/eitlhtkdna-garethchetwood

Expected Behavior

The project builds successfully

Actual Behavior

Additional Information

I’ve created a small example with a few components and mostly similar config to mine. Just go to the repl link and do npm install; npm run build.

I’ve looked around about this error and the solution seems to be to use namedExports but that is now deprecated. Another solution seems to be to update to the latest rollup and commonjs plugin but I have done that and I’m still getting the error 😕

Could be something I’ve done wrong in my config as I’ve been messing around with it a lot, but I’ve seen a few people flag up this exact issue, less a qualifying reproduction, so I thought I’d take a crack at it.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:6 (5 by maintainers)

Top GitHub Comments

1reaction

lukastaegertcommented, Feb 3, 2022

So to refine my initial suggestion:

Babel detects if the commonjs plugin is present and placed AFTER the babel plugin. Only then
It tries to determine if a module contains import or export statements, in which case we can inject imports like before. Otherwise, we inject require expressions instead

The advantage would be that this requires no additional setup by the user and my hope is that it would “just work”. Question is, though, if this is easily feasible. I could also look into setting up a PR for this.

1reaction

lukastaegertcommented, Feb 3, 2022

If there is an import in a file, it is no longer a CommonJS file. While the commonjs plugin now supports “mixed” modules with both imports and requires, for those modules it will only convert require expressions but ignore exports and module.exports for exports.

The problem is: If the file contains non-JS syntax like JSX expressions, which is of course really common for React projects, then there needs to be a Babel instance BEFORE the commonjs plugin to convert the JSX syntax to plain JavaScript for the commonjs plugin to understand.

So for React, this is actually a really common issue:

React is a commonjs dependency, so you need the commonjs plugin
You want JSX in your modules, so you need Babel before the commonjs plugin

Another solution of course would be to run Babel twice, once before commonjs to convert just the JSX (and hopefully not need any imported helpers, or rather, inline the helpers), and once after that with shared helpers. But this would likely have quite a performance overhead, not mentioning that it is really complicated.