TypeError: Cannot read properties of undefined (reading 'tap')

Question

Im was trying to install react-multi-carousel library when this error happened:

./node_modules/react-multi-carousel/lib/styles.css
TypeError: Cannot read properties of undefined (reading 'tap')

I think this is happening because the project uses nextjs (which know just the extreme basics). This is my next.config file:

const webpack = require('webpack')
const withPlugins = require('next-compose-plugins')
const optimizedImages = require('next-optimized-images')
const withCSS = require('@zeit/next-css')
const path = require('path')

const withReactStorefront = require('react-storefront/plugins/withReactStorefront')
require('dotenv').config()

module.exports = withReactStorefront({
  target: 'serverless',
  connector: 'connector',
  webpack: config => {
    config.plugins.push(
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
      })
    )
    return config
  },
})
const nextConfig = {
  webpack: (config, { dev }) => {

    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })
    
    config.plugins.push(new webpack.EnvironmentPlugin(process.env))
    config.resolve.alias['components'] = path.join(__dirname, 'components')
    config.resolve.alias['static'] = path.join(__dirname, 'static')

    return config
  },
}

module.exports = withPlugins(
  [
    [
      optimizedImages,
      {
        handleImages: ['jpeg', 'png'],
      },
    ],
    withCSS,
  ],
  nextConfig
)

Also, I'm trying to import these styles in a next page component called restaurants.js. I tried importing inside _app.js and it didn't work either.