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?

user_16697978 0
Viewed 18078

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.

npm webpack sass css html
1 Answers

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/

user_164892100
Related