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?
12,662
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/
Author by
Ben
Updated on July 06, 2022Comments
-
Ben almost 2 years
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 currentwebpack.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.
-
Dolphin over 2 yearsdid you fix this problems? how to fix it? I am facing a similiar problem: stackoverflow.com/questions/70902895/… @Ben
-
Ben about 2 years@Dolphin Unfortunately I wasn't able to with this webpack. I just used Grunt instead to compile the SCSS and it worked fine.
-
-
Dolphin over 2 yearsI tried but seems did not work in my situation. @Danny Matthew
-
user36339 almost 2 yearsDanny Matthew, what if my files are inside a folder not named 'src'? What option should I add?