React SSR场景下Parcel中--target=node6参数的等效配置是什么？

算力阿峰

2026-9-28

问题根因

该报错本质是Node运行时将CSS文件当做JavaScript代码解析执行导致的语法错误。你的服务端构建流程错误地将CSS资源纳入了Node的执行链路，Node解析CSS文件时碰到类选择器的.字符无法识别，就会抛出该异常。

解决方案

按以下步骤调整配置即可复现Parcel 1的SSR构建效果：

调整Parcel 2的target配置，Parcel 2已废弃旧版--target=node6参数，你需要在package.json中显式声明服务端构建的运行时环境：

{
  "targets": {
    "server": {
      "context": "node",
      "outputFormat": "commonjs",
      "includeNodeModules": true
    }
  }
}

新增CSS资源mock逻辑，避免Node尝试解析静态资源：在项目根目录新建css-mock.js文件，内容如下：

// 忽略所有非JS静态资源的导入逻辑
require.extensions['.css'] = () => null;
require.extensions['.scss'] = () => null;
require.extensions['.less'] = () => null;
require.extensions['.png'] = () => null;
require.extensions['.jpg'] = () => null;

调整构建脚本，先执行客户端构建再执行服务端构建，确保服务端可以正确引用客户端生成的带哈希资源路径：

{
  "scripts": {
    "build:client": "parcel build src/client/index.html --dist-dir dist-client",
    "build:server": "parcel build src/server/index.js --target server --dist-dir dist-server --no-optimize",
    "build": "npm run build:client && npm run build:server",
    "start": "node -r ./css-mock.js dist-server/index.js"
  }
}