Webpack2錯誤 - 模塊未找到

我收到此錯誤：Webpack2錯誤 - 模塊未找到

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無法找到反應。我對package.json中安裝的react-dom依賴關係有反應&。

我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" 
     }) 
    ] 
    }); 
};

來源

2016-11-28 Kayote

我有同樣的錯誤幾分鐘前。經過很長時間後，我找到了解決方案。

在你的resolve.extensions請注意，擴展包括主要的點。這樣你必須用下面的代替它：

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

改變這一點，你的問題應該得到解決。

來源

2017-01-21 19:53:35 dlopez

Webpack2錯誤 - 模塊未找到

回答

相關問題