[@web/dev-server]: `@rollup/plugin-commonjs` version `>18` breaks commonjs imports

[peschee]

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

[Pratik29121]

const basename = process.env.NODE_ENV === 'production' ? '/my-react-app' : '/';

return (



);

[phihu]

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

[akrawitz]

I seem to have hit this as well. I was trying to run tests on code that uses jStat. Before I added @rollup/plugin-commonjs I was getting the error:

 🚧 Browser logs:
      TypeError: Cannot set properties of undefined (setting 'jStat')
        at ..\..\node_modules\jstat\dist\jstat.js:7:22
        at ..\..\node_modules\jstat\dist\jstat.js:9:3

Fair enough, since jStat is only provided in UMD format, I added the CommonJS plugin to my Web Test Runner config:

import rollupPluginCommonjs from '@rollup/plugin-commonjs';
import { fromRollup } from '@web/dev-server-rollup';

const commonjsPlugin = fromRollup(rollupPluginCommonjs);

export default {
  nodeResolve: true,
  plugins: [
    commonjsPlugin({
      include: [
        '../../**/node_modules/jstat/**/*',
      ],
    }),
  ],
};

However, this led to me getting the following error when trying to run tests:

🚧 Browser logs:
      SyntaxError: Octal escape sequences are not allowed in strict mode.

For the life of me, I couldn't figure out what was using octal escape sequences. I finally stumbled on this issue, and after pinning @rollup/plugin-commonjs to 18.1.0 everything now works fine. Note that I tried using 19.0.0 and the error was still there.

I'm posting this here in case it helps others realize that what seems like a completely different issue may in fact have this same cause.

EDIT:
Wanted to add that I have been using rollup with @rollup/plugin-commonjs at 21.0.2 in my actual build, and it pulls in jstat without any problems.

[felipefreitas]

I have the same problem with @rollup/plugin-commonjs@22.0.0. I'm getting this error message:

Error while transforming node_modules/@dynatrace/openkit-js/dist/node/index.js: Could not resolve import "commonjsHelpers.js".
> 1 | import * as commonjsHelpers from "commonjsHelpers.js";

Using @rollup/plugin-commonjs@18.0.0 the errors becomes:

Error while transforming node_modules/axios/package.json: Unexpected "export"

web-test-runner.config::plugins:

json(),
nodeResolve(),
commonjs({ sourceMap: false }),
nodePolyfills(),
esbuildPlugin({ ts: true, js: true, json: true }),

[phihu]

Unfortunately, I haven't found a proper solution fo the problem.

What I did to bypass/evade the problem is using rollup-plugin-url-resolve to pull the package I need as a module (or transformed into a module) from unpkg and include it into the build.

Due to privacy/security concerns, loading it from a (public) cdn (in production) wasn't an option.

In my source file:

import { PACKAGE } from 'https://unpkg.com/@PACKAGE/package.min.js?module=1';

In my rollup.config.js:

import urlResolve from 'rollup-plugin-url-resolve';
...
  plugins: [
    urlResolve(),
...

I know it isn't a 'proper' fix and might not solve everybody's problems, but hope that it helps some of you.

[mihaisavezi]

Ended up bundling this particular library dependency and handling it separately. Here's how this looks.

The dependency in question is a dependency of my dependency and this works.

// for the messy library only
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: './lib/entry.js',
//   output: {
//     file: './__test/lib.bundle.js',
//     format: 'module',
//   },
  treeshake: false,
  output: [{
    file: "lib/lib.bundle.js",
    format: "esm",
    // preserveModules: true
  }],
  plugins: [nodeResolve(), commonjs()]
};

lib/entry.js

import 'deepmerge/index'; 

/* eslint-disable */
import { storybookPlugin } from '@web/dev-server-storybook';
import { hmrPlugin, presets as hmrPresets } from '@open-wc/dev-server-hmr';
import rollupCommonjs from '@rollup/plugin-commonjs';
import { fromRollup } from '@web/dev-server-rollup';
import rollupAlias from '@rollup/plugin-alias';
import resolve from '@rollup/plugin-node-resolve';
import * as path from 'path';


const pluginCommonjs = fromRollup(rollupCommonjs);
const pluginAlias = fromRollup(rollupAlias);

export default {
  port: 8000,
  nodeResolve: {
    resolveOnly: [
      /^(?!.*(deepmerge|different_npm_library))/,
    ],
  },
  plugins: [
    pluginAlias({
      entries: [
        {
            find: 'deepmerge',
            replacement: `${process.cwd()}/lib/lib.bundle.js`,
        },
    ],
    }),
    storybookPlugin({ type: 'web-components' }),
  ],
};

[BalusC]

I'm facing the same problem when using https://www.npmjs.com/package/slugify 1.6.5 in my ts project with

"@web/dev-server-rollup": "^0.3.15",
"@rollup/plugin-commonjs": "^22.0.0",

Opening the webpage spits this error in console:

Error while transforming node_modules/slugify/slugify.js: Could not resolve import "commonjsHelpers.js".

> 1 | import * as commonjsHelpers from "commonjsHelpers.js";
    |                                  ^
  2 | import { __module as slugifyModule, exports as slugify } from "\u0000/home/me/git/projectname/node_modules/slugify/slugify.js?commonjs-module"
  3 |
  4 | (function (module, exports) {

Unfortunately, downgrading @rollup/plugin-commonjs to ^21 or lower causes an infinite loop somewhere in the code and the server eventually dies with out of memory.

[43081j]

@daKmoR any idea what to do here? i understand downgrading solves the problem, but this isn't obvious from any of your docs, examples, etc.

currently someone (like i did) might think "ok ill go install dev-server-rollup and plugin-commonjs, then job done".

e.g.

export default {
  // ...
  plugins: [
    esbuildPlugin({ ts: true, target: 'auto' }),
    fromRollup(commonjs)()
  ]
};

but this won't work out of the box because of this issue (some nonsensical import in plugin-commonjs it seems).

similarly, maybe its worth you having docs on using commonjs in particular in WTR/dev-server? unless im just missing it, i can't seem to find a page explaining it. i had to figure it out from someone else's repo.

edit:

actually downgrading doesn't solve anything, i get the same inf loop balusc gets

edit2:

it seems the latest one falls over because this flow happens:

• commonjs plugin injects some special import import x from 'commonjsHelpers.js';
• WTR begins processing that import (to resolve it or w/e else)
• node-resolve plugin starts, decides this import is nonsense and throws an error (a nice error, not uncaught)
• commonjs plugin never runs for this path

in the commonjs plugin, they tell rollup to return/inject some fabricated module anytime something tries to import their special helpers name:

https://github.com/rollup/plugins/blob/4e85ed78cd2e941107fdf0e8e118e7bee550109d/packages/commonjs/src/index.js#L240-L243

[lucaelin]

I managed to monkey-patch the commonjs module to now properly resolve the commonjsHelpers.js file. The Issue is that newer versions of the commonjs-plugin inject an auxiliary plugin at the start of rollups plugin list (see here).
Modifying the plugin-list during the options-hook and returning it is not supported by the rollup-adapter as it does not handle the return value here.
So everything works now? Sadly no. We are back where we started with the error message being does not provide an export named 'exports'. 🤷

[lucaelin]

Trying to minimally reproduce the issue I had above, I accidentally managed to reproduce the infinite loop problem first.
The commonjs-plugins resolveId calls rollups internal resolve function with the option skipSelf which according to rollup documentation prevents infinite loops. This flag seems to not be handled properly here, as it gets ignored if the plugin provides a custom resolveImport hook. I don't understand the motive for adding the exception, so I am unsure how to handle it.
Edit: I now also realize that the issue seems to involve the node-resolve functionality, as the infinite loops remains when filtering out the commonjs plugin from the resolve function
Edit: Looking at the rollup implementation, I figured that each plugin that calls resolve with the skipSelf flag needs to be saved into a set and excluded from loop. Without doing this, node-import and commonjs play a very advanced game of ping-pong.

[lucaelin]

I now found a solution for the third issue, regarding does not provide an export named 'exports'. I am not 100% sure but it appears to be an issue in the commonjs plugin itself, as the module stub it imports here does not actually contain the expected export here. Since it works just fine in rollup, I am not sure how to proceed with this.

All in all I created a set of monkey-patches you can load into the web-dev-server config and released them here.
This should fix all three issues at play, please give it a try and provide some feedback, so I know that my assumptions are correct.

I hope to soon create a PR for this project and start a discussion on how to fix the remaining issue in the commonjs plugin.