wake-up-neo.com

Webpack fehlt Modul 'Modul nicht gefunden'

Ich arbeite gerade an einer Webpack-Website für Babel usw. und versuche, das erste Mal zu bauen. Der Build ist erfolgreich, aber wenn ich den Browser öffne, erhalte ich die folgende Fehlermeldung:

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

Dieses Modul existiert. Wenn Sie in meinem Browser zu dieser aktuellen URL gehen, wird die betreffende Datei angezeigt. Ich kann jedoch nicht herausfinden, warum Webpack es nicht finden kann. Ich weiß nicht, ob es sich hierbei um eine Ausgabe von babel6 oder um ein Webpack handelt. Meine Konfigurationsdatei sieht so aus:

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)/,
      }
    ]
  }
}

und meine Webpack-Server-Datei lautet wie folgt:

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() {});

und hier sind die Pakete, die ich installiert habe:

"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);

Ich habe auch versucht, alle meine Pakete zu deinstallieren und erneut zu installieren. Ich habe versucht, die Node-Libs-Browser-Module speziell zu installieren. Vielen Dank.

16

Das Problem mit dem Ignoriere-Plugin für node_modules. In webpack.config.js haben Sie:

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

Von Plugin ignorieren Dokumentation:

Generieren Sie keine Module für Anforderungen, die der angegebenen RegExp entsprechen.

Webpack versucht, das Modul require mit dem Namen node_modules/process/browser für das React-Modul aufzurufen und schlägt fehl, da es ignoriert wird. 

Versuchen Sie, node_modules aus dem Ignorieren-Plugin zu entfernen, oder schreiben Sie weniger globale Bedingungen, wenn Sie dies wirklich benötigen.

11

der Import von nodeExternals hat für mich funktioniert, das ist mein 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