无法导入反应模块

时间:2019-02-18 18:37:55

标签: javascript node.js reactjs webpack

我是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";

我在做什么错了?

0 个答案:

没有答案