“Uncaught ReferenceError exports is not defined” since 2.2.0-rc.5

Bug

Bundle is incorrect and crashes with “exports is not defined”.

Unfortunately I can’t share steps to reproduce, as the codebase is closed source. However, it definitely worked with 2.2.0-rc.4, so it must be a recent change.

Bundle should be correct and not crash.

Webpack: 2.2.0-rc.5

Author: Fantashit

15 thoughts on ““Uncaught ReferenceError exports is not defined” since 2.2.0-rc.5

  1. 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';
    
  2. @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.

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

  4. 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
    
  5. 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,
            // ...
    
  6. 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:

    screen shot 2017-05-15 at 4 35 15 pm

    Press save. The browser will reload.

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

    You will see the error:

    screen shot 2017-05-15 at 4 36 23 pm

    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.

  7. .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”]
    }
    }
    }

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

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

  10. 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?

Comments are closed.