Webpack config not found

[pmweeks98]

Setting up component testing and stuck at this screen

Config is not located in that folder so have updated the cypress.config.ts to look like this

import { defineConfig } from "cypress";
import webpackConfig from './buildConfig/webpack.config.js'

export default defineConfig({
  component: {
    devServer: {
      framework: "react",
      bundler: "webpack",
      webpackConfig
    },
  },
});

Am I loading in the config incorrectly?

[1Copenut]

@pmweeks98 Are you getting Webpack errors with this webpackConfig in a directory other than the project root? I've been getting "Error: Child compilation failed" from the Webpack HTML Plugin since I tried to migrate to version 10. I've tried adding a couple of configuration items to the component object but it still tries to resolve Cypress to the webpack config directory, not the project root.

component: {
  ...
  indexHtmlFile: "cypress/support/component-index.html",
  supportFolder: "cypress/support",
}

Even with those added, the error says it can't find the Cypress component-index.html file.

[ZachJW34]

@pmweeks98 your configuration looks good for passing in a custom webpack config, are you still seeing this error? If you are, could you create an issue with a reproduction so we can drill into what's going on?

[Leonardoxrrp]

Hey @pmweeks98 I'm a bit late, but what you did worked for me.
The only thing that I'm doing different is to use require instead of import. Also module.exports
Below my code:

const { defineConfig } = require('cypress');
const webpackConfig = require('./config/webpack.config');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:8080',
  },

  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      webpackConfig,
    },
  },
});