Style with lang="scss" not working with vue compiler-sfc 3.5.12

[apichler-druck-at]

Hello!

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.

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

vuejs/core@4474c11

Minimal example:

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

If lang="scss" is removed from Test.vue, transpilation works as expected with node esbuild.js

✘ [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]
}

[LincZero]

I also encountered the exact same error

> npm run build

> obsidian-node-flow@1.0.1 build
> tsc -noEmit -skipLibCheck && node esbuild.config.mjs production

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

    node_modules/.store/@the_tree+esbuild-plugin-vue3@0.3.1/node_modules/@the_tree/esbuild-plugin-vue3/dist/index.js:424:77:
      424 │                                                                 file: o.file.replace(/\?.*?$/, ""),
          ╵                                                                              ^

    at H:\Git\Private\Group_FrontEnd\obsidian-node-flow\node_modules\.store\@the_tree+esbuild-plugin-vue3@0.3.1\node_modules\@the_tree\esbuild-plugin-vue3\dist\index.js:424:78
    at Array.map (<anonymous>)
    at H:\Git\Private\Group_FrontEnd\obsidian-node-flow\node_modules\.store\@the_tree+esbuild-plugin-vue3@0.3.1\node_modules\@the_tree\esbuild-plugin-vue3\dist\index.js:419:72
    at step (H:\Git\Private\Group_FrontEnd\obsidian-node-flow\node_modules\.store\@the_tree+esbuild-plugin-vue3@0.3.1\node_modules\@the_tree\esbuild-plugin-vue3\dist\index.js:67:23)
    at Object.next (H:\Git\Private\Group_FrontEnd\obsidian-node-flow\node_modules\.store\@the_tree+esbuild-plugin-vue3@0.3.1\node_modules\@the_tree\esbuild-plugin-vue3\dist\index.js:48:53)
    at fulfilled (H:\Git\Private\Group_FrontEnd\obsidian-node-flow\node_modules\.store\@the_tree+esbuild-plugin-vue3@0.3.1\node_modules\@the_tree\esbuild-plugin-vue3\dist\index.js:39:58)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

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

    node_modules/.store/@the_tree+esbuild-plugin-vue3@0.3.1/node_modules/@the_tree/esbuild-plugin-vue3/dist/index.js:381:34:
      381 │                             build.onLoad({ filter: /.*/, namespace: "sfc-style" }, function (args) { return cache.get([args.path, args.namespace], function () { return __awaiter(_this, void 0, void 0, function () {
          ╵                                   ~~~~~~

    at H:\Git\Private\Group_FrontEnd\obsidian-node-flow\node_modules\.store\@the_tree+esbuild-plugin-vue3@0.3.1\node_modules\@the_tree\esbuild-plugin-vue3\dist\index.js:381:35
    at step (H:\Git\Private\Group_FrontEnd\obsidian-node-flow\node_modules\.store\@the_tree+esbuild-plugin-vue3@0.3.1\node_modules\@the_tree\esbuild-plugin-vue3\dist\index.js:67:23)
    at Object.next (H:\Git\Private\Group_FrontEnd\obsidian-node-flow\node_modules\.store\@the_tree+esbuild-plugin-vue3@0.3.1\node_modules\@the_tree\esbuild-plugin-vue3\dist\index.js:48:53)
    at fulfilled (H:\Git\Private\Group_FrontEnd\obsidian-node-flow\node_modules\.store\@the_tree+esbuild-plugin-vue3@0.3.1\node_modules\@the_tree\esbuild-plugin-vue3\dist\index.js:39:58)

  The plugin "vue" was triggered by this import

    src/NodeFlow/component/CustomNode/CommonNode.vue:1:282:
      1 │ ...omponent\\CustomNode\\CommonNode.vue?type=style&index=0";import "H:\\Git\\Private\\Group_FrontEnd\\obsidian-node-flow\\src\\NodeFlow\\component\\CustomNode\\CommonNode.vue?type=style&index=1";import { render } from "H:\\Git\\Private\\Group_FrontEnd\\obsi... 
        ╵                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1 error

• "vue": "^3.2.31"
• "@the_tree/esbuild-plugin-vue3": "^0.3.1"

[LincZero]

@apichler-druck-at Have you solved it yet?

[apichler-druck-at]

@LincZero
not really, we fixed sass to version 1.44.0 as a workaround, but thats no permanent solution of course.

I also created an issue in vue compiler-sfc: vuejs/core#12180

[pipe01]

Sorry, life's been busy lately. Hopefully I'll be able to take a look at this soon.

[martinaajonsson]

Any update on this? 🙏🙏

[pipe01]

Sorry for the delay, can you try with npm i https://github.com/pipe01/esbuild-plugin-vue3?

[LincZero]

Sorry for the delay, can you try with npm i https://github.com/pipe01/esbuild-plugin-vue3?

It's still the same error report.

Provide a relatively small project for testing/recurrence (this is a template): https://github.com/guopenghui/obsidian-vue-starter

Also, I noticed that the author of this project still uses this library in the new project and uses' scss '. (https://github.com/guopenghui/obsidian-language-learner/blob/master/src/component/WordMore.vue#L44) Maybe we can see what the differences are between the two projects

@guopenghui

[martinaajonsson]

Still same error for me as well :(