`__webpack_require__() не является функцией` при использовании babel 6

Кажется, все работает нормально: http://d.pr/i/1aZxR со следующими конфигурациями.

Однако, когда я запускаю код, я получаю следующую ошибку (через webpack-dev-server):

Uncaught TypeError: __webpack_require__(...) is not a function(anonymous function) @ login.js:4__webpack_require__ @ bootstrap 38790ff45722f55eb700?6a08:50(anonymous function) @ bootstrap.js:2363__webpack_require__ @ bootstrap 38790ff45722f55eb700?6a08:50(anonymous function) @ app.38790ff45722f55eb700.js:29__webpack_require__ @ bootstrap 38790ff45722f55eb700?6a08:50webpackJsonpCallback @ bootstrap 38790ff45722f55eb700?6a08:21(anonymous function) @ app.38790ff45722f55eb700.js:1
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.7/$injector/nomod?p0=app
    at http://localhost:3000/vendor.js:193:13
    at http://localhost:3000/vendor.js:2111:18
    at ensure (http://localhost:3000/vendor.js:2035:39)
    at module (http://localhost:3000/vendor.js:2109:15)
    at http://localhost:3000/vendor.js:4515:23
    at forEach (http://localhost:3000/vendor.js:461:21)
    at loadModules (http://localhost:3000/vendor.js:4499:6)
    at createInjector (http://localhost:3000/vendor.js:4424:12)
    at doBootstrap (http://localhost:3000/vendor.js:1782:21)
    at bootstrap (http://localhost:3000/vendor.js:1803:13)
http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=app&p1=Error%3A%20%…%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A3000%2Fvendor.js%3A1803%3A13)(anonymous function) @ angular.js:68(anonymous function) @ angular.js:4413forEach @ angular.js:336loadModules @ angular.js:4374createInjector @ angular.js:4299doBootstrap @ angular.js:1657bootstrap @ angular.js:1678angularInit @ angular.js:1572(anonymous function) @ angular.js:28899fire @ jquery.js:3099self.fireWith @ jquery.js:3211jQuery.extend.ready @ jquery.js:3417completed @ jquery.js:3433

Я думаю, что babel каким-то образом мешает __webpack_require__, но я не уверен. Я пробовал использовать разные преобразования/плагины, но не смог найти решение.

.babelrc:

{
  "plugins":[
    "transform-runtime",
    "transform-node-env-inline"
  ],
  "presets":[
    "stage-0",
    "es2015"
  ]
}

вот мой webpack.config.js:

var Clean = require('clean-webpack-plugin');
var CompressionPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var fs = require('fs');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
var path = require('path');
var StatsPlugin = require('stats-webpack-plugin');
var webpack = require('webpack');

//CONSTANTS

var NODE_ENV = process.env.NODE_ENV;
var IS_DEV = NODE_ENV === 'development';
var babelFile = fs.readFileSync('./.babelrc', 'utf8');
var BABELRC = JSON.parse(babelFile);
var cleanFonts = function(){
  return new Clean(['dist/tmp/*.{ttf,eot,svg,woff}']);
}
var cleanImages = function(){
  return new Clean(['dist/tmp/*.{png,jpg}']);
}
var cleanJs = function(){
  return new Clean(['dist/*.{js,map}']);
}
var plugins = [
  new webpack.NoErrorsPlugin(),
  cleanJs(),
  // new StatsPlugin('stats.json', {chunkModules: true}),
  new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","window.jQuery": "jquery" }),
  new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
  new HtmlWebpackPlugin({
    template: 'client/app/vendors/assets/index-tmpl.html',
    filename: 'index.html'
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor.js',
    chunks:['customer','personalOrganization','app']
  })
  // new ngAnnotatePlugin({add: true})
  // new ExtractTextPlugin("style.[hash].css", {
  //    disable: false,
  //    allChunks: true
  // }),

  //new webpack.optimize.CommonsChunkPlugin({minChunks: 2, children: true, async: true}),
  // new CompressionPlugin({asset: "{file}.gz", algorithm: "gzip", regExp: /\.js$|\.html$/, threshold: 10240, minRatio: 0.8 })
];
var dev_plugins = [
]
var prod_plugins = [
  cleanFonts(),
  cleanImages(),
  new webpack.optimize.UglifyJsPlugin({
    minimize: true,
    sourceMap: false,
    compress: { warnings: false },
    mangle: false
  }),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.AggressiveMergingPlugin()
];
if(NODE_ENV !== 'development'){
  plugins = plugins.concat(prod_plugins);
}
else{
  plugins = plugins.concat(dev_plugins);
}
babelLoaderOpts = {
  cacheDirectory: true
};
Object.assign(babelLoaderOpts, BABELRC);
module.exports = {
  cache: IS_DEV,
  // watch: IS_DEV,
  devtool: 'source-map',
  entry: {
    "app": "./client/app/app.js",
    "devserver": 'webpack-dev-server/client?http://localhost:3000'
  },
  output: {
      path: __dirname + "/dist",
      filename: '[name].[hash].js'
  },
  module: {
        noParse: [
          /moment.js/
        ],
        loaders: [
            { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
            {
              test: /\.js$/,
              exclude: /(node_modules|bower_components|vendors)/,
              loader: 'babel',
              query: babelLoaderOpts
            },
            { test: /\.html$/, loader: 'raw' },
            { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded"+"&includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")},
            { test: /\.css$/,  loader: 'style!css' },
            { test: /\.(png|jpeg|jpg|gif)$/, loader: 'url-loader?limit=30000&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.woff(\?\S*)?$/,  loader : 'url?prefix=font/&limit=10000&mimetype=application/font-woff&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.woff2/, loader: 'url?prefix=font/&limit=100000&mimetype=application/font-woff2&name=tmp/[name].[ext]&no_emit_env=development' },
            { test: /\.ttf/,   loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.eot/,   loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.svg/,loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},
            //{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&&includePaths[]='+ path.resolve(__dirname, './node_modules/compass-mixins/lib')) },
            //{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
      ]
  },
  devServer: {
    contentBase: './client/app'
  },
  resolve: {
      modulesDirectories: ['vendors','node_modules', 'bower_components'],
      extensions: ['', '.js', '.json']
  },
  plugins: plugins
};

person chuliamiz    schedule 12.11.2015    source источник
comment
Я получил такую ​​ошибку, когда я пытаюсь вызвать функцию непосредственно из require require('module-test')();, но модуль возвращает не функцию;   -  person Serhey    schedule 19.11.2015
comment
И еще один, если вы попытаетесь использовать require('') с синтаксисом ES6, объект возврата babel-loader. Вместо этого используйте import.   -  person Serhey    schedule 19.11.2015
comment
У меня такая же проблема. Мой проект состоит из 98% модулей AMD и 2% новых модулей ES6. Я хотел бы постепенно перейти на ES6, но это сложно, если мне нужно изменить все модули, которые используют новый модуль ES6. Хорошо работал в Babel 5.   -  person Ilkka Oksanen    schedule 02.12.2015
comment
Есть новости по этому вопросу? Это происходит со мной каждую вторую компиляцию, когда я использую компиляцию часов. Чтобы исправить это, мне нужно перестроить систему с нуля, а не использовать часы, что является огромной тратой времени.   -  person ChrisR    schedule 05.02.2016


Ответы (8)


Я хотел бы добавить еще одну причину, по которой эта ошибка может появиться:

Я сделал следующее:

import mapActions from 'vuex'

вместо:

import { mapActions } from 'vuex'

Первый импортировал весь экспорт vuex, который является объектом. Добавление деструктуризации объекта устранило проблему.

person William    schedule 05.06.2017
comment
Это поставило меня на правильный путь - я экспортировал объект по умолчанию, а затем пытался выполнить его как importedObj() - person aurumpotestasest; 13.09.2017

У меня была такая же ошибка. При работе с модулями es6 следует использовать require(...).default

Например:

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

Однако babel-plugin-add-module-exports также должен Работа.

Вы можете проверить эту страницу: ошибки веб-пакета github 1685

person kgosse    schedule 13.01.2016

У меня была аналогичная проблема после обновления до Babel 6 в моем файле записи webpack-dev-server. Как упоминал @Serhey в комментариях, я решил свою проблему, переключившись с требования на импорт, то есть с require('./devTools)(store); на import devTools from './devTools'; devTools(store);

person LemurDev    schedule 28.11.2015

Я считаю, что предлагаемые решения по переходу от требования к импорту неверны. Импорт должен выполняться в верхней части файла, поэтому в рабочей сборке не должно быть средств разработки. Вы хотите условное требование.

Я думаю, что babel-plugin-add-module-exports решает проблему. Взгляните на этот react-redux-starter-kit, чтобы увидеть, как он используется. в проекте.

person Thijs Koerselman    schedule 27.12.2015
comment
этот плагин у меня не работает.. все еще получаю ту же ошибку. - person cameronroe; 30.12.2015

Я была такая же проблема. Решение состояло в том, чтобы переключиться с операторов require, таких как

let fs = require("fs");

импортировать через

import * as fs from 'fs';

Вы также можете открыть доступ ко всем модулям Node через массив externals в конфигурации вашего веб-пакета. Поскольку они предоставляются через внешние компоненты Webpack, их не нужно требовать, а использовать с импортом.

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

Подробнее об этой проблеме можно прочитать в моей статье.

person Matthias Sommer    schedule 19.07.2017
comment
Привет, это избавило от исходной проблемы, но я столкнулся с другой. Есть идеи: Uncaught ReferenceError: require is not defined - person Mr. Benedict; 25.11.2017
comment
@Mr.Benedict, вероятно, это потому, что требование не поддерживается в Интернете. Вы можете попробовать target: 'node', но это не сработает во внешнем интерфейсе (веб). - person Eksapsy; 26.03.2018
comment
Спасибо за решение. К сожалению, я столкнулся с другой ошибкой времени выполнения readdata.js:8 Uncaught TypeError: Cannot read property 'readFileSync' of undefined в readFromDataFile (readdata.js:8) в eval (index.js:8) в Module../src/index.js (bundle.js:109) в webpack_require (bundle.js:20) в bundle.js:84 в bundle.js:87 readFromDataFile @ readdata.js:8 (анонимно) @ index.js:8 ./src/index.js @ bundle.js:109 webpack_require @ bundle.js:20 (анонимно) @ bundle.js:84 (анонимно) @ bundle.js:87 - person Praveer Kumar; 20.05.2019

Мой случай полностью противоположен ответу, данному @William выше. Мне помогло включение {} в import mapActions from 'vuex' . В качестве:

import { mapActions } from 'vuex'
person anil shrestha    schedule 31.01.2019
comment
Я не знаю почему, но если это не работает, вы можете изменить, удалив фигурные скобки. У меня работает с фигурными скобками, но для предыдущего проекта без фигурных скобок все работало нормально. - person ; 07.07.2020

Я решил аналогичную проблему, добавив отсутствующий загрузчик в свой файл webpack.config. Понятия не имею, почему это решает проблему, но вы можете также проверить, отсутствует ли у вас загрузчик.

(Просто для ясности: изначально я обнаружил, что проблема была с загрузчиком, когда понизил версию библиотеки, вызвавшую проблему, до более ранней версии. В сообщениях об ошибках Webpack говорилось, что загрузчик json отсутствует, поэтому я добавил следующее в свою конфигурацию и затем смог вернуться к самой новой версии:

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

)

person Simopaa    schedule 31.08.2016

У меня была эта проблема с моим веб-пакетом, потому что я создавал свой проект как для сети, так и для узла, и я использовал isomorphic-unfetch как в файле entry.

Я исправил это, заменив isomorphic-unfetch соответствующей выборкой: unfetch для Интернета и node-fetch для 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',
    ...
  },
];
person Zhong Huiwen    schedule 12.11.2018