typescript - 错误 : Cannot find module '@vue/cli-plugin-babel/preset'

Question

当我使用 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)

客户端容器运行完美，客户端文件夹已挂载到 Cypress 容器，因此它应该可以正常工作。

Answer 1

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

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