web: [@web/dev-server]: `@rollup/plugin-commonjs` version `>18` breaks commonjs imports
Consuming dependencies that have to be transformed using the @rollup/plugin-commonjs
plugin break when version >18
of the plugin is used.
I have a simple example repository: https://github.com/peschee/wds-commonjs-example
In the main
branch, trying to run wds (npm run start
) shows the following error when importing apexcharts
or moment
(those are the ones I tested):
Uncaught SyntaxError: The requested module '/__web-dev-server__/rollup/moment.js?web-dev-server-rollup-null-byte=%00%2FUsers%2Fpsiska%2Ftemp%2Fwds-commonjs-test%2Fnode_modules%2Fmoment%2Fmoment.js%3Fcommonjs-module' does not provide an export named 'exports'
I also have a simple rollup build in the repo, using the same plugins as in wds, and that one works (npm run build
).
Downgrading @rollup/plugin-commonjs
to ^18
makes the imports work again in wds: https://github.com/peschee/wds-commonjs-example/pull/1/files
About this issue
- Original URL
- State: open
- Created 3 years ago
- Reactions: 13
- Comments: 51 (35 by maintainers)
Commits related to this issue
- Try to make TS tests run using https://github.com/modernweb-dev/web/issues/1700 workaround — committed to vaadin/hilla by Artur- 2 years ago
- update build pipeline dependencies Mostly working but blocked as per https://github.com/modernweb-dev/web/issues/1700#issuecomment-1137106493 — committed to neighbour-hoods/applet-template by pospi a year ago
I have the same problem with
@rollup/plugin-commonjs@22.0.0
. I’m getting this error message:Using
@rollup/plugin-commonjs@18.0.0
the errors becomes:web-test-runner.config::plugins:
I added the new version that I needed with:
It’s working great so far, thanks y’all!
@tannerstern I think that #2050 is likely what you need - this is the pull request that will hopefully fix the broken CommonJS support in general. On the other hand, #2103 addresses an additional Windows specific issue (due to absolute file paths starting with things like
C:
).i’ve been working on it in #2050 to fix it at the source (in modernweb).
however i have yet to solve the infinite loop (supporting
skipSelf
properly). have spent a fair chunk of time staring at that code and trying to figure out how to solve it, it’ll come to me eventually.its very poorly documented in rollup and very few (if any) examples exist.
once i solve that, that PR will fix everything in this issue.
@lucaelin i think i know now how we can implement all of this in wds itself
the only thing missing is the fix on rollup’s end for the import/export mismatch
ill add a draft PR and add you as a reviewer in case you have any better ideas
The problem still exists. Installing the @rollup/plugin-commonjs@22.0.0-4 (beta) did not help but produces another error:
Error while transforming node_modules/axios/index.js: Could not resolve import "commonjsHelpers.js".
Having the same issue with
jsondiffpatch
package using vite. First, I thought it’s vite issue, but then I saw they updated the commonjs dependecy which breaks it. You can check the two reproduction links: https://github.com/vitejs/vite/issues/11986@lucaelin To follow up:
fixExportNamedExports
from the monkey patch. In fact, including it was causing errors. I think this was resolved by rollup/plugins#1363@lucaelin Thank you - this is already helpful. I will try running my setup on a Mac and see if the problem is still there. In code with this much path manipulation, it could certainly be a Windows-specific issue. If I do still see the problem, then I will try to create a minimal example that reproduces the issue, so that I can share. Thanks again.
@lucaelin, thank you for helping with this issue. I’m trying to use your monkey-patch with web-test-runner, but I’m now getting the error:
SyntaxError: Octal escape sequences are not allowed in strict mode.
When I run web-test-runner in manual mode and look at the source of the error in Chrome I see:
Except that where you see
**NUL**
in the second line, there is an actual NUL character, which I assume is what is causing the error.As I understand it, these NUL characters are an internal signal for Rollup plugins, but then I would assume that they shouldn’t be making it into the code that gets served to the browser.
Any thoughts on why this is happening?
yeah sorry, i meant the rollupAdapter.
it goes unresolved so reaches this
So is it basically:
?? rollupInputOptions
is meaningless (since it isn’t a call to anything and isn’t assigned to anything), so my guess is the original author meant to assign it but didn’t@rollup/plugin-commonjs
on their end since the import/export don’t match up and clearly should (unless somehow we’re not looking at the right import and/or export, i.e. the right pair)skipSelf
- weirdly this does look like it should already work, would be good to know for sure why it doesn’t