Next 9.3 and Swiper or React-Id-Swiper

[bkyam]

Has anyone successfully implemented one of the two different versions of Swiperjs in Next 9.3?

I'm a bit new to nextjs(and webpack in general), and am not able to get the next.config.js set up correctly to add the necessary babel-loader for swiper.

I see that nextjs provides a way to extend and customize webpack here:
https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

And swiper requires this change in your webpack.config.js like this:

module: {
  rules: [
    {
      exclude: [/node_modules\/(?!(swiper|dom7)\/).*/, /\.test\.js(x)?$/],
      test: /\.js(x)?$/,
      use: [{ loader: 'babel-loader' }],
    }
  ],
}

All my attempts seem to break the application. I get the error,
[ event ] build page: /next/dist/pages/_error

Hopefully, someone in the community has accomplished this and can point me in the right direction in terms of modifying next.config.js appropriately.

[bkyam]

For anyone else looking for this answer, I've put this in my next.config.js and it seems to work:

{
	webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
		// Note: we provide webpack above so you should not `require` it
		// Perform customizations to webpack config
		// Important: return the modified config
		config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
		return config
	},
	webpack: (config, options) => {
		config.module.rules.push({
			exclude: [/node_modules\/(?!(swiper|dom7)\/).*/, /\.test\.js(x)?$/],
			test: /\.js(x)?$/,
			use: [{ loader: 'babel-loader' }],
		})
	
		return config
	  },
	webpackDevMiddleware: config => {
		// Perform customizations to webpack dev middleware config
		// Important: return the modified config
		return config
	}
}

If there's a better way to do this, I'd love to hear about it.