Why am I receiving the error 'Field browser doesn't contain a valid alias configuration' when starting via the terminal using Webpack to compile SCSS?

Question

It's my first time using webpack to compile my scss. I'm trying to start it but I get an error. It says:

Field 'browser' doesn't contain a valid alias configuration

And also:

Module not Found: Error: Can't resolve './src'

Furthermore, in red, it'll log my file directory with /index doesn't exist (.js / .json / .wasm). This is my current webpack.config.js file:

module.exports = [{
entry: 'mat-design.scss',
output: {
  filename: 'style-bundle.js',
},
module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: 'styles.scss',
          },
        },
        { loader: 'extract-loader' },
        { loader: 'css-loader' },
        {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
            mode: development,
            webpackImporter: false,
          },
        },
      ]
    }
  ]
},

}];

Any help would be much appreciated.

Haystack

did you fix this problems? how to fix it? I am facing a similiar problem: #70903395 @Haystack – Alcoholometer

@Alcoholometer Unfortunately I wasn't able to with this webpack. I just used Grunt instead to compile the SCSS and it worked fine. – Haystack

Answer 1

Looks like you are missing the resolve module to inform webpack what file type to look for when you have a file name without an extension

Add the following block to your configuration

module.exports = [{
    entry: 'mat-design.scss',
    (...)
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.css', '.scss'],
        modules: ['src', 'node_modules'] // Assuming that your files are inside the src dir
    }
}]

Ref - https://webpack.js.org/configuration/resolve/

Astronavigation

I tried but seems did not work in my situation. @Danny Matthew – Alcoholometer

Danny Matthew, what if my files are inside a folder not named 'src'? What option should I add? – Backed

Answer 2

include these into your webpack.config.js.

...
resolve:{
        extensions:['.scss','.sass','.less','.css']
    }

why we need resolve ? when we use import xxx from 'fileWithoutExtension', webpack need to know how to locate the file. so the resolve field will tell wepack to try to append these extensions to locate the file.

Trilobate

This doesn't provide more information that the current accepted answer. – Middlebrow