webpack 2 crashes on “modules”: false with no information

What is the current behavior?

ERROR in   TypeError: __webpack_require__(...) is not a function
  
  
  - index.ejs:1205 Object.../node_modules/webpack/buildin/harmony-module.js
    /home/adam/apps/memory-n-back/web/index.ejs:1205:1
  
  - index.ejs:622 __webpack_require__
    /home/adam/apps/memory-n-back/web/index.ejs:622:30
  
  - index.ejs:46 fn
    /home/adam/apps/memory-n-back/web/index.ejs:46:20
  
  
  - index.ejs:1197 Object.../node_modules/webpack/buildin/global.js
    /home/adam/apps/memory-n-back/web/index.ejs:1197:1
  
  - index.ejs:622 __webpack_require__
    /home/adam/apps/memory-n-back/web/index.ejs:622:30
  
  - index.ejs:46 fn
    /home/adam/apps/memory-n-back/web/index.ejs:46:20
  
  
  - index.ejs:1189 Object.../node_modules/lodash/lodash.js
    /home/adam/apps/memory-n-back/web/index.ejs:1189:1

If the current behavior is a bug, please provide the steps to reproduce.
checking out this commit from my repo and running npm start

The thing is I don’t know what is causing the crash, because as u can c above, the logs are not very informational, hence I’m opening this issue and not asking on SO

What is the expected behavior?
Work with tree shaking and not crashing

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
OS: ubuntu 16.04
webpack: 2.1.0-beta.25
webpack-dev-server: 2.1.0-beta.0

it crashes on both webpack and dev server

Author: Fantashit

2 thoughts on “webpack 2 crashes on “modules”: false with no information

  1. @goldylucks – I’ve run into the same and I’ve been meticulously trying experiments one at a time (for an entire day). I finally got a good compilation by changing transform-runtime based on this SO suggestion. I notice you have it in your babel file as well. Also, ordering of babel plugins (first to last) and presets (last to first) is important.

    Here is my resulting .babelrc that is currently working:

    {
      "presets": [
        "es2017",
        "es2016",
        ["es2015", {"modules": false}],
        "react",
        "stage-0"
      ],
      "plugins": [
        "babel-relay-plugin-loader",
        "flow-react-proptypes",
        "transform-flow-strip-types",
        "lodash",
        ["transform-runtime",
          {
            "helpers": false,
            "polyfill": false,
            "regenerator": true
          }
        ],
        "react-hot-loader/babel"
      ]
    }
    
    ❯❯❯ yarn list webpack webpack-dev-server babel-core                                                                                                                                                         feature/phantomjs ⬆ ✱
    yarn list v0.20.3
    ├─ babel-core@6.23.1
    ├─ webpack-dev-server@2.3.0
    └─ webpack@2.2.1
    

    Rough webpack config (without plugins):

    const config = {
      devtool: 'source-map',
      devServer: {
        port: 3808,
        headers: {
          'Access-Control-Allow-Origin': '*'
        }
      },
      context: '/Users/kross/projects/af/spec/dummy',
      entry: {
        application: [
          'react-hot-loader/patch',
          'webpack-dev-server/client?http://localhost:3808',
          'webpack/hot/only-dev-server',
          './ui/src/index.js'
        ]
      },
      output: {
        path: '/Users/kross/projects/af/spec/dummy/public/webpack',
        publicPath: '//localhost:3808/webpack/',
        filename: '[name].js'
      },
      resolve: {
        extensions: [
          '.js',
          '.jsx',
          '.json'
        ],
        alias: {
          react: '/Users/kross/projects/af/spec/dummy/node_modules/react',
          'react-relay': '/Users/kross/projects/af/spec/dummy/node_modules/react-relay',
          'babel-plugin-transform-es3-member-expression-literals': '/Users/kross/projects/af/spec/dummy/node_modules/babel-plugin-transform-es3-member-expression-literals',
          'babel-plugin-transform-es3-property-literals': '/Users/kross/projects/af/spec/dummy/node_modules/babel-plugin-transform-es3-property-literals',
          'babel-plugin-inline-version': '/Users/kross/projects/af/spec/dummy/node_modules/babel-plugin-inline-version'
        }
      },
      module: {
        rules: [
          {
            test: /\.svg(\?.*)?$/,
            loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml'
          },
          {
            test: /\.(gif|png|jpg)$/,
            loader: 'url-loader?limit=8192'
          },
          {
            test: /\.jsx?$/,
            exclude: undefined,
            loader: 'babel-loader'
          }
        ]
      }
    }

    I don’t have any information as to why this is affecting this error, but I wanted to pass on this information in case it can be helpful.

  2. More information as I experiment with transform-runtime plugin settings.

    Turning on helpers:

    ["transform-runtime",
      {
        "helpers": true,
        "polyfill": false,
        "regenerator": true
      }
    ],
    

    yields

    Uncaught ReferenceError: exports is not defined
        at Object../node_modules/babel-runtime/helpers/typeof.js (typeof.js:3)
        at __webpack_require__ (bootstrap 0be4201…:686)
        at fn (bootstrap 0be4201…:105)
        at Object../node_modules/url/url.js (url.js:1)
        at __webpack_require__ (bootstrap 0be4201…:686)
        at fn (bootstrap 0be4201…:105)
        at Object.<anonymous> (client:2)
        at Object../node_modules/webpack-dev-server/client/index.js?http:/localhost:3808 (application.js:176590)
        at __webpack_require__ (bootstrap 0be4201…:686)
        at fn (bootstrap 0be4201…:105)
    

    Turning on polyfill:

    ["transform-runtime",
      {
        "helpers": false,
        "polyfill": true,
        "regenerator": true
      }
    ],
    

    yields:

    Uncaught TypeError: $export is not a function
        at Object../node_modules/babel-runtime/node_modules/core-js/library/modules/es6.object.define-property.js (es6.object.define-property.js:3)
        at __webpack_require__ (bootstrap c5fe614…:686)
        at fn (bootstrap c5fe614…:105)
        at Object../node_modules/babel-runtime/node_modules/core-js/library/fn/object/define-property.js (define-property.js:1)
        at __webpack_require__ (bootstrap c5fe614…:686)
        at fn (bootstrap c5fe614…:105)
        at Object../node_modules/babel-runtime/core-js/object/define-property.js (define-property.js:1)
        at __webpack_require__ (bootstrap c5fe614…:686)
        at fn (bootstrap c5fe614…:105)
        at Object../node_modules/babel-runtime/node_modules/core-js/library/modules/_object-dp.js (application.js:42490)        
    

    TL;DR

    The only working combination I’ve found through trial and error is:

    ["transform-runtime",
      {
        "helpers": false,
        "polyfill": false,
        "regenerator": true
      }
    ]
    

Comments are closed.