web-dev-qa-db-ger.com

"__webpack_require __ (...) ist keine Funktion" bei Verwendung von Babel 6

Alles scheint gut zu bauen: http://d.pr/i/1aZxR Mit den folgenden configs. 

Beim Ausführen des Codes erhalte ich jedoch folgende Fehlermeldung (über den 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

Ich denke, dass Babel irgendwie mit __webpack_require__ interferiert, aber ich bin mir nicht sicher. Ich habe es mit verschiedenen Transformationen/Plugins versucht, konnte aber keine Lösung finden.

.babelrc:

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

hier ist meine 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
};
webpackbabeljswebpack-dev-server
34
chuliamiz

Ich möchte einen weiteren Grund hinzufügen, warum dieser Fehler auftauchen könnte:

Ich habe folgendes gemacht:

import mapActions from 'vuex'

anstatt:

import { mapActions } from 'vuex'

Ersteres importierte den gesamten vuex-Export, bei dem es sich um ein Objekt handelt. Das Hinzufügen von Objekt-Destructuring behebte das Problem.

9
William

Ich hatte den gleichen Fehler. Im Umgang mit es6-Modulen sollten Sie requir (...) verwenden. Default

Zum Beispiel:

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 sollte jedoch ebenfalls funktionieren.

Sie können diese Seite besuchen: github webpack issue 1685

6
kgosse

Ich hatte ein ähnliches Problem nach dem Update auf Babel 6 in meiner Webpack-Dev-Server-Eingabedatei. Wie von @Serhey in den Kommentaren erwähnt, habe ich mein Problem behoben, indem ich von "erforderlich" zu "importieren" gewechselt habe, d. H. require('./devTools)(store); zu import devTools from './devTools'; devTools(store);.

3
LemurDev

Ich bin der Meinung, dass die vorgeschlagenen Lösungen, von denen Sie wechseln müssen, nicht importiert werden müssen. Importe müssen oben in der Datei durchgeführt werden. Aus diesem Grund können Sie nicht die devtools für Ihren Produktionsaufbau auslassen. Sie möchten eine bedingte Anforderung.

Ich denke, babel-plugin-add-module-exports löst das Problem. Werfen Sie einen Blick auf dieses reag-redux-starter-kit , um zu sehen, wie es in einem Projekt verwendet wird.

3
Thijs Koerselman

Ich hatte das gleiche Problem. Die Lösung bestand darin, von den Anweisungen zu wechseln, wie z

let fs = require("fs");

importieren über

import * as fs from 'fs';

Sie können auch alle Node-Module über das externe Array in Ihrer Webpack-Konfiguration verfügbar machen. Da sie über die externen Webpacks bereitgestellt werden, müssen sie nicht benötigt, sondern beim Import verwendet werden.

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

Weitere Informationen zu diesem Problem finden Sie in meinem Artikel .

2
MatthiasSommer

Mein Fall ist nur die Umkehrung der Antwort, die @William oben gegeben hat . Einschließlich {} in import mapActions from 'vuex' hat mir geholfen .

import { mapActions } from 'vuex'
0
anil shrestha

Ich hatte dieses Problem mit meinem Webpack, da ich mein Projekt für das Web und den Knoten erstellte und isomorphic-unfetch in der entry verwendete. 

Ich habe es behoben, indem ich isomorphic-unfetch durch den entsprechenden Abruf ersetzt: unfetch für web & node-fetch für 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',
    ...
  },
];
0
Zhong Huiwen

Ich habe ein ähnliches Problem gelöst, indem ich einen fehlenden Loader in meine webpack.config eingefügt habe. Keine Ahnung, warum dies das Problem löst, aber Sie möchten vielleicht sehen, ob auch ein Lader fehlt.

(Nur um klar zu sein - ich habe ursprünglich herausgefunden, dass das Problem mit einem Loader war, als ich die Bibliothek heruntergestuft hat, wodurch das Problem auf eine frühere Version herabgestuft wurde. In Webpack-Fehlermeldungen wurde angegeben, dass ein Json-Loader fehlte. Daher fügte ich meiner Konfiguration Folgendes hinzu: und konnte dann auf die neueste Version zurückgehen:

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

)

0
Simopaa