1. 技术文章
  2. ` __webpack_require__(…) is not a function` when using babel 6

` __webpack_require__(…) is not a function` when using babel 6

由 强颜欢笑 提交于 2019-12-02 21:45:19

I'd like to add another reason why this error might pop up:

I did the following:

import mapActions from 'vuex'

instead of:

import { mapActions } from 'vuex'

The former was importing the entire vuex export, which is an object. Adding object destructuring fixed the problem.

I had the same error. When dealing with es6 modules, you should use require(...).default

For instance:

const angular = require('angular');
const ngModule = angular.module('app', []);
require('./directives').default(ngModule);
// or
var kgdir = require('./directives').default;
kgdir(ngModule);

However, babel-plugin-add-module-exports should also work.

You can check out this page: github webpack issues 1685

I believe the proposed solutions to switch from require to import are not correct. Imports need to happen at the top of the file and therefor you can't have your production build omit the devtools. You want a conditional require.

I think babel-plugin-add-module-exports solves the problem. Have a look at this react-redux-starter-kit to see how it's used in a project.

I had a similar issue after updating to Babel 6 in my webpack-dev-server entry file. As mentioned by @Serhey in the comments, I resolved my issue by switching from require to import, i.e., require('./devTools)(store); to import devTools from './devTools'; devTools(store);

I had the same issue. The solution was to switch from require statements, such as

let fs = require("fs");

to imports via

import * as fs from 'fs';

You can also expose all Node modules via the externals array in your webpack config. Since they are provided through the Webpack externals, one does not have to require them but use them with imports.

module.exports = {
   "externals": {
      "electron": "require('electron')",
      "child_process": "require('child_process')",
      "fs": "require('fs')",
      "path": "require('path')",
      ...
   }
}

You can read more about this problem in my article.

I solved a similar issue by adding a missing loader into my webpack.config. No idea why this solves the issue, but you may want to see if you're missing a loader as well.

(Just to be clear - I originally found out that problem was with a loader when I downgraded the library causing the issue to an earlier version. Webpack error messages said that a json loader was missing, so I added the following to my config, and then was able to go back to the newest version:

module:{
loaders : [
  {
      test: /\.json$/,
      loader: "json-loader"
    }
]
}

)

I had this issue with my webpack because i was building my project for both web and node and I was using isomorphic-unfetch in both the entry.

I fixed it by replacing isomorphic-unfetch with the appropriate fetch: unfetch for web & node-fetch for nodejs

webpack.config.js

module.exports = [
  {
    entry: ['unfetch', 'regenerator-runtime/runtime', './lib/app.js'],
    ...
  },
  {
    entry: ['node-fetch', 'regenerator-runtime/runtime', './lib/app.js'],
    target: 'node',
    ...
  },
];

My case is just the reverse of the answer given by @William above. Including {} in import mapActions from 'vuex' helped me. As:

import { mapActions } from 'vuex'
标签
Webpack
babeljs
webpack-dev-server
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!