Parcel+Sass+npm: "Error: Failed to install #parcel/transformer-sass: Callback must be a function. Received undefined - node.js

Question

I'm trying to use Parcel to build a library, and am trying to import an index.scss file into my index.js file, it either fails to 'install #parcel/transformer-sass' if I don't include it as a dependency, or 'cannot find module "#parcel/transformer-sass"' when I do install it. Notably, Parcel will build successfully if I import an index.css' file into index.js` instead.
Does anyone know what I'm doing wrong?
Installing npm i #parcel/transformer-scss as a dependency, for which I get the error:
× Build failed.
Error: Failed to install #parcel/transformer-sass: Callback must be a function. Received undefined
Error: Failed to install #parcel/transformer-sass: Callback must be a function. Received undefined
at install
(C:\...\nvm\v14.18.0\node_modules\parcel\node_modules\#parcel\package-manager\lib\installPackage.js:131:11)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async PromiseQueue._runFn
(C:\...\nvm\v14.18.0\node_modules\parcel\node_modules\#parcel\utils\lib\PromiseQueue.js:88:7)
at async PromiseQueue._next
(C:\...\nvm\v14.18.0\node_modules\parcel\node_modules\#parcel\utils\lib\PromiseQueue.js:75:5)
Installing #parcel/transformer-sass and #parcel/config-default, for which I receive the error:
× Build failed.
#parcel/core: Cannot find Parcel plugin "#parcel/transformer-sass"
C:\...\nvm\v14.18.0\node_modules\parcel\node_modules\#parcel\config-default\index.json:25:23
24 | "*.{styl,stylus}": ["#parcel/transformer-stylus"],
> 25 | "*.{sass,scss}": ["#parcel/transformer-sass"],
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module "#parcel/transformer-sass"
26 | "*.less": ["#parcel/transformer-less"],
27 | "*.{css,pcss}": ["#parcel/transformer-postcss", "#parcel/transformer-css"],
I also tried creating a .parcelrc of various configurations, including:
{
"transformers":{".scss":"#parcel/transformer-scss"}
}
and
{
"extends":"#parcel/config-default",
"transformers":{".scss":"#parcel/transformer-scss"}
}
which throw similar errors.
Here's my package.json:
"name": "frontend",
"version": "1.0.0",
"description": "",
"source": "src/index.js",
"targets": {
"default": {
"distDir": "../staticfiles"
}
},
"main": "index.js",
"module": "module.js",
"scripts": {
"watch": "parcel watch",
"build": "parcel build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"parcel": "latest"
},
"dependencies": {
"#parcel/config-default": "^2.0.0",
"#parcel/transformer-sass": "^2.0.0",
"#popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
"bootstrap-table": "^1.18.3",
"jquery": "^3.6.0"
}
}
here's my index.js:
import "./index.scss";
import 'bootstrap';
import 'bootstrap-table';
import $ from "jquery";
console.log($)
window.jQuery = $;
window.$ = $;
console.log("hello world");
$(function() {
$('#table').bootstrapTable()
})
Here's my index.scss:
#import "bootstrap/scss/bootstrap";
#import "bootstrap-table/dist/bootstrap-table";
// #import "bootstrap-table/dist/extenstions/filter-control/bootstrap-table-filter-control";
$body-color: slateblue;
body {
color: $body-color;
font-family: sans-serif;
}

Answer 1

The problem of Callback must be a function. Received undefined occurs when using parcel in a project directory that has a parent directory with an (unrelated) yarn.lock file.
To reproduce run touch ~/yarn.lock and then run parcel in a subdirectory of ~/.
To fix the issue delete any yarn.lock files in parent directories.

Answer 2

I had a problem with running the parcel, probably due to a node.js update, I updated the parcel and installed #parcel/transformer-sass there: https://www.npmjs.com/package/#parcel/transformer-sass.
After that, the parcel works fine.