反应模块构建失败

Posted 2023-02-22

【中文标题】反应模块构建失败

【英文标题】：Module build failed for react

【发布时间】：2018-11-27 10:02:51

【问题描述】：

我正在使用 react 创建一个入门应用程序。我处于打印 hello world 的第一阶段，它不断抛出错误。

包.json。

  "name": "react-poc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "start": "npm run build",
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
    "build:prod": "webpack -p && cp src/index.html dist/index.html"
  ,
  "keywords": [
    "reactjs"
  ],
  "author": "Ankur",
  "license": "MIT",
  "dependencies": 
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  ,
  "devDependencies": 
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  

webpack.config.js

var path = require('path'),
    DIST_DIR = path.resolve(__dirname,"dist"),
    SRC_DIR = path.resolve(__dirname,"src");

var config =
    entry: SRC_DIR + "/app/index.js",
    output: 
        path:DIST_DIR +  "/app",
        filename:"bundle.js",
        publicPath: "/app/"
    ,
    module: 
        rules:[
            
                test: /.jsx?$/,
                loader: "babel-loader",
                exclude:/node_modules/,
                include:SRC_DIR,
                query:
                
                    presets:["react","es2015","stage-2"]
                
            
        ]
    
;

module.exports = config;

以下是我在npm start 之后得到的错误

ERROR in ./src/app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-core'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (C:\PracticeCode\ReactPOC\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (C:\PracticeCode\ReactPOC\node_modules\babel-loader\lib\index.js:3:13)
    at Module._compile (C:\PracticeCode\ReactPOC\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (C:\PracticeCode\ReactPOC\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at loadLoader (C:\PracticeCode\ReactPOC\node_modules\loader-runner\lib\loadLoader.js:13:17)
    at iteratePitchingLoaders (C:\PracticeCode\ReactPOC\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (C:\PracticeCode\ReactPOC\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
    at NormalModule.doBuild (C:\PracticeCode\ReactPOC\node_modules\webpack\lib\NormalModule.js:282:3)
    at NormalModule.build (C:\PracticeCode\ReactPOC\node_modules\webpack\lib\NormalModule.js:429:15)
    at Compilation.buildModule (C:\PracticeCode\ReactPOC\node_modules\webpack\lib\Compilation.js:369:10)
    at moduleFactory.create (C:\PracticeCode\ReactPOC\node_modules\webpack\lib\Compilation.js:724:12)
    at factory (C:\PracticeCode\ReactPOC\node_modules\webpack\lib\NormalModuleFactory.js:405:6)
    at hooks.afterResolve.callAsync (C:\PracticeCode\ReactPOC\node_modules\webpack\lib\NormalModuleFactory.js:155:13)
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\PracticeCode\ReactPOC\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesWaterfallHook.lazyCompileHook [as _callAsync] (C:\PracticeCode\ReactPOC\node_modules\tapable\lib\Hook.js:35:21)
    at resolver (C:\PracticeCode\ReactPOC\node_modules\webpack\lib\NormalModuleFactory.js:138:29)
    at process.nextTick (C:\PracticeCode\ReactPOC\node_modules\webpack\lib\NormalModuleFactory.js:342:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-poc@1.0.0 build: `webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-poc@1.0.0 build script.

我在这里做错了什么。

【参考方案1】：

安装 babel-core 作为你的开发依赖，它应该可以工作：

npm install babel-core --save-dev

学分：

Cannot find module 'babel-core' ERROR in Cannot find module 'babel-core'. using react.js, webpack, and express server