web-dev-qa-db-fra.com

`__webpack_require __ (...) n'est pas une fonction` lors de l'utilisation de babel 6

Tout semble bien se construire: http://d.pr/i/1aZxR Avec les configs suivants. 

Cependant, lorsque j'exécute le code, l'erreur suivante s'affiche (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

Je pense que Babel interfère avec __webpack_require__ d'une manière ou d'une autre, mais je ne suis pas sûr. J'ai essayé d'utiliser différents transformations/plugins mais je n'ai pas pu trouver de solution.

.babelrc:

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

voici mon 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

Je voudrais ajouter une autre raison pour laquelle cette erreur peut apparaître:

J'ai fait ce qui suit:

import mapActions from 'vuex'

au lieu de:

import { mapActions } from 'vuex'

Le premier importait l'export vuex complet, qui est un objet. L'ajout d'objet de déstructuration a résolu le problème.

9
William

J'ai eu la même erreur. Lorsque vous utilisez des modules es6, vous devez utiliser require (...). Default

Par exemple:

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

Cependant, babel-plugin-add-module-exports devrait également fonctionner.

Vous pouvez consulter cette page: github webpack numéros 1685

6
kgosse

Je pense que les solutions proposées pour passer de l'exigence à l'importation ne sont pas correctes. Les importations doivent figurer en haut du fichier. Par conséquent, vous ne pouvez pas demander à votre version de production d’omettre les devtools. Vous voulez un besoin conditionnel.

Je pense que babel-plugin-add-module-exports résout le problème. Jetez un oeil à ce react-redux-starter-kit pour voir comment il est utilisé dans un projet.

3
Thijs Koerselman

J'ai eu le même problème. La solution consistait à passer des instructions obligatoires, telles que

let fs = require("fs");

aux importations via

import * as fs from 'fs';

Vous pouvez également exposer tous les modules de nœud via le tableau externals dans votre configuration Webpack. Comme ils sont fournis via les externes Webpack, il n'est pas nécessaire de les demander, mais de les utiliser avec des imports.

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

Vous pouvez en savoir plus sur ce problème dans mon article .

2
MatthiasSommer

J'ai eu un problème similaire après la mise à jour vers Babel 6 dans mon fichier d'entrée webpack-dev-server. Comme mentionné par @Serhey dans les commentaires, j'ai résolu le problème en passant de l'exigence à l'importation, c'est-à-dire require('./devTools)(store); à import devTools from './devTools'; devTools(store);.

2
LemurDev

Mon cas est juste l'inverse de la réponse donnée par @William ci-dessus . Y compris {} dans import mapActions from 'vuex' m'a aidé . En tant que:

import { mapActions } from 'vuex'
0
anil shrestha

J'ai eu ce problème avec mon pack Web parce que je construisais mon projet pour le Web et le noeud et que j'utilisais isomorphic-unfetch dans les deux entry. 

Je l'ai corrigé en remplaçant isomorphic-unfetch par le fetch approprié: unfetch pour web et node-fetch pour 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

J'ai résolu un problème similaire en ajoutant un chargeur manquant dans mon webpack.config. Aucune idée pourquoi cela résout le problème, mais vous voudrez peut-être également savoir s'il vous manque un chargeur.

(Juste pour être clair - au départ, j’ai découvert que le problème venait d’un chargeur lorsque j’ai rétrogradé la bibliothèque, ce qui l’a amené à une version antérieure. Les messages d’erreur de Webpack indiquaient qu’un chargeur json était manquant. puis pu revenir à la version la plus récente:

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

)

0
Simopaa