Importing library that has css imports but has not been processed by a module bundler breaks build

[linasmnew]

Hey, running into an issue where importing css files within my nextApp works perfectly fine, however, installing a 3rd party package that is only transpiled (modules not compiled / bundled) breaks the build because one of the files has a css import, anyone have tips for solving this?

This also isn't really limited to CSS, the same would be the case with images, or any non JS modules it seems like for that matter.

The error is (FYI, this only happens in nextJS app, works fine with regular react):

Module not found: Can't resolve './style.css' in '<name_of_third_party_package>/lib/js/components'

To stick to this specific example, though, as a test I tried creating below file, but it still doesn't do it:

next.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const cssLoaders = ['css-loader']
const sassLoaders = ['css-loader', 'sass-loader']

module.exports = {
  webpack: config => {
    config.module.rules.push(
      {
          test: /\.css$/,
          loader: [
              MiniCssExtractPlugin.loader,
              ...cssLoaders
          ]
      },
      {
          test: /\.scss$/,
          loader: [
              MiniCssExtractPlugin.loader,
              ...sassLoaders
          ]
      }
    )
    config.plugins.push(
      new MiniCssExtractPlugin(),
    )
    return config
  }
}