Webpack编译报错：无法解析'./src'，SSR项目配置求助

问题场景 #

• 正在实现SSR，src目录结构如下：

  /src
    ├── /client/index.jsx
    ├── /server/server.js
    └── /shared/Header.jsx
  

• 执行npm run dev后，Webpack报错：Module not found: Error: Can't resolve './src'

完整报错信息 #

~/Desktop/WEB_COURSE$ npm run dev

> web_course@1.0.0 dev
> env NODE_ENV=development webpack-dev-server

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.100:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/timothy/Desktop/WEB_COURSE/public' directory

# 无关提示后出现报错
ERROR in main
Module not found: Error: Can't resolve './src' in '/home/timothy/Desktop/WEB_COURSE'
resolve './src' in '/home/timothy/Desktop/WEB_COURSE'
  using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/timothy/Desktop/WEB_COURSE/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/timothy/Desktop/WEB_COURSE/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/timothy/Desktop/WEB_COURSE/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/timothy/Desktop/WEB_COURSE/src.wasm doesn't exist
      as directory
        existing directory /home/timothy/Desktop/WEB_COURSE/src
          using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: ./src)
            using path: /home/timothy/Desktop/WEB_COURSE/src/index
              using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/timothy/Desktop/WEB_COURSE/src/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/timothy/Desktop/WEB_COURSE/src/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/timothy/Desktop/WEB_COURSE/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/timothy/Desktop/WEB_COURSE/src/index.wasm doesn't exist

webpack 5.75.0 compiled with 1 error in 10070 ms

当前Webpack配置文件 #

webpack.config.js #

const clientConfig = require('./cfg/webpack.client.config');
const serverConfig = require('./cfg/webpack.server.config');

module.exports = [
  clientConfig,
  serverConfig,
];

webpack.client.config.js #

const path = require('path');

const NODE_ENV = process.env.NODE_ENV; 
const IS_DEV = NODE_ENV === 'development';
const IS_PROD = NODE_ENV === 'production';

function setupDevtool() {
  if (IS_DEV) return 'eval';
  if (IS_PROD) return false;
}

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts']
  },
  mode: NODE_ENV ? NODE_ENV : 'development',
  entry: path.resolve(__dirname, '../src/client/index.jsx'),
  output: {
    path: path.resolve(__dirname, '../dist/client'),
    filename: 'client.js'
  },
  module: {
    rules: [{
      test: /\.[tj]sx?$/,
      use: ['ts-loader']
    }]
  },
  devtool: setupDevtool()
};

webpack.server.config.js #

const path = require('path');

const NODE_ENV = process.env.NODE_ENV; 

module.exportts = {
    target: "node",
    mode: NODE_ENV ? NODE_ENV : 'development',
    entry: path.resolve(__dirname, '../src/server/server.js'),
    output: {
        path: path.resolve(__dirname, '../dist/server'),
        filename: 'server.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.ts']
    },
    module: {
        rules: [{
          test: /\.[tj]sx?$/,
          use: ['ts-loader']
        }]
    },
};

解决方案 #

1. 修复配置文件拼写错误 #

webpack.server.config.js中存在明显拼写错误：module.exportts 应该改为 module.exports。这个错误会导致服务端配置无法被正确加载，Webpack会使用默认入口规则去查找./src目录下的入口文件（比如index.js），但你的src目录下没有这个文件，因此报错。

修改后的webpack.server.config.js开头部分：

const path = require('path');

const NODE_ENV = process.env.NODE_ENV; 

module.exports = {
    // ... 其余配置不变
};

2. 调整开发脚本（可选优化） #

webpack-dev-server主要用于客户端代码的热更新开发，同时打包客户端和服务端配置可能会引发冲突。建议拆分脚本：

• 在package.json中添加服务端打包脚本：

  "scripts": {
    "dev": "env NODE_ENV=development webpack-dev-server --config cfg/webpack.client.config.js",
    "build:server": "env NODE_ENV=development webpack --config cfg/webpack.server.config.js",
    "start:server": "node dist/server/server.js"
  }
  

• 开发时，先执行npm run build:server打包服务端代码，再执行npm run dev启动客户端开发服务器，最后执行npm run start:server启动服务端。

内容的提问来源于stack exchange，提问作者timothyOrange