Parcel can`t find module "@parcel/transformer-sass" and callback must be a function

[veS-Sev]

🐛 bug report

I want to create my simple project with Parcell. But I can`t use scss for it because Parcel cannot find plugin "@parcel/transformer-sass".

🎛 Configuration (.babelrc, package.json, cli command)

{
"name": "parcel-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"source": "src/index.html",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "parcel",
"build": "parcel build"
},
"devDependencies": {
"@parcel/transformer-sass": "^2.0.0",
"parcel": "^2.0.0",
"sass": "^1.43.4"
}
}

🤔 Expected Behavior

I expect same like this

Parcel supports Sass files automatically using the @parcel/transformer-sass plugin. When a .sass or .scss file is detected, it will be installed into your project automatically.

😯 Current Behavior

When I wrote
<link rel="stylesheet" href="index.scss">

I saw the following:

`@parcel/core: Cannot find Parcel plugin "@parcel/transformer-sass"

  C:\Users\newse\Desktop\parcel-test\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"],

When I restarted Parcel I saw

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:\Users\newse\Desktop\parcel-test\node_modules\@parcel\package-manager\lib\installPackage.js:131:11)    
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async PromiseQueue._runFn (C:\Users\newse\Desktop\parcel-test\node_modules\@parcel\utils\lib\PromiseQueue.js:88:7)
  at async PromiseQueue._next (C:\Users\newse\Desktop\parcel-test\node_modules\@parcel\utils\lib\PromiseQueue.js:75:5)

I added @parcel/transformer-sass manually to devDependencies, but it didn't solve the problem

💁 Possible Solution

Maybe I need to use earlier versions of Parcel.

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	v2.0.0
Node	v16.13.0
npm/Yarn	v8.1.1
Operating System	windows 10

[lucalodi]

Same issue here on OSX

[askmydog]

I'm having similar issues on Windows. Here's the error I receive when I try to import an index.scss file into my index.js file:

Run with parcel watch:

× 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)

This is what I get when I run parcel watch --no-autoinstall

× Build failed.

@parcel/core: Cannot find Parcel plugin "@parcel/transformer-sass"

  C:\Users\steph\OneDrive\Documents\GitHub\TFPickett\OAW_Vanilla\frontend\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"],

This is my package.json:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "source": "src/index.js",
  "main": "../staticfiles/app.js",
  "module": "../staticfiles/module.js",
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.0.0"
  },
  "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 'jquery';


import './index.scss';

import '@popperjs/core';
import 'bootstrap';
import 'bootstrap-table';


import $ from 'jquery';
window.jQuery = $;
window.$ = $;

console.log(typeof $=== 'function');

console.log('parcel online');

$(function() {
    $('#table').bootstrapTable()
  })

Here's my index.scss:

@import "bootstrap/scss/bootstrap";
@import "bootstrap-table/dist/bootstrap-table";

$body-color: slateblue;

body {
  color: $body-color;
  font-family: sans-serif;
}

Running Parcel v2.0.0, node v14.18.0, npm 6.14.15

[ckken]

same here

[mischnic]

Can someone please provide a full reproduction as a zip file or git repo?

[Jorgu5]

+1 it happens on all projects when I'm trying to add SASS file on macOSx The transformer-sass package is in the folder but it don't recognize it.

Parcel v2.0.0
Node v14.17.3
Yarn v1.22.10

Reproduce steps:

1. Init project with Parcel with the default configuration. (yarn add --dev parcel)
2. Create an index.html file and include sass file or include in .ts import * as classes from './style.module.scss'
3. Use yarn serve or yarn watch.
4. --> Cannot find module "@parcel/transformer-sass"

[wesbos]

Same issue with Stylus. Failed to install @parcel/transformer-stylus:

I've tried to install it myself, but no luck. Node 16.3, Parcel 2.0.0

[wesbos]

Seems like this code is returning null: from installPackage.js

let fromPkgPath = await resolveConfig(
    fs,
    from,
    ['package.json'],
    projectRoot,
  );

Manually installing it doesnt work either

[wesbos]

This is fixed in [email protected] and [email protected] (should be released any min now) #7103

Thanks to Daniel for the heads up: https://twitter.com/danielbisch/status/1457728155813306369

This can be closed

[wesbos]

Looks like this introduced a new issue if anyone is checking:

#7271

[ostrowr]

There is something odd going on with module resolution for @parcel/transformer-sass in particular.

My project looks like this

- package.json (1)
- subfolder
--- package.json (2)
--- .parcelrc

If @parcel/transformer-sass is installed in package.json (2), we get Cannot find module "@parcel/transformer-sass". If it's installed in the base package.json (1), it works.

Can't replicate with other plugins like @parcel/transformer-stylus.

This only happens, of course, when --no-autoinstall is set.

[photocurio]

This issue still appears if you install Parcel as a dependency. It must be installed as a dev dependency:
npm install parcel --save-dev

[IbrahimMahbub]

this will fix the problem
npm install parcel --save-dev

[Thremulant]

On top of running npm install parcel --save-dev to get the latest version of parcel, I needed to update each one of the dependencies, like npm i --save-dev @parcel/transformer-sass @parcel/transformer-glsl

[mariodever]

In my case, it was because of the package-lock.json file from parent directory, after removing that file, it worked properly.

[alimukhammad]

what helped me solve the issue is installing parcel globally

npm install -g parcel

then

npm install --save-dev parcel