search

windicss / svelte-windicss-preprocess

A Svelte Preprocessor to compile windicss at build time.
https://windicss.org/play.html
MIT License
162 stars 13 forks source link

Any component that has at least one element with a class results in a preprocessor error #400

Closed dslatkin closed 2 years ago

dslatkin commented 2 years ago

Describe the bug

I see the following error exposed by the Svelte VS Code extension on any component that has at least one element with a class:

image

Looking at the Svelte extension output, this is the stack trace for the error:

Preprocessing failed
TypeError: _a.classes.replaceAll is not a function
    at Magician.processClassAttribute (file:///workspace/node_modules/svelte-windicss-preprocess/dist/index.mjs:16850:76)
    at Magician.extract (file:///workspace/node_modules/svelte-windicss-preprocess/dist/index.mjs:16835:10)
    at markup (file:///workspace/node_modules/svelte-windicss-preprocess/dist/index.mjs:17020:23)
    at process_markup (file:///workspace/node_modules/svelte-windicss-preprocess/dist/index.mjs:16754:27)
    at preprocess (file:///workspace/node_modules/svelte-windicss-preprocess/dist/index.mjs:16776:32)
    at markup (file:///workspace/node_modules/svelte-windicss-preprocess/dist/index.mjs:17211:29)
    at async process_markup (/workspace/node_modules/svelte/compiler.js:31608:24)
    at async Object.preprocess (/workspace/node_modules/svelte/compiler.js:31638:31)
    at async Function.create (/home/node/.vscode-server/extensions/svelte.svelte-vscode-105.8.0/node_modules/svelte-language-server/dist/src/plugins/svelte/SvelteDocument.js:85:30)
    at async SvelteDocument.getTranspiled (/home/node/.vscode-server/extensions/svelte.svelte-vscode-105.8.0/node_modules/svelte-language-server/dist/src/plugins/svelte/SvelteDocument.js:44:38)

I'm happy to help if you need any more information. Thanks!

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (2) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 1.97 GB / 5.80 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
  IDEs:
    Nano: 5.4 - /bin/nano
    VSCode: 1.63.2 - /home/node/.vscode-server/bin/899d46d82c4c95423fb7e10e68eba52050e30ba3/bin/code
  npmPackages:
    svelte: ^3.38.3 => 3.44.3 
    svelte-windicss-preprocess: ^4.2.5 => 4.2.5

Used Package Manager

npm

dslatkin commented 2 years ago

So with Jason's help on the Svelte Discord, I figured out the issue was the bundled version of Node that ships with VS Code doesn't yet support String.prototype.replaceAll. Changing the extension setting svelte.language-server.runtime to explicitly point to my Node executable at /usr/local/bin/node fixed the issue.

Thank you!

alexanderniebuhr commented 2 years ago

Yeah I was just thinking it has to be a node issue, but since you have node 16 I was confused. We can rebuild that function to use global regexes ..

silasabbott commented 2 years ago

Just to add on to this:

Node 14 throws this error. Node 16 doesn't throw this error. If you're using .nvm, set your .nvmrc to 16 or run nvm use 16 before running rpm run dev to avoid this error.