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