我是React,Nodejs和Webpack的新手,我正在启动一个项目,在我尝试导入react之前,一切正常。带有简单html的项目效果很好。但是,如果我尝试导入反应以创建组件,则将该组件集成到HTML中会失败。这是我执行“ npm run dev”时得到的日志。
> nodemon --exec babel-node src/server/server.js
[nodemon] 1.18.10 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `babel-node src/server/server.js` Live Reload disabled: listen EADDRINUSE :::35729 events.js:167
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::3001
at Server.setupListenHandle [as _listen2] (net.js:1286:14)
at listenInCluster (net.js:1334:12)
at Server.listen (net.js:1421:7)
at Function.listen (/home/josecarlos/Workspace/nodejs/basketmetrics2/node_modules/express/lib/application.js:618:24)
at Object.listen (/home/josecarlos/Workspace/nodejs/basketmetrics2/src/server/server.js:25:5)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Module._compile (/home/josecarlos/Workspace/nodejs/basketmetrics2/node_modules/pirates/lib/index.js:83:24)
at Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Object.newLoader [as .js] (/home/josecarlos/Workspace/nodejs/basketmetrics2/node_modules/pirates/lib/index.js:88:7)
at Module.load (internal/modules/cjs/loader.js:598:32) Emitted 'error' event at:
at emitErrorNT (net.js:1313:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
at Function.Module.runMain (internal/modules/cjs/loader.js:744:11)
at Object.<anonymous> (/home/josecarlos/Workspace/nodejs/basketmetrics2/node_modules/@babel/node/lib/_babel-node.js:234:23)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
文件“ package.json”
{
"name": "basketmetrics2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon --exec babel-node src/server/server.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.3.3",
"@babel/node": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"nodemon": "^1.18.10",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.4",
"webpack-dev-middleware": "^3.5.2",
"webpack-livereload-plugin": "^2.2.0"
},
"dependencies": {
"express": "^4.16.4",
"react": "^16.8.2",
"react-dom": "^16.8.2"
}
}
文件“ webpack.config.js”
import webpack from "webpack";
import htmlWebpackPlugin from "html-webpack-plugin";
import LiveReloadPlugin from "webpack-livereload-plugin";
export default {
mode: "development",
entry: "./src/client/index.js",
output: {
path: "/",
filename: "bundle.js"
},
module: {
rules: [
{
use: {
loader: "babel-loader",
},
test: /\.js$/,
exclude: /node_modules/
},
{
use: ["style-loader", "css-loader"],
test: /\.css$/
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "saas-loader",
options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/client/index.html"
}),
new LiveReloadPlugin()
]
}
文件index.js
import React from "react";
我在做什么错了?