How can I use with create-next-app?

I'm trying to use the following configuration in an application created with create-next-app:

.babelrc

{
"presets": [
"next/babel"
],
"plugins": [
[
  "babel-plugin-react-scoped-css",
  {
    "include": ".scoped.(css|scss)$"
  }
]
]
}

next.config.js

module.exports = {
reactStrictMode: true,
webpack(config) {
config.module.rules.push({
  test: /\.(sc|c|sa)ss$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        importLoaders: 2,
      },
    },
    {
      loader: 'scoped-css-loader'
    },
    {
      loader: 'sass-loader',
    },
  ],
})

return config
},
}

But when I import the .scss or .css file and run my app, I have the error in my terminal:

> error - node_modules\style-loader\dist\runtime\insertStyleElement.js (5:0) @ Object.insertStyleElement
> ReferenceError: document is not defined
> null

What am I doing wrong?

gaoxiaoliangz / react-scoped-css

How can I use with create-next-app? #56