[Cypress 10] Fail to compile in CI - Cannot find module 'cypress'

Current behavior

When upgrading to Cypress 10, Cypress is installed in the dev dependencies.

• The upgrade first caused an eslint error, not sure if this was expected… adding the rule to .eslintrc fixed the issue.

• When running in CI, our build is trying to import cypress from cypress.config.ts but since dev-dependencies are not installed during production build, it caused the build to fail in BuildKite

The workaround we have now is to remove ENV NODE_ENV=production in Dockerfile and that seems to solve the issue, but I’m not sure if it is the best solution as now cypress is included in the production node_module file and it has increased our docker image size too…

The below screenshot is from dive, it allows you to inspect image layer content

Debug logs

Dockerfile

FROM node:lts-alpine AS deps
WORKDIR /opt/app
ENV CI=true
# comment out production node env
# ENV NODE_ENV=production
COPY package.json yarn.lock ./
RUN yarn config set no-progress && yarn --frozen-lockfile

FROM node:lts-alpine AS builder
WORKDIR /opt/app
COPY . .
COPY --from=deps /opt/app/node_modules ./node_modules
ENV NODE_ENV=production
RUN yarn build

FROM node:lts-alpine AS runner
WORKDIR /opt/app
ENV NODE_ENV=production
COPY --from=builder /opt/app/next.config.js ./
COPY --from=builder /opt/app/public ./public
COPY --from=builder /opt/app/.next ./.next
COPY --from=deps /opt/app/node_modules ./node_modules
CMD ["node_modules/.bin/next", "start"]

cypress.config.ts

import { defineConfig } from 'cypress';

export default defineConfig({
  projectId: ******,
  pageLoadTimeout: 80000,
  chromeWebSecurity: false,
  defaultCommandTimeout: 30000,
  requestTimeout: 30000,
  responseTimeout: 30000,
  viewportWidth: 1280,
  viewportHeight: 800,
  retries: {
    runMode: 2,
    openMode: 0
  },
  scrollBehavior: 'center',
  e2e: {
    setupNodeEvents(on, config) {
      // eslint-disable-next-line @typescript-eslint/no-var-requires
      require('cypress-fail-fast/plugin')(on, config);
      return config;
    },
    baseUrl: 'http://localhost:3000',
    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}'
  }
});

Cypress Version

10.3.1

Package Manager

yarn

Operating system

Mac

Other

No response

[aichichang]

Hey @AtofStryker, thank you for the advice! The problem is indeed from the Next.js tsconfig.json file. Adding cypress.config.ts in tsconfig.json - excludes and .eslintignore fixed the issue. Happy to close the issue, thanks again 😃

[AtofStryker]

@aichichang this is starting to make more sense. It almost looks like the tsconfig for your next.js project is type checking the cypress.config.ts. What does your tsconfig.json look like? Have you included the cypress types?

To possibly speed up cause identification, are you able to include a reproduction repo?