错误：找不到模块'@vue/cli-plugin-babel/preset'答案

【问题标题】：Error: Cannot find module '@vue/cli-plugin-babel/preset'错误：找不到模块'@vue/cli-plugin-babel/preset'
【发布时间】：2021-06-23 13:03:55
【问题描述】：

我在使用 docker-compose 运行 Cypress 测试时遇到此错误 Error: Cannot find module '@vue/cli-plugin-babel/preset'。

docker-compose.yml

  frontend:
    container_name: VueJS
    build: client
    volumes:
      - ./client:/app #Uncomment to directly update code in the container
      - /app/node_modules
#    environment:
#      - CHOKIDAR_USEPOLLING=true
    networks:
      default:
    ports:
      - "8080:8080"

  cypress:
   container_name: Cypress
   image: cypress/included:7.5.0
#   entrypoint: cypress open --project /e2e
   environment:
     # pass base url to test pointing at the web application
     - CYPRESS_baseUrl=http://frontend:8080
   # share the current folder as volume to avoid copying
   working_dir: /e2e
   volumes:
     - ./client:/e2e
#     - ./client/node_modules:/usr/local/lib/node_modules
   networks:
     default:
   ports:
     - "8081:8080"
   depends_on:
     - frontend
#     - backend
     - db

错误：

Error: Webpack Compilation Error

./cypress/specs/test.js

Module build failed (from /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/babel-loader/lib/index.js):

Error: Cannot find module '@vue/cli-plugin-babel/preset'

Require stack:

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/@babel/core/lib/config/files/plugins.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/@babel/core/lib/config/files/index.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/@babel/core/lib/index.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/babel-loader/lib/index.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/loader-runner/lib/loadLoader.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/loader-runner/lib/LoaderRunner.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/NormalModule.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/NormalModuleFactory.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/webpack.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/@cypress/webpack-batteries-included-preprocessor/index.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js

- /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/lib/plugins/child/index.js

at handle (/root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:172:23)

at finalCallback (/root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js:257:39)

at /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js:306:14

at AsyncSeriesHook.eval [as callAsync] (eval at create (/root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)

at AsyncSeriesHook.lazyCompileHook (/root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)

at /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js:304:22

at Compiler.emitRecords (/root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js:499:39)

at /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js:298:10

at /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js:485:14

at AsyncSeriesHook.eval [as callAsync] (eval at create (/root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)

at AsyncSeriesHook.lazyCompileHook (/root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)

at /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js:482:27

at /root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/neo-async/async.js:2818:7

at done (/root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/neo-async/async.js:3522:9)

at AsyncSeriesHook.eval [as callAsync] (eval at create (/root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)

at AsyncSeriesHook.lazyCompileHook (/root/.cache/Cypress/7.5.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)

客户端容器运行良好，客户端文件夹已安装到赛普拉斯容器，因此它应该可以工作。

【问题讨论】：

您有各种卷挂载“以避免复制”。删除这些卷挂载是否对您的问题有帮助，以便您使用映像中内置的代码和 node_modules 目录？

标签： typescript docker vue.js docker-compose cypress

【解决方案1】：

添加 @vue/cli-plugin-babel/preset 作为 devDependencies 之一应该可以解决问题。

npm install @vue/cli-plugin-babel/preset --save-dev

【讨论】：

我在我的 Dockerfile 中添加了 RUN npm install @vue/cli-plugin-babel/preset --save-dev，它现在可以工作，但奇怪的是 npm install 没有安装 babel
@vue/cli-plugin-babel/preset 不存在。你的意思可能是@vue/cli-plugin-babel

【解决方案2】：

如果您从 dockerfile 创建 cypress 映像并添加行 RUN npm install 这将在创建映像时安装 package.json 中的所有 deps。

然后撰写文件将使用build: /path/to/your/dockerfile 而不是image: cypress/included:7.5.0

【讨论】：