このエラーが発生しています:
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"
})
]
});
};