web-dev-qa-db-fra.com

Module Webpack manquant 'Module introuvable'

Je travaille actuellement sur un site Webpack babel etc réagissant et essayant de construire la première fois. La construction est réussie, mais lorsque j'ouvre le navigateur, l'erreur suivante apparaît:

Uncaught Error: Cannot find module "/Users/michael.nakayama/Documents/Development/jamsesh/node_modules/webpack/node_modules/node-libs-browser/node_modules/process/browser.js"

Ce module existe. Aller à cette URL réelle dans mon navigateur montre le fichier en question. Mais je n'arrive pas à comprendre pourquoi webpack ne le trouve pas. Je ne sais pas s'il s'agit d'un problème babel6 ou d'un problème de WebPack, ou de l'un des deux. Mon fichier de configuration ressemble à ceci:

var webpack = require('webpack');
var cleanWebpack = require('clean-webpack-plugin');

var ignore = new webpack.IgnorePlugin(new RegExp("/(node_modules|ckeditor)/"))

module.exports = {
  devtool: 'inline-source-map',
  entry: './lib/client/entry',
  output: {
    path: __dirname + '/public/js',
    filename: 'app.js',
    publicPath: 'http://localhost:8081/js/',
  },
  plugins: [
    ignore,
  ],
  resolve: {
    extensions: ['', '.js'],
    moduleDirectories: ['./node_modules']
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loaders: ['babel-loader?presets[]=react,presets[]=es2015,plugins[]=transform-es2015-classes,plugins[]=transform-react-jsx'],
        exclude: /(node_modules)/,
      }
    ]
  }
}

et mon fichier de serveur webpack est le suivant:

var WebpackDevServer = require('webpack-dev-server');

var webpack = require('webpack');
var config = require('../../webpack.config');

var server = new WebpackDevServer(webpack(config), {
  // webpack-dev-server options
  publicPath: config.output.publicPath,
  stats: { colors: true },
});

server.listen(8081, 'localhost', function() {});

et voici les paquets que j'ai installés:

"devDependencies": {
    "babel-cli": "^6.3.17",
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-plugin-syntax-jsx": "^6.3.13",
    "babel-plugin-transform-es2015-classes": "^6.4.0",
    "babel-plugin-transform-react-jsx": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "body-parser": "^1.14.2",
    "clean-webpack-plugin": "^0.1.5",
    "express": "^4.13.3",
    "history": "^1.17.0",
    "jade": "^1.11.0",
    "nodemon": "^1.8.1",
    "path": "^0.12.7",
    "pg": "^4.4.3",
    "react": "^0.14.6",
    "react-dom": "^0.14.3",
    "react-hot-loader": "^1.3.0",
    "react-router": "^1.0.3",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  }

entry.js:

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var routes = require('../routes');

// -v x.13.x
/**Router.run(routes, Router.HistoryLocation, function (Handler, state) {
  React.render(<Handler/>, document.getElementById('react-app'));
});**/

var node = document.getElementById('react-app');
// -v 1.0.0
ReactDOM.render(<Router history={createBrowserHistory()} routes={routes}/> , node);

Également en tête-à-tête, j'ai essayé de désinstaller et de réinstaller tous mes paquets. J'ai essayé d'installer spécifiquement les modules node-libs-browser. Merci.

javascriptwebpackbabeljs
16
Michael Nakayama

Le problème avec ignorer le plugin sur node_modules. Dans webpack.config.js, vous avez:

var ignore = new webpack.IgnorePlugin(new RegExp("/(node_modules|ckeditor)/"))
...
plugins: [
  ignore,
],

De Ignore Plugin documentation:

Ne générez pas de modules pour les demandes correspondant à la RegExp fournie.

Webpack tente de require module avec le nom node_modules/process/browser pour le module React et échoue car il est ignoré. 

Essayez de supprimer node_modules de Ignore Plugin ou d'écrire une condition moins globale si vous en avez vraiment besoin.

11
Dmitry Yaremenko

importer nodeExternals a fonctionné pour moi, voici mon server.webpack.config:

import path from 'path';
**import nodeExternals from 'webpack-node-externals';**

const CONTEXT = path.join( __dirname, "../.." ),
  INPUT_SERVER_DIR = path.join( CONTEXT, "server" ),
  OUTPUT_SERVER_DIR = path.join( CONTEXT, "dist/server" );

export default [
  {
    name: 'server',
    target:  'node',
    context: INPUT_SERVER_DIR,
    node: {
      __dirname: false
    },
    entry: './server',
    devtool : 'source-map',
    output: {
      path: OUTPUT_SERVER_DIR,
      filename: "server.js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader"
        }
      ]
    },
    resolve: {
      extensions: ['.js']
    },
    **externals : [ nodeExternals() ]**
  }
];

1
Davide Carpini