typescript - ข้อผิดพลาด: ไม่สามารถหาโมดูล '@vue/cli-plugin-babel/preset'

ฉันเจอข้อผิดพลาดนี้ Error: Cannot find module '@vue/cli-plugin-babel/preset' เมื่อฉันรันการทดสอบ Cypress โดยใช้ docker-compose

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 ดังนั้นมันควรจะทำงานได้

คำตอบ #1

การเพิ่ม @vue/cli-plugin-babel/preset เป็นหนึ่งใน devDependencies ควรจะแก้ไขปัญหาได้

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

คำตอบ #2

หากคุณสร้างอิมเมจ Cypress จาก Dockerfile และเพิ่มบรรทัด RUN npm install นี้จะติดตั้ง dependencies ทั้งหมดใน package.json ในขณะที่สร้างอิมเมจนั้น

ไฟล์ compose จากนั้นจะใช้ build: /path/to/your/dockerfile แทน image: cypress/included:7.5.0