Question

我正在使用webpack和babel设置一个React项目，但我收到 React和ReactDOM无法解析的错误。

问题出在Webpack或Babel的版本上吗？

PS C:\Users\abhi\Desktop\mern-app> npm run webpack

> mern-app@1.0.0 webpack C:\Users\abhi\Desktop\mern-app
> webpack

ERROR in ./app.js
Module not found: Error: Can't resolve 'react' in 'C:\Users\abhi\Desktop\mern-app'
 @ ./app.js 5:13-29

ERROR in ./app.js
Module not found: Error: Can't resolve 'react-dom' in 'C:\Users\abhi\Desktop\mern-app'
 @ ./app.js 9:16-36
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mern-app@1.0.0 webpack: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mern-app@1.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\abhi\AppData\Roaming\npm-cache\_logs\2018-04-21T14_25_50_508Z-debug.log

配置和文件如下

的package.json

{
  "name": "mern-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
  "author": "Abhishek Kulshrestha",
  "license": "ISC",
  "dependencies": {
    "npm": "^5.8.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}

webpack.config.js

var path = require('path');

var webpack = require('webpack');

module.exports ={
    entry:'./app.js',
    output:{
        filename:'bundle.js',
        path:__dirname
    },
    resolve:{
        extensions:['.js']
    },
    module:{
        rules:[{
            test:/.jsx?$/,
            use:{
                loader:'babel-loader',
                options:{
                    presets: ['env',
                                'react']
                 }
            },
            exclude:/.node_modules/

        }]
    }

}

app.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    render(){
        return '<h1>Hello </h1>'
    }
}

ReactDOM.render(<App/>,document.getElementById('app'));

所有文件（package.json，webpack.config.js，app.js，index.html）都在同一个主文件夹中

请帮助

Answer 1

这段代码对我来说很好看。我认为在运行webpack命令之前你已经错过了依赖安装步骤。

请尝试按顺序执行以下步骤，看看是否能解决错误。

在目录中运行npm install，这将确保您在package.json中提到的所有依赖项都被下载到 node_modules 目录。
然后运行npm run webpack以生成bundle.js

使用webpack，babel加载React和ReactDOM

1 个答案: