Search code examples
javascriptnode.jswebpacksass

navigator.userAgent is undefined in sass.dart.js so I can't build a project using webpack

I can't get why I am not enable to build a project using webpack and sass.

When I run: webpack --mode production I get the following output:

> build
> webpack --mode production

assets by status 9.91 KiB [cached] 4 assets
runtime modules 663 bytes 3 modules
orphan modules 39 bytes [orphan] 1 module
cacheable modules 3.29 KiB
  ./assets/js/main.js 24 bytes [built] [code generated]
  ./assets/js/cookies.js 1010 bytes [built] [code generated]
  ./assets/js/tag_manager.js 415 bytes [built] [code generated]
  ./assets/css/style.scss 39 bytes [built] [code generated] [1 error]
  ./assets/js/hamburger.js 1.84 KiB [built] [code generated]

ERROR in ./assets/css/style.scss (./assets/css/style.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/css/style.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'indexOf')
    at [PROJECT_PATH]\node_modules\sass\sass.dart.js:116832:12
    at Object.applyHooksTransformer ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1863:14)
    at Object.initHooks ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1843:251)
    at Object.initNativeDispatchContinue ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1809:9)
    at Object.initNativeDispatch ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1803:9)
    at Object.getNativeInterceptor ([PROJECT_PATH]\node_modules\sass\sass.dart.js:29308:13)
    at Object.getInterceptor$x ([PROJECT_PATH]\node_modules\sass\sass.dart.js:29569:16)
    at Object.set$compile$x ([PROJECT_PATH]\node_modules\sass\sass.dart.js:29636:16)
    at Object.main ([PROJECT_PATH]\node_modules\sass\sass.dart.js:24401:9)
    at main2 ([PROJECT_PATH]\node_modules\sass\sass.dart.js:26210:9)
 @ ./assets/css/style.scss

ERROR in ./assets/css/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'indexOf')
    at [PROJECT_PATH]\node_modules\sass\sass.dart.js:116832:12
    at Object.applyHooksTransformer ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1863:14)
    at Object.initHooks ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1843:251)
    at Object.initNativeDispatchContinue ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1809:9)
    at Object.initNativeDispatch ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1803:9)
    at Object.getNativeInterceptor ([PROJECT_PATH]\node_modules\sass\sass.dart.js:29308:13)
    at Object.getInterceptor$x ([PROJECT_PATH]\node_modules\sass\sass.dart.js:29569:16)
    at Object.set$compile$x ([PROJECT_PATH]\node_modules\sass\sass.dart.js:29636:16)
    at Object.main ([PROJECT_PATH]\node_modules\sass\sass.dart.js:24401:9)
    at main2 ([PROJECT_PATH]\node_modules\sass\sass.dart.js:26210:9)
    at tryRunOrWebpackError ([PROJECT_PATH]\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ ([PROJECT_PATH]\node_modules\webpack\lib\Compilation.js:5067:12)
    at __webpack_require__ ([PROJECT_PATH]\node_modules\webpack\lib\Compilation.js:5024:18)
    at [PROJECT_PATH]\node_modules\webpack\lib\Compilation.js:5095:20
    at symbolIterator ([PROJECT_PATH]\node_modules\neo-async\async.js:3485:9)
    at done ([PROJECT_PATH]\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create ([PROJECT_PATH]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] ([PROJECT_PATH]\node_modules\tapable\lib\Hook.js:18:14)
    at [PROJECT_PATH]\node_modules\webpack\lib\Compilation.js:5002:43
    at symbolIterator ([PROJECT_PATH]\node_modules\neo-async\async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'indexOf')
    at [PROJECT_PATH]\node_modules\sass\sass.dart.js:116832:12
    at Object.applyHooksTransformer ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1863:14)
    at Object.initHooks ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1843:251)
    at Object.initNativeDispatchContinue ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1809:9)
    at Object.initNativeDispatch ([PROJECT_PATH]\node_modules\sass\sass.dart.js:1803:9)
    at Object.getNativeInterceptor ([PROJECT_PATH]\node_modules\sass\sass.dart.js:29308:13)
    at Object.getInterceptor$x ([PROJECT_PATH]\node_modules\sass\sass.dart.js:29569:16)
    at Object.set$compile$x ([PROJECT_PATH]\node_modules\sass\sass.dart.js:29636:16)
    at Object.main ([PROJECT_PATH]\node_modules\sass\sass.dart.js:24401:9)
    at main2 ([PROJECT_PATH]\node_modules\sass\sass.dart.js:26210:9)
    at Object.<anonymous> ([PROJECT_PATH]\node_modules\css-loader\dist\cjs.js![PROJECT_PATH]\node_modules\sass-loader\dist\cjs.js![PROJECT_PATH]\assets\css\style.scss:1:7)
    at [PROJECT_PATH]\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:452:10
    at Hook.eval [as call] (eval at create ([PROJECT_PATH]\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] ([PROJECT_PATH]\node_modules\tapable\lib\Hook.js:14:14)
    at [PROJECT_PATH]\node_modules\webpack\lib\Compilation.js:5069:39
    at tryRunOrWebpackError ([PROJECT_PATH]\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ ([PROJECT_PATH]\node_modules\webpack\lib\Compilation.js:5067:12)
    at __webpack_require__ ([PROJECT_PATH]\node_modules\webpack\lib\Compilation.js:5024:18)
    at [PROJECT_PATH]\node_modules\webpack\lib\Compilation.js:5095:20
    at symbolIterator ([PROJECT_PATH]\node_modules\neo-async\async.js:3485:9)

Generated code for [PROJECT_PATH]\node_modules\css-loader\dist\cjs.js![PROJECT_PATH]\node_modules\sass-loader\dist\cjs.js![PROJECT_PATH]\assets\css\style.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nTypeError: Cannot read properties of undefined (reading 'indexOf')\n    at [PROJECT_PATH]\node_modules\\sass\\sass.dart.js:116832:12\n    at Object.applyHooksTransformer ([PROJECT_PATH]\node_modules\\sass\\sass.dart.js:1863:14)\n    at Object.initHooks ([PROJECT_PATH]\node_modules\\sass\\sass.dart.js:1843:251)\n    at Object.initNativeDispatchContinue ([PROJECT_PATH]\node_modules\\sass\\sass.dart.js:1809:9)\n    at Object.initNativeDispatch ([PROJECT_PATH]\node_modules\\sass\\sass.dart.js:1803:9)\n    at Object.getNativeInterceptor ([PROJECT_PATH]\node_modules\\sass\\sass.dart.js:29308:13)\n    at Object.getInterceptor$x ([PROJECT_PATH]\node_modules\\sass\\sass.dart.js:29569:16)\n    at Object.set$compile$x ([PROJECT_PATH]\node_modules\\sass\\sass.dart.js:29636:16)\n    at Object.main ([PROJECT_PATH]\node_modules\\sass\\sass.dart.js:24401:9)\n    at main2 ([PROJECT_PATH]\node_modules\\sass\\sass.dart.js:26210:9)");

webpack 5.89.0 compiled with 2 errors in 514 ms

I have tried to reinstall all deps, removed node_modules and run npm i, updated everything but nothing helps.

My webpack.config.js:

const path = require( 'path' );
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// change these variables to fit your project
const jsPath= './assets/js';
const cssPath = './assets/css';
const outputPath = 'dist';
const entryPoints = {
    'main': jsPath + '/main.js',
    'cookies': { import: jsPath + '/cookies.js', filename: 'cookies.js' },
    'tag_manager': { import: jsPath + '/tag_manager.js', filename: 'tag_manager.js' },
    'style': cssPath + '/style.scss'
};

module.exports = {
    entry: entryPoints,
    output: {
        publicPath: '',
        path: path.resolve( __dirname, outputPath ),
        filename: '[name].js',
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css' // Output extracted CSS to a file
        })
    ],
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader, // Extract CSS into separate files
                    'css-loader',   // interprets `@import` and `url()` like `import/require()` and will resolve them
                    'sass-loader'
                ],
            },
            {
                test: /\.(jpg|jpeg|webp|png|gif|woff|woff2|eot|ttf|svg)$/i,
                use: 'url-loader?limit=1024',
            },
        ]
    },
};

And my package.json:

{
  "name": "name-of-the-project",
  "private": true,
  "devDependencies": {
    "@wordpress/eslint-plugin": "^17.1.0",
    "css-loader": "^6.8.1",
    "file-loader": "^6.1.0",
    "mini-css-extract-plugin": "^2.7.6",
    "sass": "^1.69.4",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "url-loader": "^4.1.0",
    "webpack": "^5.80.0",
    "webpack-cli": "^4.0.0"
  },
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "lint": "eslint **/*.js"
  },
  "dependencies": {
    "webp-hero": "^0.0.2"
  }
}

EDIT: The problem is in this piece of code from sass.dart.js, navigator.userAgent is undefined:

var ua = navigator.userAgent;
if (ua.indexOf("DumpRenderTree") >= 0) return hooks;
Solution

  • Ok so I managed to make it work. Solution is pretty easy: Downgrade node.js from 21.0.0 beta to LTS 18.18.2 and sass dart is working perfectly.

    If you have nvm installed you can use:

    nvm install 18.18.2

    then

    nvm use 18.18.2

    and npx webpack --build works fine.