From 5.1.0: TypeError: Cannot read property '__esModule' of undefined

[frederikhors]

• Rollup Plugin Name: @rollup/plugin-commonjs
• Rollup Plugin Version: 5.1.0
• Rollup Version: 2.28.1
• Operating System (or Browser): Windows 10, Chrome 85
• Node Version: 12.18.4

Expected Behavior

Using https://github.com/rixo/rollup-plugin-svelte-hot I'm trying to import gql like this:

import gql from 'graphql-tag'.

It works great with default sveltejs/template rollup flow, but here I have this error:

TypeError: Cannot read property '__esModule' of undefined.

If I remove that line it works.

If I revert back to 5.0.0 everything works fine.

---

Related: rixo/rollup-plugin-svelte-hot#9

[shellscape]

Thanks for opening an issue. Citing the issue template:

🚨 Issues WITHOUT a valid reproduction WILL BE CLOSED!

Please provide one by:

1. Using the REPL.it plugin reproduction template at https://repl.it/@rollup/rollup-plugin-repro
2. Provide a minimal repository link (Read https://git.io/fNzHA for instructions).
   Please use NPM for installing dependencies!
   These may take more time to triage than the other options.
3. Using the Rollup REPL at https://rollupjs.org/repl/

⚠️ ZIP Files are unsafe and maintainers will NOT download them.

We cannot make this any clearer. Please add a reproduction and we'll be happy to triage further.

[frederikhors]

Oh! This is ridiculous.

[shellscape]

I agree.

[frederikhors]

Here we are: https://github.com/frederikhors/svelte-template-hot.

Steps:

1. npm install in root
2. npm run dev:rollup in root

Can you re-open now?

Thanks.

[shellscape]

Unfortunately that's not a minimal repo. Please read the provided instructions as mentioned in the template, here: https://git.io/fNzHA. We don't have the resources to triage an entire app for users, which is what you provided. You'll have to narrow the issue, or take the larger issue to the folks who maintain that svelte template.

[frederikhors]

It's a small repo. 30 seconds to reproduce the issue with a small edit from 5.1.0 to 5.0.0.

[frederikhors]

I''m perfectly here: https://gist.github.com/Rich-Harris/88c5fc2ac6dc941b22e7996af05d70ff#how-to-create-a-minimal-reproduction with my reproduction anyway.

[rixo]

The folks who maintain that Svelte template here! 👋

Sure, the repro was not good for you. The Rollup config is hacked at runtime by the HMR plugin hu hu... But to me, it makes sense, and it's minimal indeed.

I've narrowed the issue down to SystemJS + preserveModules + @rollup/plugin-commonjs@15.1.

import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'

export default {
  input: 'source.js',
  output: {
    format: 'system',
    preserveModules: true,
    dir: 'output'
  },
  plugins: [
    resolve({ browser: true }),
    commonjs(),
  ]
}

I've made a minimal repro from Rollup's perspective: https://github.com/rixo/repro-rollup-commonjs-system

Sorry, couldn't make sense of REPL.it... or I experienced technical issues... can't really tell! 😅

[shellscape]

Thanks @rixo, that'll help out the folks who maintain the commonjs plugin.

[lukastaegert]

Thanks for the repro, this is definitely a weird error. For starters, it only appears to happen with preserveModules: true. Moreover, it does not seem to appear when choosing format "es", it seems to be very specific to SystemJS. This will require further digging.

[lukastaegert]

Ok, this is in fact a bug in Rollup core! It is here in the code for the commonjs proxy for the parser:

System.register(['../node_modules/graphql/language/parser.mjs.js', './_commonjsHelpers.js'], function (exports) {
	'use strict';
	var parser, getAugmentedNamespace;
	return {
		setters: [function (module) {
			parser = module;
		}, function (module) {
			getAugmentedNamespace = module.getAugmentedNamespace;
		}],
		execute: function () {

			var parser = exports('default', /*@__PURE__*/getAugmentedNamespace(parser));

		}
	};
});

The issue here is that the var parser in the execute function is shadowing the var parser defined above. I will need to take a look why this is not deconflicted, might not be trivial to fix but this is definitely important.

[lukastaegert]

Please try again with Rollup@2.28.2

[markduan]

Hi, I think there is another case which #3796 has not covered, this is the reproduction https://github.com/markduan/repro-rollup-commonjs-system

In this repository, types.js is a type definition file. In a typescript project, the original types.ts file contains some type definitions, but after compiled it will be a empty types.js file.

In my project, I am using react-query, because of this line , the generated code will be like this:

var _types = require("./types");

Object.keys(_types).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  exports[key] = _types[key];
});

and the types.js in react-query release is actually an empty file.

I hope you understand what i mean, sorry for my bad English.