Parcel+Sass+npm：“错误：无法安装@parcel/transformer-sass：回调必须是函数。收到未定义答案

【问题标题】：Parcel+Sass+npm: "Error: Failed to install @parcel/transformer-sass: Callback must be a function. Received undefinedParcel+Sass+npm：“错误：无法安装@parcel/transformer-sass：回调必须是函数。收到未定义
【发布时间】：2021-12-14 16:29:24
【问题描述】：

我正在尝试使用 Parcel 构建一个库，并尝试将 index.scss 文件导入到我的 index.js 文件中，如果我不这样做，它要么无法“安装 @parcel/transformer-sass”将其作为依赖项包含在内，或者在我安装它时“找不到模块“@parcel/transformer-sass””。值得注意的是，如果我导入 index.css' file into index.js`，Parcel 将成功构建。

有谁知道我做错了什么？

安装 npm i @parcel/transformer-scss 作为依赖项，我得到错误：

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

安装@parcel/transformer-sass 和@parcel/config-default，我收到错误：

× 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"],

我也尝试过创建各种配置的.parcelrc，包括：

{
"transformers":{".scss":"@parcel/transformer-scss"}
}

和

{
"extends":"@parcel/config-default",
"transformers":{".scss":"@parcel/transformer-scss"}
}

会引发类似的错误。

这是我的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"
  }
}

这是我的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()
  })

这是我的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;
}

【问题讨论】：

如果你进入your-project/node_modules/@parcel，你会看到transformer-sass 文件夹吗？您遇到的错误似乎表明包裹无法找到该包裹。 Parcel 将自动尝试为您安装它，因此为了简化事情并隔离问题，您可以尝试使用 --no-autoinstall 标志运行 parcel，然后使用 npm 手动安装它（看看是否有任何错误）。
另外，包名是@parcel/transformer-sass，not @parcel/transformer-scss，就像你在上面的几个地方一样。也许再试一次，并密切注意拼写？
@parcel/transformer-scss 是一个错字。我去检查了node-modules/@parcel，但没有transformer-sass。我单独安装了transform-sass，然后重新运行parcel --no-autoinstall并收到cannot find module "@parcel/transformer-sass"错误。 FWIW 我也重新运行parcel watch 并再次得到Failed to install @parcel/transformer-sass: Callback must be a function. Received undefined 错误。有什么想法吗？
只是为了确认一下，在您“手动安装transformer-sass”之后，您确认有一个node_modules/@parcel/transformer-sass 文件夹？如果它不存在，那就是原因，我们想放大npm install 的问题所在。是否可以共享一个复制仓库？
没错。我检查了node-modules/@parcel，但没有trasnformer-sass。我跑了npm i @parcel/transformer-sass 并重新检查了node-modules 和transformer-sass 在那里。在我确认transformer-sass 在节点模块中之后，我重新运行parcel watch --no-autoinstall，它抛出了cannot find module 错误，当我在没有auto-install 的情况下运行parcel watch 时它抛出了failed to load module 错误。我还尝试在有和没有.parcelrc 文件的情况下重新运行它，并纠正了transformer-scss，结果相同

标签： node.js webpack sass parceljs

【解决方案1】：

Callback must be a function. Received undefined 的问题发生在项目目录中使用 parcel 时，该项目目录的父目录具有（不相关的）yarn.lock 文件。

要重现运行touch ~/yarn.lock，然后在~/ 的子目录中运行parcel。

要解决此问题，请删除父目录中的所有 yarn.lock 文件。

【讨论】：