5

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.

Ben
  • 53
  • 1
  • 1
  • 3
  • 1
    did you fix this problems? how to fix it? I am facing a similiar problem: https://stackoverflow.com/questions/70902895/field-browser-doesnt-contain-a-valid-alias-configuration-when-i-changed-the-i @Ben – Dolphin Jan 30 '22 at 14:50
  • @Dolphin Unfortunately I wasn't able to with this webpack. I just used Grunt instead to compile the SCSS and it worked fine. – Ben Feb 16 '22 at 11:09

1 Answers1

9

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/

Danny Matthew
  • 114
  • 3