Vue compiler-sfc 3.5.12 breaks esbuild transpilation/bundling if style with lang="scss" is present in an SFC

[apichler-druck-at]

Vue version

3.5.12

Link to minimal reproduction

https://stackblitz.com/edit/stackblitz-starters-tyatq1?file=src%2FTest.vue

Steps to reproduce

Run node esbuild.js

What is expected?

Transpilation succeeds and test.js and test.css files are created in out directory

What is actually happening?

compiler-sfc (and subsequently esbuild-plugin-vue3) throws an error when compiler-sfc is calling "compileString"

✘ [ERROR] Cannot read properties of undefined (reading 'replace') [plugin vue]

    src/Test.vue:1:25:
      1 │ ... {};import "/home/projects/stackblitz-starters-tyatq1/src/Test.v...
        ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/esbuild-plugin-vue3/dist/index.js:338:34:
      338 │ ...                      build.onLoad({ filter: /.*/, namespace: ...
          ╵                                ~~~~~~

    at eval (/home/projects/stackblitz-starters-tyatq1/node_modules/esbuild-plugin-vue3/dist/index.js:338:35)
    at step (/home/projects/stackblitz-starters-tyatq1/node_modules/esbuild-plugin-vue3/dist/index.js:67:23)
    at Object.eval (/home/projects/stackblitz-starters-tyatq1/node_modules/esbuild-plugin-vue3/dist/index.js:48:53)
    at fulfilled (/home/projects/stackblitz-starters-tyatq1/node_modules/esbuild-plugin-vue3/dist/index.js:39:58)
    at <anonymous> (https://stackblitzstarterstyatq1-ktvm.w-credentialless-staticblitz.com/blitz.134daa3c.js:40:22853)

Error: Build failed with 1 error:
src/Test.vue:1:25: ERROR: [plugin: vue] Cannot read properties of undefined (reading 'replace')
    at failureErrorWithLog (/home/projects/stackblitz-starters-tyatq1/node_modules/esbuild/lib/main.js:1466:15)
    at eval (/home/projects/stackblitz-starters-tyatq1/node_modules/esbuild/lib/main.js:935:25)
    at eval (/home/projects/stackblitz-starters-tyatq1/node_modules/esbuild/lib/main.js:1344:9) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

if lang="scss" is removed from Test.vue, transpilation works as expected.

System Info

No response

Any additional comments?

Vue switched to sass "compileString" method instead of "renderSync" which breaks esbuild vue transpilation as soon as a style block with lang="scss" is present in an SFC.

If we remove lang="scss" or revert back to vue 3.5.11, it works

https://github.com/vuejs/core/blob/main/CHANGELOG.md

4474c11

[jh-leong]

It seems that Sass compileString does not support the importer option in esbuild-plugin-vue3 (https://sass-lang.com/documentation/js-api/interfaces/StringOptions/#importer):

https://github.com/pipe01/esbuild-plugin-vue3/blob/a593d1e998c7c7b1c45f79f83c5418f469ec5043/src/index.ts#L274-L286

[edison1105]

#11992 supports the Sass modern API. If the local Sass version is above 1.45.0, it will automatically use the modern API. Your project uses Sass version 1.79.5, but the parameters passed by esbuild-plugin-vue3 are still using the old API.

Two solutions:

• pin to v3.5.11 until esbuild-plugin-vue3 supports the Sass modern API.
• Downgrade the sass version in your project to below 1.45.0.