Modify webpack in synpress

[Roger-RumbleFish]

In my tests i want to import code from other package that is using Node js, because of that i need to add fallbacks to webpack config. I'm using cypress webpack preprocessor

const path = require('path')

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    alias: {
      '@assets': path.resolve(__dirname, 'public/'),
      '@components': path.resolve(__dirname, 'src/components/'),
      '@containers': path.resolve(__dirname, 'src/containers/'),
      '@config': path.resolve(__dirname, 'config.json'),
      '@constants': path.resolve(__dirname, 'src/constants/'),
      '@graph': path.resolve(__dirname, 'src/graph/'),
      '@interfaces': path.resolve(__dirname, 'src/interfaces/'),
      '@store': path.resolve(__dirname, 'src/store/'),
      '@styles': path.resolve(__dirname, 'src/styles/'),
      '@tests': path.resolve(__dirname, 'testUtils/'),
      '@utils': path.resolve(__dirname, 'src/utils/'),
    },
    extensions: ['.tsx', '.ts', '.js', 'jsx'],
    fallback: {
      fs: false,
      crypto: false,
      path: require.resolve('path-browserify'),
      assert: require.resolve('assert'),
      os: require.resolve('os-browserify/browser'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      process: require.resolve('process/browser'),
      stream: require.resolve('stream-browserify'),
      url: require.resolve('url/'),
      events: require.resolve('events/'),
      assert: require.resolve('assert/'),
    },
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

inside cypress/plugins/index.js

import webpackPreprocessor from '@cypress/webpack-preprocessor'
import synpressPlugins from '@synthetixio/synpress/plugins'

module.exports = (on, config) => {
  const options = {
    webpackOptions: require('../../webpack.test'),
    watchOptions: {},
  }

  on('file:preprocessor', webpackPreprocessor(options))
  const newConfig = synpressPlugins(on, config)

  return on, newConfig
}

i run this command

    "test:e2e": "SKIP_METAMASK_SETUP=true synpress run --configFile tests/e2e/config.json --config pluginsFile='cypress/plugins/index.js'"

when i try to run my test i got a webpack loader problem inside synpress support that i m not changing. When i try to change it to my own support file importing synpress support there was the same problem the difference is it then showing to my local file not in synpress

[mitchcivic]

@Roger-RumbleFish did you ever get this to work? I have the exact same issue

[kasparkallas]

Just ran into this as well

[sk-enya]

I am also running this issue, is there any solution to fix this issue spent almost 4days.

[defiled]

I've also spent quite some time on this issue to no avail. If I import a dependency like import { Secp256k1Keypair } from "@mysten/sui.js/keypairs/secp256k1"; it fails making testing core functionality very challenging.

This is an issue with Cypress that seems to happen to people using Next.