1

我收到此错误：

ERROR in ./~/react/react.js
Module not found: Error: Can't resolve './lib/React' in '/var/www/homelyfe/hl-app/node_modules/react'
 @ ./~/react/react.js 3:17-39
 @ ./app/index.js

ERROR in ./~/react-dom/index.js
Module not found: Error: Can't resolve './lib/ReactDOM' in '/var/www/homelyfe/hl-app/node_modules/react-dom'
 @ ./~/react-dom/index.js 3:17-42
 @ ./app/index.js

在我index.js（哪个 webpack2 似乎正确拾取）中，当我这样做时

import React from "react";
import { render } from "react-dom";

我收到上述错误。看来，webpack 无法找到反应。我已经安装了 react 和 react-dom 依赖项package.json。

我的 webpack.config.js 是：

const path = require("path");
const merge = require("webpack-merge");
const parts = require( "./webpack.config.parts" );
const PATHS = {
   app : path.join( __dirname, "app" ),
   build : path.join( __dirname, "build" )
};    
const common = {
   entry : {
      app : "./app/index.js"
   },
   output : {
      filename : "run.build.js",
      path : PATHS.build
   },
   resolve : {
      alias : {
         assets : path.resolve( __dirname, "app/assets" ),
         components : path.resolve( __dirname, "app/components" )
      },
      extensions : [ "js", "jsx" ]
   }
};
var config;
switch( process.env.npm_lifecycle_event ){
  case( "build-Prod" ): {
  ...
  }
  case( "start-Dev" ):
  default: {
        const eslintPath = path.join( __dirname, "/.eslintrc" );
        config = merge( common,
                                        parts.eslint( PATHS.app, eslintPath ),
                                        parts.babel( PATHS.app ),
                                        parts.devServer( PATHS.app ),
                                        parts.htmlWebpackPlugin());
    }
}
module.exports = config;

webpack.config.parts 文件是：

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
exports.babel = function( path ){
    var standardPresets = [
                            "react",
                            "es2015"
  ];
    var presets;
        presets = standardPresets;
    }
    return({
        module: {
            rules : [
                {
                    test : /\.jsx?$/,
          include : path,
                    use : [
                        {
                            loader: "babel-loader",
                            options : {
                                presets
                            }
                        }
                    ]
                }
            ]
        }
    });
};

exports.devServer = function() {
  return ({
    devServer: {
      historyApiFallback: true,
      hot: true,
      inline: true,
      stats: "errors-only"
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin({
        multiStep: true
      })
    ]
  });
};
exports.eslint = function( path, configFilePath ){
  return ({
    module: {
      rules : [
            {
                test : /\.jsx?$/,
                enforce : "pre",
        include : path,
                use : [
                    {
                        loader : "eslint-loader",
                        options : {
                            configFile : configFilePath
                        }
                    }
                ]
            }
        ]
    }
  });
};
exports.htmlWebpackPlugin = function( ) {
  return ({
    plugins: [
      new HtmlWebpackPlugin({
        title: "title"
      })
    ]
  });
};
4

1 回答 1

0

几分钟前我遇到了同样的错误。花了很多时间后，我找到了解决方案。

在您的resolve.extensions注释中，扩展名包括前导点。这样，您必须将其替换为以下内容：

extensions : [ ".js", ".jsx" ]

改变这一点，你的问题应该得到解决。

于 2017-01-21T19:53:35.570 回答