Why does it give an error when importing a scss file?

Question

webpack

For some reason it gives an error when importing the index.scss file into index.js

index.js :
import './scss/index.scss'

webpack.config.js :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    context: path.resolve(__dirname, 'src'),
  entry: './index.js',
  output: {
    filename: 'build.[hash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
      new HtmlWebpackPlugin({
        template: 'index.html'
      }),
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
          filename: 'bundle.[hash].css'
      })
  ],
  module: {
    rules: [
        {
            test: /\.s[ac]ss$/i,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              'sass-loader'
            ],
          },
      ],
  }
};

dependency package {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"html-webpack-plugin": "^4.4.1",
"mini-css -extract-plugin": "^0.11.1",
"node-sass": "^4.14.1",
"sass": "^1.26.10",
"sass-loader": "^10.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}

Child HtmlWebpackCompiler:
1 asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[0] ../node_modules/html-webpack-plugin/lib /loader.js!./index.html 450 bytes {0} [built]
Child mini-css-extract-plugin ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!scss/index .scss:
Entrypoint mini-css-extract-plugin = *
[0] ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./scss/index.scss 3.24 KiB {0} [not cacheable] [built] [failed] [1 error]

ERROR in ./scss/index.scss (../node_modules/css-loader/dist/cjs.js!../node_modules/sass -loader/dist/cjs.js!./scss/index.scss)
Module build failed (from ../node_modules/sass-loader/dist/cjs.js):
Error: Package exports for '/Users/artem/Documents /demo02/node_modules/klona' do not define a valid './full' target
at resolveExportsTarget (internal/modules/cjs/loader.js:618:9)
at applyExports (internal/modules/cjs/loader.js:499: 14)
at resolveExports (internal/modules/cjs/loader.js:548:12)
at Function.Module._findPath (internal/modules/cjs/loader.js:654:22)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
at Function.Module._load (internal /modules/cjs/loader.js:859:27)
at Module.require (internal/modules/cjs/loader.js:1028:19)
at require (/Users/artem/Documents/demo02/node_modules/v8-compile- cache/v8-compile-cache.js:161:20)
at Object. (/Users/artem/Documents/demo02/node_modules/sass-loader/dist/utils.js:19:13)
at Module._compile (/Users/artem/Documents/demo02/node_modules/v8-compile-cache/v8- compile-cache.js:194:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1159:10)
at Module.load (internal/modules/cjs/loader.js:988:32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Module.require (internal/modules/cjs /loader.js:1028:19)
at require (/Users/artem/Documents/demo02/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at Object. (/Users/artem/Documents/demo02/node_modules/sass-loader/dist/index.js:16:14)
at Module._compile (/Users/artem/Documents/demo02/node_modules/v8-compile-cache/v8- compile-cache.js:194:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1159:10)
at Module.load (internal/modules/cjs/loader.js:988 :32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Module.require (internal/modules/cjs/loader.js:1028:19)
at require (/Users/artem/Documents/demo02/node_modules/v8-compile-cache/v8-compile-cache.js:161:20 )
at Object. (/Users/artem/Documents/demo02/node_modules/sass-loader/dist/cjs.js:3:16)
at Module._compile (/Users/artem/Documents/demo02/node_modules/v8-compile-cache/v8- compile-cache.js:194:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1159:10)
at Module.load (internal/modules/cjs/loader.js:988 :32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Module.require (internal/modules/cjs/loader.js:1028:19)
at require (/Users/artem/Documents/demo02/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at loadLoader (/Users/artem/Documents/demo02/node_modules/loader-runner/ lib/loadLoader.js:18:17)
at iteratePitchingLoaders (/Users/artem/Documents/demo02/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/Users/artem/Documents/demo02/ node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /Users/artem/Documents/demo02/node_modules/loader-runner/lib/LoaderRunner.js:176:18
at loadLoader (/Users/artem/Documents /demo02/node_modules/loader-runner/lib/loadLoader.js:47:3)
at iteratePitchingLoaders (/Users/artem/Documents/demo02/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at runLoaders (/Users/artem/Documents/demo02/node_modules/loader-runner/lib/LoaderRunner. js:365:2)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/artem/.npm/_logs/2020-09-12T09_41_24_171Z-debug.log

What could be the problem?

Answer 1

https://github.com/webpack-contrib/sass-loader/iss...
Doesn't work with v13 node, v12 or v14 is fine