How can I use with create-next-app?

[oleksii-b]

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?

[permanar]

Hi,

Have you solve this? Thanks.