バベルを使用すると `__webpack_require __（...）は関数ではありません '6

Question

すべてがうまくいくようです：http://d.pr/i/1aZxR 以下の設定で。しかし

、私は次のようなエラーに取得するコードを実行すると、この（WebPACKの-devのサーバーを経由して）：

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 

私はバベルが何らかの方法で__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 
}; 

Answer 1

私は私のWebPACK-devのサーバーエントリファイルにバベル6にアップデートした後、同様の問題がありました。 @Serheyのコメントで述べたように、要求からインポートに切り替えることで問題を解決しました。つまり、require('./devTools)(store);からimport devTools from './devTools'; devTools(store);

Answer 2

私は要求からインポートに切り替えるための提案されたソリューションが正しくないと考えています。インポートはファイルの先頭で実行する必要があるため、プロダクションビルドでdevtoolsを省略することはできません。あなたは条件付きが必要です。

私はbabel-plugin-add-module-exportsが問題を解決すると思います。それがプロジェクトでどのように使用されているかを見るには、react-redux-starter-kitをご覧ください。

Answer 3

私は同じエラーがありました。 ES6モジュールを扱うときは、を使用する必要があります（...）が必要です例えば

デフォルト：。

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 webpack issues 1685

Answer 4

私は私のwebpack.configに不足しているローダーを追加することで、同様の問題を解決しました。これがどうしてこの問題を解決するのか分かりませんが、ローダーが不足しているかどうかを確認することもできます。

（私はもともと、私がライブラリを以前のバージョンにダウングレードしたときにローダーに問題があることを発見しました。Webpackエラーメッセージに、jsonローダーが見つからないと言っていました。その後、私の設定、および、最新のバージョンに戻すことができました：

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

）

Answer 5

私はこのエラーがポップアップするかもしれないもう一つの理由を追加したいと思います：

私は次のように：

import mapActions from 'vuex' 

代わりに：

import { mapActions } from 'vuex' 

前者が目的である全体vuex輸出を、インポートしました。オブジェクトの構造化を追加すると、問題が修正されました。

Answer 6

私は同じ問題がありました。解決策は、あなたがまたあなたのWebPACKの設定で外観の配列を経由して、すべてのノードモジュールを公開することができ

import * as fs from 'fs'; 

を経由して輸入するなど

let fs = require("fs"); 

として、文を要求から切り替えるようにしました。これらはWebpackの外部から提供されるため、それらを要求する必要はなく、インポートで使用する必要があります。

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

あなたはmy articleで、この問題についての詳細を読むことができます。