Modifying default webpack options ?

[warpdesign]

It seems that cypress already supports TypeScript/webpack out of the box without any plugin but I didn't find a way to modify the default webpack options (I just want to add a new alias, I don't want to touch anything else).

There is a link to this page in the documentation but it seems to be outdated:

• it requires to install @cypress/webpack-preprocessor
• the webpackPreprocessor.defaultOptions configuration doesn't seem to match today's default Cypress webpack configuration as simply calling on('file:preprocessor', webpackPreprocessor(wepackPreprocessor.defaultOptions)) without modifying it won't work and will break ts/tsx support (this default config doesn't have any tsx+ts rules/extensions defined).

What is the preferred way to add aliases to the default Cypress webpack configuration?

[m3tarayz]

+1 I have a similar issue to @warpdesign - trying to use @cypress/webpack-preprocessor in a React 18 App made with CRA.

The exact error I'm getting is WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

Has anyone come accross this issue?

[forgo]

Not sure if this helps anyone but maybe more insight into this issue. I was using the Webpack ConfigurationFactory function as opposed to Configuration object.

It's a function which takes in the params (env, args). When console logging those as Webpack generates them from its CLI, I was able to manually generate the object Configuration type that the preprocessor liked in it's options -- as opposed to the factory function.

That being said, I ran into a whole new set of errors, but I do believe it gets past this issue (albeit in a little bit of a hacky way).

Now, when I run Cypress with debug mode DEBUG='cypress:*' cypress open and running a test, I can find in my terminal cypress:webpack typescript modified createProgram options and I see some of the alias paths nested in in my Webpack config

        // send in the options from your webpack.config.js, so it works the same
        // as your app's code
        webpackOptions: await webpackConfig(
          { WEBPACK_SERVE: true, dotenv: "local" }, // 1st env param from Webpack CLI
          {
            env: { WEBPACK_SERVE: true, dotenv: "local" },
            open: true,
            hot: true,
          } // 2nd args param from Webpack CLI
        ),
        watchOptions: {},
      };

      on("file:preprocessor", webpackPreprocessor(options));

I think ultimately the pre-processor should know how to handle the ConfigurationFactory