TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received type undefined when using .scss files

Do you want to request a feature or report a bug? A bug

What is the current behaviour? When using preact watch in a project with some .scss files, preact-cli isn’t able to launch the dev server and instead gives an error for every .scss file in the project. This is the error:

./components/ui/TextFormatted/style.module.scss (../node_modules/preact-cli/lib/lib/webpack/proxy-loader.js??ref--6-0!./components/ui/TextFormatted/style.module.scss) Module build failed (from ../node_modules/preact-cli/lib/lib/webpack/proxy-loader.js): TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received type undefined at validateString (internal/validators.js:125:11) at Module.require (internal/modules/cjs/loader.js:685:3) at require (internal/modules/cjs/helpers.js:25:18) at Object.proxyLoader (./node_modules/preact-cli/lib/lib/webpack/proxy-loader.js:22:12) @ ./components/ui/TextFormatted/style.module.scss 2:26-256 43:4-64:5 46:18-248 @ ./components/ui/TextFormatted/index.js @ ./components/journal/EntryListItem/index.js @ ./components/journal/JournalEntries/index.js @ ./components/journal/Index/index.js @ ./components/Home/index.js @ ./Router.js @ ./App.js @ ./index.js @ ../node_modules/preact-cli/lib/lib/entry.js @ multi ../node_modules/@prefresh/core/src/index.js ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server

I can’t understand if it’s a bug of preact-cli, webpack, node-sass or sass-loader.

If the current behaviour is a bug, please provide the steps to reproduce.

I tried to create a new preact-cli project and tried to recreate it, but it seems totally random. Right now I have a commit where everything is working fine and master where running yarn dev causes the bug. I already tried to revert to the previous working commit and add line-by-line all the git diffs but every time it displays the error when I change a different file, almost randomly

What is the expected behaviour?

preact watch should run successfully, without errors about [ERR_INVALID_ARG_TYPE]

Please mention other relevant information.

Environment Info: System: OS: macOS 10.15.2 CPU: (4) x64 Intel® Core™ i7-7660U CPU @ 2.50GHz Binaries: Node: 10.16.0 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.9.0 - /usr/local/bin/npm Browsers: Chrome: 83.0.4103.61 Edge: 79.0.309.65 Firefox: 74.0 Safari: 13.0.4 npmPackages: preact: ^10.0.5 => 10.0.5 preact-cli: ^3.0.0-rc.6 => 3.0.0-rc.10 preact-render-to-string: ^5.1.4 => 5.1.8 preact-router: ^3.2.1 => 3.2.1 npmGlobalPackages: preact-cli: 3.0.0-rc.10

[urcoilbisurco]

Just found out how to avoid it: if you try to import an empty .scss file, preact watch breaks with error [ERR_INVALID_ARG_TYPE]

Everything works perfectly again if you add a class to that file, e.g:

.dummyClass { }

I still don’t know if this is caused by node-sass, sass-loader or preact-cli. I wasn’t able to find similar issues in any repo.

[cyclops26]

Putting this here in case anyone else stumbles in from Google.

I had the same issue, only the “dummy” fix didn’t work. In fact one of the scss files being complained about only had 2 classes in it, both of which had child attributes.

Interestingly, will all the same packages and versions installed it worked under node v10.16.1 but not if I switched node versions with nvm to v12.18.4 or v14.12.0.

I started with this sass-loader: “sass-loader”: “^8.0.2”,

After I upgraded to: “sass-loader”: “^10.0.2”,

the issue was resolved on the newer node versions.

I’m not sure if you were using sass-loader specifically, but I would suspect that it likely isn’t a preact-cli issue but rather a compatibility issue between certain sass-loader (or other sass loading package) versions and certain node versions.

Other package versions for context:

"devDependencies": {
    "@hapi/hoek": "^9.1.0",
    "compression-webpack-plugin": "^3.1.0",
    "eslint": "^6.8.0",
    "eslint-config-synacor": "^3.0.5",
    "identity-obj-proxy": "^3.0.0",
    "if-env": "^1.0.4",
    "jest": "^25.5.4",
    "ncp": "^2.0.0",
    "node-sass": "^4.14.1",
    "preact-cli": "^3.0.2",
    "preact-cli-plugin-env-vars": "^1.2.1",
    "preact-cli-plugin-fast-async": "^1.0.1",
    "sass-loader": "^10.0.2",
    "webpack-bundle-analyzer": "^3.9.0"
  },
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/pickers": "^3.2.10",
    "@material-ui/styles": "^4.10.0",
    "apexcharts": "^3.21.0",
    "date-fns": "^2.9.0",
    "debug": "^4.1.1",
    "globalize": "^1.4.2",
    "history": "^4.10.1",
    "js-worker-search": "^1.4.1",
    "lodash": "^4.17.15",
    "mobx": "^5.15.4",
    "mobx-logger": "^0.7.1",
    "mobx-react": "^6.1.7",
    "mobx-task": "^2.0.0",
    "mobx-utils": "^5.5.3",
    "moment": "^2.24.0",
    "preact": "^10.3.1",
    "preact-material-components": "^1.6.1",
    "preact-router": "^3.2.1",
    "react-apexcharts": "^1.3.6",
    "react-big-calendar": "^0.23.0",
    "react-color": "^2.18.0",
    "reactstrap": "^8.4.1"
  },