babel-loader transform-runtime causes TypeError: __webpack_require__(...) is not a function

[mo22]

Hi,

not really sure yet how to reproduce this, but as soon as I add transform-runtime to my webpack config in babel-loader plugins, I get the following error, both in hot and production mode:

ERROR in TypeError: webpack_require(...) is not a function

• default_index.ejs:120 Object.
  [form-react]/[html-webpack-plugin]/default_index.ejs:120:105

• default_index.ejs:21 webpack_require
  [form-react]/[html-webpack-plugin]/default_index.ejs:21:30

• default_index.ejs:11781 Object.
  [form-react]/[html-webpack-plugin]/default_index.ejs:11781:56

• default_index.ejs:21 webpack_require
  [form-react]/[html-webpack-plugin]/default_index.ejs:21:30

• default_index.ejs:10915 Object.
  [form-react]/[html-webpack-plugin]/default_index.ejs:10915:56

• default_index.ejs:21 webpack_require
  [form-react]/[html-webpack-plugin]/default_index.ejs:21:30

• default_index.ejs:11792 Object.
  [form-react]/[html-webpack-plugin]/default_index.ejs:11792:9

• default_index.ejs:21 webpack_require
  [form-react]/[html-webpack-plugin]/default_index.ejs:21:30

• default_index.ejs:67 module.exports.version
  [form-react]/[html-webpack-plugin]/default_index.ejs:67:18

• default_index.ejs:70
  [form-react]/[html-webpack-plugin]/default_index.ejs:70:10

[heptahedron]

Getting the same error on [email protected] but not 2.3.1.

[mastilver]

Are you still getting that error?

Can any of you provide us with a webpack.config.js and your index file

[sdesmond]

I'm seeing this too. Here are my details. I have a tiny "getting started" app that I can throw on GitHub if needed.

for my index file, if I do this, everything works fine:

module.exports = function(ngModule) {
    require('./sd-hello')(ngModule);
};

When I change it to this, I get the error __webpack_require__(...) is not a function:

export default function(ngModule) {
    require('./sd-hello')(ngModule);
};

webpack.config.js

module.exports = {
    context: __dirname + '/app',
    entry: './index.js',
    output: {
        path: __dirname + '/app',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: 'babel-loader'}
        ]
    }
};

package.json

{
  "name": "webpack_starter",
  "version": "0.0.0",
  "license": "MIT",
  "dependencies": {
    "lodash": "4.17.4"
  },
  "devDependencies": {
    "@types/node": "7.0.16",
    "angular": "1.6.4",
    "babel-cli": "6.24.1",
    "babel-loader": "7.0.0",
    "css-loader": "0.28.1",
    "style-loader": "0.17.0",
    "ts-loader": "2.0.3",
    "typescript": "2.2.2",
    "webpack": "2.4.1",
    "webpack-dev-server": "2.4.5"
  },
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --content-base app"
  }
}

Thanks!

[mastilver]

@sdesmond Thank you, can you throw in your .babelrc at the same time please

[mastilver]

@sdesmond If you can create that repository, that would make debugging far more easier :)

[sdesmond]

https://github.com/sdesmond/webpack_test

[mastilver]

@sdesmond Your issue doesn't have to do anything with html-webpack-plugin

Please read: https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0

@mo22 @heptahedron Closing this issue for now as I didn't hear from you

Feel free to reach out here again if you are still experiencing an issue

[sdesmond]

Ha, ha. Guess who wrote the tutorial I'm going through? That's right, Mr. Dodds :-). Thanks!

[wlxscn]

@sdesmond I have the same question.How do you resolve it?Can you share your webpack config? thanks

[sdesmond]

The article @mastilver posted answered the issue for me. I was trying to cross CommonJS modules and ES6 modules. You have to stick to one or the other.

[wlxscn]

thanks，I have resolved the question

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.