Ability to extend cypress webpack.config

I was trying to migrate my project to monorepo to the fresh generated angular nx workspace, with libs and few apps. Currently we use cypress 3 with custom webpack configuration which looks more or less like this

const path = require("path");
module.exports = {
    resolve: {
        alias: {
            "@xyz/ng-shared": path.join(__dirname, "../node_modules/@xyz/ng-shared"),
            "moment": path.join(__dirname, "../node_modules/moment"),
        },
        extensions: ['.ts', '.js'],
        modules: ['node_modules'],
        symlinks: true
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true
                        }
                    }
                ]
            }
        ]
    }
};

We have ng-shared npm package, that hase some cypress components written in typescript and publish to private npm registry as is (without transpilation, raw .ts files are included in bundled package)

The webpack config from above adds ability to transpile and properly load those files when importing it in the test suite.

When using default nx cypress configuration I’m getting error like this as soon as I try to import some .ts file from node_modules.

Module parse failed: Unexpected token (7:33)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| 
> export class DatePickerComponent implements CypressComponent {

I see that nx configuration looks like this:

const {preprocessTypescript} = require('@nrwl/cypress/plugins/preprocessor');

module.exports = (on, config) => {
    // `on` is used to hook into various events Cypress emits
    // `config` is the resolved Cypress config

    // Preprocess Typescript file using Nx helper
    on('file:preprocessor', preprocessTypescript(config));
};

is it possible to somehow say that I want to include particular folder from node_modules to process it via typescript loader? I saw the source code of this plugin and it is using webpack config under the hood but I don’t know how would I extend it.

I was looking for some help on the slack, but didn’t get correct answers so I’m trying here.

[FrozenPandaz]

The second parameter of preprocessTypescript is a function that updates the webpack configuration.

customizeWebpackConfig?: (webpackConfig: any) => any

Nx calls the function that you provide with the webpackConfig that we would use by default and you can add to it or replace it entirely and return the configuration that you want. 🎉

It would be nice to get some docs for this 😄

[barbados-clemens]

@naticaceres Cypress comes with a webpack preprocessor plugin already. you just use plugins file (or setupNodeEvents for cypress 10+)

more info here: https://docs.cypress.io/api/plugins/preprocessors-api