web-dev-qa-db-ja.com

Webpackが見つからないモジュール「モジュールが見つかりません」

現在、react webpack babelなどのサイトに取り組んでおり、初めてビルドしようとしています。ビルドは成功しましたが、ブラウザーを開くと次のエラーが表示されます。

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

このモジュールは存在します。ブラウザで実際のURLにアクセスすると、問題のファイルが表示されます。しかし、webpackがそれを見つけられない理由はわかりません。これがbabel6の問題なのか、webpackの問題なのか、どちらでもないのかわかりません。私の設定ファイルは次のようになります。

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

私のwebpackサーバーファイルは次のとおりです：

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

そして、ここに私がインストールしたパッケージがあります：

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

また、気をつけて、すべてのパッケージをアンインストールして再インストールしようとしました。特にnode-libs-browserモジュールをインストールしてみました。ありがとう。

javascriptwebpackbabeljs
17
Michael Nakayama

node_modulesのプラグインを無視する際の問題。 webpack.config.jsには、次のものがあります。

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

プラグインを無視 ドキュメントから：

提供されたRegExpに一致するリクエストのモジュールを生成しないでください。

Webpackは、React module）に対してnode_modules/process/browserという名前のrequireモジュールを試行し、無視されるため失敗します。

本当に必要な場合は、[プラグインを無視]からnode_modulesを削除するか、グローバル条件を少なくしてください。

12
Dmitry Yaremenko

nodeExternalsのインポートは私のために働いた、これは私の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