webpack: "Uncaught ReferenceError exports is not defined" since 2.2.0-rc.5

A solution for me anyway was change babel-loader config, under plugins, ['transform-runtime', { "polyfill": false }]

For anyone running into this issue, I got my build working with these babel-loader options:

const babelLoaderOptions = {
    presets: [
        ['es2015', { loose: true, modules: false }],
        'react'
    ],
    plugins: [
        'transform-class-properties',
        'transform-runtime'
    ]
}
// 'react-hmre' can also be added in dev

Also just delete your .babelrc file, it was interfering in my build. Configure babel from your webpack config.

You really want "modules": false because you don’t get tree shaking when you use "modules": "umd"

I did some more investigation, and it looked like a caching issue caused by babel-loader. I probably had some version of the module cached with CommonJS transform applied, and it was getting embedded into the Webpack 2 bundle (which is incompatible now that I don’t use CommonJS transform).

Deleting node_modules/.cache fixed the issue for me. (The path could be different on your system so you can try clearing /tmp or temporarily disabling ?cache option for babel-loader.)

I can consistently reproduce this in CRA codebase:

git clone https://github.com/facebookincubator/create-react-app.git
cd create-react-app
git checkout 9e733b57f8ae7ae3df46d95910d255798107448f
npm install

npm start

Then edit packages/react-scripts/template/src/App.js to have an empty block in the render method:

Press save. The browser will reload.

Then edit it to remove the empty block and press save.

You will see the error:

Unfortunately some internal state appears corrupted because even if I refresh the page, I keep getting the broken bundle. It only gets fixed by a restart of the server.

This is a pretty critical issue for us, as we were planning to cut the release including Webpack 2 this week.

I still get this with 2.2.0 (no -rc suffixes). not sure how to help.

It seems that I get it when I try to import anything fromapi/index.js file, which looks like this:

export * from './activities';
export * from './comments';
export * from './common';
export * from './follow';
export * from './lists';
export * from './search';
export * from './session';
export * from './submissions';
export * from './users';

.babelrc ->change false to “commonjs”,then i solve it. { “presets”: [ [“env”, { “modules”: “commonjs” }], “stage-2” ], “plugins”: [“transform-runtime”], “comments”: false, “env”: { “test”: { “presets”: [“env”, “stage-2”], “plugins”: [“transform-es2015-modules-commonjs”, “dynamic-import-node”] } } }

any progress on this issue?

I had the same issue in a Vue CLI project. What a Heisenbug.

The issue went away when I (in a bout of frustration) deleted by .babelrc and restored babel.config.json to the default settings. Is anyone else out there as confused about Babel (and Webpack) as I am?

All the same even with webpack@3. Helps only plugins: [ ['transform-runtime', { "polyfill": false }] ] in babel config.

If polyfill is needed, it’s possible to install babel-polifyll pkg separately and explicitly import it in app.

Using version 2.2.1 and getting the same problem.

For anyone using TypeScript and babel, if you still face this issue:

In your tsconfig.json: Make sure you have this:

    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node"

I have accidentally put module: "commonjs" and that was causing this error.

In your .babelrc: Make sure you have set modules to false and loose to true:

"presets": 
[
   [      
      "env",
      {
        "modules": false,
        "loose":  true,
        // ...

For me removing target: "node" in my dev webpack config solved the issue.

Using version 2.2.1 and getting the same problem(“ReferenceError exports is not defined”).

@indeyets are you using babel-loader with es2015 preset? I think I was running into the same issue as you. I had to change "modules": false to "modules": "umd" to get my project working again. I don’t think this is right though.

Still occurs with webpack 3.

It seems like it depends on your babel plugins.

Thanks @hellstad! use "modules": "umd" works for me.

I’ve tried all of the options in this thread, and nothing is working for me. Still getting ReferenceError: exports is not defined.

If I add import 'babel-polyfill' to the top of my file, I get this error in the browser:

Uncaught TypeError: n(...) is not a function

If I add the transform-runtime plugin to my .babelrc, I get this crash when I’m compiling:

ReferenceError: exports is not defined

@JMStudiosJoe See my comment just above yours. This is the error you get when using CommonsChunkPlugin and targeting node.

Finally I made it work. I don’t know what was wrong but I reached my personal objectives. I was working on a starter (or boilerplate, name it as you want) with:

• react
• redux
• react-router 4
• immutable JS
• react hot reload
• webpack 2 (2.6)
• with a server side rendering

Here is the result hope it will help.