如何容器化Nx React JS应用？ESM加载器报错解决方案咨询

问题场景 #

我有一个基于Nx构建的React JS应用，包含1个主应用和15个库。本地运行无报错，Docker构建也正常，但启动容器时出现ESM加载相关错误，尝试多种容器化方式均失败。

现有配置文件 #

Dockerfile #

FROM node: 14.5.0

WORKDIR /app

COPY . .

RUN npm install

CMD ["npm", "run", "start", "jsure-admin"]

docker-compose.base.yml #

version: '3'

services:
  nx-app-base:
    restart: always
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      - DEV_PLATFORM=DOCKER
    volumes:
      - ./:/app
      - mono-node-modules:/app/node_modules

docker-compose.yml #

version: '3'

services:
  # React App
  app-1:
    extends:
      file: docker-compose.base.yml
      service: nx-app-base
    command: npm run jsure-admin:dev:docker
    ports:
      - 4200:4200

volumes:
  mono-node-modules: null

package.json（关键部分） #

{
  "name": "jsure",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "jsure-admin":"jsure-admin",
    "build": "nx build",
    "test": "nx test"
  },
...
}

报错信息 #

2023-04-02 17:01:25 
2023-04-02 17:01:25 > jsure@0.0.0 start /app
2023-04-02 17:01:25 > nx serve "jsure-admin"
2023-04-02 17:01:25 
2023-04-02 17:01:26 
2023-04-02 17:01:26 > nx run jsure-admin:serve:development
2023-04-02 17:01:26 
2023-04-02 17:01:29 <i> [webpack-dev-server] Project is running at:
2023-04-02 17:01:29 
2023-04-02 17:01:29 >  NX  Web Development Server is listening at http://localhost:4200/
2023-04-02 17:01:29 
2023-04-02 17:01:29 <i> [webpack-dev-server] Loopback: http://localhost:4200/, http://127.0.0.1:4200/
2023-04-02 17:01:29 <i> [webpack-dev-server] 404s will fallback to '/index.html'
2023-04-02 17:02:05 <e> [webpack-dev-middleware] HookWebpackError: Only file and data URLs are supported by the default ESM loader
2023-04-02 17:02:05 <e>     at makeWebpackError (/app/node_modules/webpack/lib/HookWebpackError.js:48:9)
2023-04-02 17:02:05 <e>     at /app/node_modules/webpack/lib/Compilation.js:3060:12
2023-04-02 17:02:05 <e>     at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:46:1)
2023-04-02 17:02:05 <e>     at /app/node_modules/webpack/lib/Compilation.js:510:26
2023-04-02 17:02:05 <e>     at /app/node_modules/copy-webpack-plugin/dist/index.js:708:13
2023-04-02 17:02:05 <e> -- inner error --
2023-04-02 17:02:05 <e> Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader
2023-04-02 17:02:05 <e>     at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:698:11)
2023-04-02 17:02:05 <e>     at Loader.resolve (internal/modules/esm/loader.js:82:40)
2023-04-02 17:02:05 <e>     at Loader.getModuleJob (internal/modules/esm/loader.js:226:28)
2023-04-02 17:02:05 <e>     at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:51:40)
2023-04-02 17:02:05 <e>     at link (internal/modules/esm/module_job.js:50:36)
2023-04-02 17:02:05 <e> caused by plugins in Compilation.hooks.processAssets
2023-04-02 17:02:05 <e> Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader
2023-04-02 17:02:05 <e>     at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:698:11)
2023-04-02 17:02:05 <e>     at Loader.resolve (internal/modules/esm/loader.js:82:40)
2023-04-02 17:02:05 <e>     at Loader.getModuleJob (internal/modules/esm/loader.js:226:28)
2023-04-02 17:02:05 <e>     at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:51:40)
2023-04-02 17:02:05 <e>     at link (internal/modules/esm/module_job.js:50:36)

解决方案 #

报错指向copy-webpack-plugin和ESM加载器的URL解析问题，结合Nx+Docker场景，按以下步骤修复：

1. 升级Node镜像并优化依赖安装 #

Node 14.5.0对ESM支持不完善，升级到同版本分支的稳定版（如14.21.3），同时优化Dockerfile的依赖缓存逻辑：

FROM node:14.21.3

WORKDIR /app

# 先拷贝依赖配置文件，缓存安装层
COPY package*.json ./

RUN npm ci --only=production

# 再拷贝项目代码
COPY . .

CMD ["npm", "run", "start", "jsure-admin"]

执行以下命令清理旧依赖和Docker卷，重新构建：

rm -rf node_modules
docker-compose down -v
docker-compose build --no-cache

2. 修改Nx开发服务器绑定地址 #

Nx默认绑定localhost，容器内无法被外部访问且可能导致ESM URL解析错误。修改apps/jsure-admin/project.json中serve目标的配置：

{
  "targets": {
    "serve": {
      "executor": "@nrwl/web:dev-server",
      "options": {
        "host": "0.0.0.0",
        "port": 4200,
        "open": false
      },
      "configurations": {
        "development": {
          "buildTarget": "jsure-admin:build:development"
        }
      }
    }
  }
}

3. 修复package.json无效脚本 #

原"jsure-admin":"jsure-admin"是无效命令，替换为正确的启动脚本：

"scripts": {
  "start": "nx serve",
  "jsure-admin:serve": "nx serve jsure-admin",
  "jsure-admin:dev:docker": "nx serve jsure-admin --host 0.0.0.0",
  "build": "nx build",
  "test": "nx test"
}

4. 优化Docker挂载与忽略规则 #

添加.dockerignore文件避免本地文件干扰容器环境：

node_modules
dist
.git
.nx

5. 升级相关依赖包 #

更新Nx和copy-webpack-plugin到适配Node版本的稳定版：

npm update @nrwl/web @nrwl/react copy-webpack-plugin

内容的提问来源于stack exchange，提问作者Enes Döngöz