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

Question

I encounter this error Error: Cannot find module '@vue/cli-plugin-babel/preset' when I run Cypress test using 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:

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)

The client container run perfectly and the client folder is mounted to the Cypress container so it should works.

You have various volume mounts "to avoid copying". Does it help your issue to delete these volume mounts, so that you use the code and node_modules directory that's built into the image? — David Maze
– David Maze, Commented Jun 23, 2021 at 13:13

Salahuddin Ahmed · Accepted Answer · 2021-06-23 14:06:01Z

5

Adding @vue/cli-plugin-babel/preset as one of the devDependencies should solve the issue.

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

answered Jun 23, 2021 at 14:06

Salahuddin Ahmed

5,7344 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Howins Over a year ago

I added RUN npm install @vue/cli-plugin-babel/preset --save-dev in my Dockerfile, it works now but it's strange that npm install doesn't install babel

tao Over a year ago

@vue/cli-plugin-babel/preset doesn't exist. You probably meant @vue/cli-plugin-babel

richardsefton · Accepted Answer · 2021-06-23 20:35:05Z

0

If you create the cypress image from a dockerfile and add the line RUN npm install this will install all deps in the package.json at the time the image is created.

The compose file would then use build: /path/to/your/dockerfile instead of image: cypress/included:7.5.0

answered Jun 23, 2021 at 20:35

richardsefton

3702 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related