找不到入口模块和 webpack 中的错误

Question

我是 JavaScript 新手，并遵循Github上的清晰节点教程。但是无论我在所有模块中尝试过什么，当我运行yarn dev:wds 时，我都会收到此错误消息

    ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Renate\projects'     
    ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: 
    Error: Can't resolve './src'  in 'C:\Users\Renate\projects'  @ multi (webpack)-dev- 
    server/client?http://localhost:8

我已经尝试过这个解决方案，但是重新安装 babel-loader 7 并没有解决我的问题。我还尝试重新安装整个 webpack-module，但这也没有解决我的问题。

我的 webpack.config.babel.js 文件：

    ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Renate\projects'     
    ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: 
    Error: Can't resolve './src'  in 'C:\Users\Renate\projects'  @ multi (webpack)-dev- 
    server/client?http://localhost:8

我的 babelrc.json 文件：

// @flow

import path from 'path'
import webpack from 'webpack'

import { WDS_PORT } from './src/shared/config'
import { isProd } from './src/shared/util'

export default {
  entry: [
    'react-hot-loader/patch',
    './src/client',
  ],
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist/'),
    publicPath: isProd ? '/static/' : `http://localhost:${WDS_PORT}/dist/`,
  },
  module: {
    rules: [
      { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ },
    ],
  },
  devtool: isProd ? false : 'source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    port: WDS_PORT,
    hot: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
}

我的 package.json 文件

{
  "presets": [
    "env",
    "flow",
    "react"
  ],
  "plugins": [
    "flow-react-proptypes"
  ]
}

我的 eslintrc.json 文件

{
  "name": "your-project",
  "version": "1.0.0",
  "license": "MIT",
  "browserslist": [
    "> 1%"
  ],
  "scripts": {
    "start": "yarn dev:start",
    "dev:start": "nodemon -e js,jsx --ignore lib --ignore dist --exec babel-node src/server",
    "dev:wds": "webpack-dev-server --progress",
    "prod:build": "rimraf lib dist && babel src -d lib --ignore .test.js && cross-env NODE_ENV=production webpack -p --progress",
    "prod:start": "cross-env NODE_ENV=production pm2 start lib/server && pm2 logs",
    "prod:stop": "pm2 delete server",
    "lint": "eslint src webpack.config.babel.js",
    "test": "yarn lint && flow && jest --coverage",
    "precommit": "yarn test",
    "prepush": "yarn test && yarn prod:build"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "compression": "^1.7.4",
    "express": "^4.17.1",
    "immutable": "4.0.0-rc.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-hot-loader": "^4.5.3",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-actions": "^2.6.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/node": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-flow": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^25.1.0",
    "babel-loader": "7",
    "babel-plugin-flow-react-proptypes": "^25.1.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^7.0.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-compat": "^3.5.1",
    "eslint-plugin-flowtype": "^4.6.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-hooks": "1.7.0",
    "flow-bin": "^0.118.0",
    "husky": "^4.2.1",
    "jest": "^25.1.0",
    "nodemon": "^2.0.2",
    "pm2": "^4.2.3",
    "rimraf": "^3.0.2",
    "webpack": "^4.41.6",
    "webpack-babel-env-deps": "^1.6.3",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  },
  "type": "module"
}

作为参考，请在此处找到我的文件夹结构的附加快照。

如果你检查这个Github页面或这个，你会发现有更多的人有同样的问题，但到目前为止还没有解决方案对我有用。希望你能帮我！

更新

我也尝试过亚历克斯的建议（参见下面的答案），但没有成功。

    ...
    entry: [
       'react-hot-loader/patch',
       path.resolve(__dirname, './src/client')
       ],

    ...

Answer 1

我检查了你的仓库并解决了 webpack 问题。主要问题是每次导入 jsx 文件时，都需要将扩展​​名编写为 jsx。并且组件内部也存在一些错误，因此某些组件未得到解决。这是button.jsx 中的一个

// type Props = {
//   label: string,
//   handleClick: Function,
// }

而且由于许多包的实现发生了变化，bundle.js 给出了错误。例如，对于 React 热重载包，无需导入：

 import { AppContainer } from 'react-hot-loader'

检查文档。

还有很多 babel 包都是旧版本。所以我安装了新的软件包。你可以检查package.json。

webpack 配置的实现也是错误的。在 webpack.config.js 中，入口点采用相对路径，但输出点采用绝对路径。我整理了 webpack.config.js。

该项目还实现了服务器端代码，但为此，您需要另一个用于开发的 webpack.config.js。对于服务器端渲染，您需要使用ReactDOM. Hydro，而且这个项目还有太多重要的事情没有实现。这是回购协议：

修改后的回购协议