'Aliasing an npm package, without an alias

We recently had to switch from node-sass to sass, because a member of our team using an M1 was suddenly unable to load our React app.

So I switched from:

"node-sass": "^4.14.1",

to:

"node-sass": "npm:sass@^1.49.9"

which worked. This was 3+ weeks ago, but today that alias isn't working. Looks like our deployment instance is running NPM 6.4.1 and aliases aren't supported in that version. (Again, everything was working fine until yesterday. I think the instance had been restarted but if that's the problem then this was a ticking time bomb already.)

Our app uses Node 10.15.3 and it's too much of a hassle to just quickly upgrade that. We tried upgrading NPM on the instance but it said NPM doesn't support 10.15.3.

It seems like the quick solution is to not use the alias. So I replaced the line with just sass@^1.49.9 and now of course I'm getting the error:

Error: Cannot find module 'node-sass'
src/browser/index.css (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/browser/index.css)

node-sass is nowhere in my code that I could change it to sass. How do I fix this?

webpack.development.js

const sassLoad = {
  test: /\.s?(a|c)ss$/,
  use: [
    mode.includes("dev") ? "style-loader" : MiniCssExtractPlugin.loader,
    {
      loader: "css-loader",
    },
    {
      loader: "sass-loader",
    },
  ],
};
module.exports = {
  // ...
  module: {
    rules: [
      linter,
      { oneOf: [imgLoad, jsLoad, sassLoad, fileLoad] },
    ],
  },

How do I make the switch? Where do I tell Webpack (or sass-loader or whatever) to look for the right package?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source