Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Craco Webpack config not working with Component Testing

See original GitHub issue

Current behavior

I’m using Craco to override CRA Webpack config and while Craco provides API to extract the overridden Webpack config, Cypress throws with the following:

Error: Cannot find module '/Users/x/dev/deepdubapp8/cypress/package.json'
Require stack:
- /Users/x/dev/deepdubapp8/node_modules/react-scripts/config/paths.js
- /Users/x/dev/deepdubapp8/node_modules/react-scripts/config/env.js
- /Users/x/dev/deepdubapp8/node_modules/@craco/craco/lib/cra.js
- /Users/x/dev/deepdubapp8/node_modules/@craco/craco/lib/features/jest/api.js
- /Users/x/dev/deepdubapp8/node_modules/@craco/craco/index.js
- /Users/x/dev/deepdubapp8/craco.config.ts
- /Users/x/dev/deepdubapp8/cypress/cypress.config.ts
- /Users/x/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js
- /Users/x/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/require_async_child.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._resolveFilename (/Users/x/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/tsconfig-paths/lib/register.js:75:40)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/Users/x/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/@cspotcode/source-map-support/source-map-support.js:679:30)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object. (/Users/x/dev/deepdubapp8/node_modules/react-scripts/config/paths.js:28:3)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Object.require.extensions. [as .js] (/Users/x/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/src/index.ts:1445:43)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object. (/Users/x/dev/deepdubapp8/node_modules/react-scripts/config/env.js:13:15)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Object.require.extensions. [as .js] (/Users/x/Library/Caches/Cypress/10.3.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/src/index.ts:1445:43)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)

Desired behavior

Boot Component Testing successfully.

Test code to reproduce

Extract Craco config and pass it to Cypress config:

// craco.config.ts
export const webpackConfig = createWebpackDevConfig(cracoConfig);

// cypress.config.ts
export default defineConfig({
  component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
      webpackConfig: webpackConfig,
    },
  },
});

Cypress Version

^10.3.0

Other

No response

Issue Analytics

State:
Created a year ago
Comments:11 (3 by maintainers)

Top GitHub Comments

1reaction

alecmerdlercommented, Aug 10, 2022

@vfritzon Awesome! your cypress.config.ts works for me. Thank you for sharing your solution.

1reaction

vfritzoncommented, Aug 10, 2022

@xanderfehsenfelddelhivery

I’ve got it to work with this workaround

cypress.config.ts:

import { createWebpackDevConfig } from '@craco/craco'
import { devServer } from '@cypress/webpack-dev-server'
import { defineConfig } from 'cypress'

import cracoConfig from './craco.config.js'

const webpackConfig = createWebpackDevConfig(cracoConfig)

export default defineConfig({
  component: {
    devServer(cypressConfig) {
      return devServer(cypressConfig, { webpackConfig })
    },
    specPattern: 'src/**/*.spec.tsx',
  },
})

Some relevant dependencies and their versions:

"@craco/craco": "6.4.5",
"@types/craco__craco": "^6.4.0",
"@cypress/webpack-dev-server": "1.8.4",

Top Results From Across the Web

Create craco devServer preset #21952 - cypress-io ... - GitHub

The devServer for craco is located in @cypress/react/plugins. ... webpack config so as to allow the frameworks webpack config to work with CT...

Craco does not work properly with react-scripts@5.0.0

After upgrading react-scripts to v5, craco start does not work properly. App starts with no error but in browser, there is a blank...

@craco/craco - npm

CRACO allows you to enjoy the recognizable project structure of CRA while changing detailed configuration settings of each component. Notes on ...

Use in create-react-app - Ant Design

We are successfully running antd components now, go build your own application! Test with Jest. create-react-app comes with jest built in. Jest does...

Unit testing React components in Cypress without CRA and ...

I had to go through some hassle to get that working with a custom webpack configuration, but it's finally working, and here is...