Pertanyaan `__webpack_require __ (...) bukan fungsi` saat menggunakan babel 6


Semuanya tampak baik-baik saja: http://d.pr/i/1aZxR dengan konfigurasi berikut.

Namun, ketika saya menjalankan kode saya mendapatkan kesalahan berikut ini (via 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

Saya pikir babel mengganggu __webpack_require__ dalam beberapa hal tetapi saya tidak yakin. Saya mencoba menggunakan berbagai perubahan / plugin tetapi saya tidak dapat menemukan solusi.

.babelrc:

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

inilah webpack.config.js saya:

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
};

32
2017-11-12 23:44


asal


Jawaban:


Saya ingin menambahkan alasan lain mengapa kesalahan ini mungkin muncul:

Saya melakukan hal berikut:

import mapActions from 'vuex'

dari pada:

import { mapActions } from 'vuex'

Yang pertama adalah mengimpor keseluruhan vuex ekspor, yang merupakan objek. Menambahkan perusakan objek memperbaiki masalah.


7
2018-06-05 10:27



Saya memiliki kesalahan yang sama. Ketika berhadapan dengan modul es6, Anda harus menggunakan membutuhkan (...). default

Contohnya:

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

Namun, babel-plugin-add-module-exports juga harus bekerja.

Anda dapat melihat halaman ini: masalah github webpack 1685


4
2018-01-13 05:09



Saya percaya solusi yang diusulkan untuk beralih dari keharusan mengimpor tidak benar. Impor harus dilakukan di bagian atas file dan untuk itu Anda tidak dapat membuat produksi Anda mengabaikan devtools. Anda menginginkan persyaratan bersyarat.

kupikir babel-plugin-add-module-exports memecahkan masalah. Lihatlah ini react-redux-starter-kit untuk melihat bagaimana ini digunakan dalam sebuah proyek.


3
2017-12-27 15:32



Saya memiliki masalah yang sama. Solusinya adalah untuk beralih dari pernyataan membutuhkan, seperti

let fs = require("fs");

untuk mengimpor melalui

import * as fs from 'fs';

Anda juga dapat mengekspos semua modul Node melalui array eksternal dalam konfigurasi webpack Anda. Karena mereka disediakan melalui eksternal Webpack, seseorang tidak harus mewajibkan mereka tetapi menggunakannya dengan impor.

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

Anda dapat membaca lebih lanjut tentang masalah ini di artikel saya.


2
2017-07-19 20:35



Saya memiliki masalah serupa setelah memperbarui ke Babel 6 di file entri webpack-dev-server saya. Seperti yang disebutkan oleh @Serhey di komentar, saya menyelesaikan masalah saya dengan beralih dari keharusan mengimpor, yaitu, require('./devTools)(store); untuk import devTools from './devTools'; devTools(store);


1
2017-11-28 07:29



Saya memecahkan masalah serupa dengan menambahkan loader yang hilang ke dalam webpack.config saya. Tidak tahu mengapa ini menyelesaikan masalah, tetapi Anda mungkin ingin melihat apakah Anda kehilangan loader juga.

(Hanya untuk menjadi jelas - Saya awalnya menemukan bahwa masalah itu dengan loader ketika saya menurunkan pustaka menyebabkan masalah ke versi sebelumnya. Pesan kesalahan Webpack mengatakan bahwa json loader hilang, jadi saya menambahkan berikut ini ke konfigurasi saya, dan kemudian dapat kembali ke versi terbaru:

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

)


-2
2017-08-31 12:48