Bare import should not assign to a variable in generated CommonJS code

[danhalliday]

I have an ES6 library which I'm building to CJS and using in a browser-based app (also ES6). The library depends on webcomponents.js, which is a shim and has no exports, only side effects. The CJS export assigns the bare import to a variable:

library/index.js:

import 'webcomponents.js'
// ...

library/build/index.cjs.js:

var webcomponents_js = require('webcomponents.js'); 
// ...

In my app which imports the library (via NPM), I'm using the CommonJS Rollup plugin to get back to ES6. The reason I'm not using ES6 all the way through is because the app has a collection of other dependencies (react, react-router, redux) which have a mixture of main/jsnext:main support and I found that impossible to resolve with any combination of includes and excludes.

The error I get on rolling my app is Module /Users/me/app/node_modules/webcomponents.js/webcomponents.js does not export default (imported by /Users/me/app/node_modules/library/build/index.cjs.js). Is there a way to get Rollup not to generate the var webcomponents_js declaration? It works if I manually remove the variable assignment.

[Rich-Harris]

I'm struggling to reproduce this – any chance you can put together a minimal gist/repo showing the problem?

[raphaelokon]

I am having the same issue with react-redux and redux. I will try to post a minimal gist … for now just my build error.

Module /node_modules/react-redux/lib/index.js does not export Provider (imported by /src/containers/App.js)
Error: Module /node_modules/react-redux/lib/index.js does not export Provider (imported by /src/containers/App.js)
    at Module.trace (/node_modules/rollup/src/Module.js:676:30)
    at /node_modules/rollup/src/Module.js:218:35
    at Array.forEach (native)
    at /node_modules/rollup/src/Module.js:215:25
    at Array.forEach (native)
    at Module.bindAliases (/node_modules/rollup/src/Module.js:204:29)
    at /node_modules/rollup/src/Bundle.js:100:44
    at Array.forEach (native)
    at /node_modules/rollup/src/Bundle.js:100:18

[TrySound]

@raphaelokon Seems like youare trying to load commonjs module without commonjs plugin. Rollup itself looks for es-modules. Plugin converts commonjs to es.

[raphaelokon]

Hey @TrySound. I am using the following config:

import babel from "rollup-plugin-babel";
import cjs from "rollup-plugin-commonjs";
import replace from "rollup-plugin-replace";
import resolve from "rollup-plugin-node-resolve";

export default {
    dest : "dist/app.js",
    entry : "src/main.js",
    format : "iife",
    plugins : [
        babel({
            babelrc: false,
            exclude: "node_modules/**",
            presets: ["es2015-rollup", "stage-0", "react"]
        }),
        cjs({
            exclude: "node_modules/process-es6/**",
            include: ["node_modules/fbjs/**", "node_modules/object-assign/**", "node_modules/react/**", "node_modules/react-dom/**"]
        }),
        // globals(),
        replace({
            "process.env.NODE_ENV": JSON.stringify("development")
        }),
        resolve({browser: true, main: true})
    ],
    sourceMap : true
};

Interestingly this minimal file builds:

import React from "react";
import ReactDOM from "react-dom";
import {Provider} from "react-redux";

[TrySound]

There are two problems:

• you should specify jsnext: true to load es from node_modules
• react-redux is commonjs too and should be included in plugin whitelist.

[raphaelokon]

Thanks. Now I am getting the following:

The `this` keyword is equivalent to `undefined` at the top level of an ES module, and has been rewritten
Module node_modules/invariant/browser.js does not export default (imported by /node_modules/react-redux/lib/components/connect.js)

[raphaelokon]

I guess I have to whitelist this as well

[TrySound]

#771

[raphaelokon]

@TrySound Thanks. I tried removing the include opts for the commonjs … but then I get another error:

Module node_modules/redux/es/index.js does not export default (imported by node_modules/react-redux/lib/utils/wrapActionCreators.js)

Relates to #524 and rollup/rollup-plugin-commonjs/pull/44