bug: Tailwind IntelliSense Error copy markup plugin

[bartcuijpers]

What version of FlyonUI are you using?

2.0.0

Which browsers are you seeing the problem on?

Other

Reproduction URL

https://flyonui.com/

Describe your issue

I'm integrating Flyon in a Svelte Kit project, and noticed that Tailwind CSS IntelliSense throws an error regarding all plugins upon import:

[Error - 9:43:27 AM] Unable to load plugin: flyonui ReferenceError: window is not defined
    at d:/Data/Documents/GitHub/dashboard-sv5-tw4-flyonui/node_modules/flyonui/src/js/plugins/copy-markup/index.ts:193:1
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async import (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:256:2163)
    at async d:/Data/Documents/GitHub/dashboard-sv5-tw4-flyonui/node_modules/flyonui/src/js/index.ts:17:42
    at async Function.import (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:256:2163)
    at async s (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3544:848)
    at async c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3544:1307
    at async file:///d:/Data/Documents/GitHub/dashboard-sv5-tw4-flyonui/node_modules/tailwindcss/dist/lib.mjs:14:976
    at async Promise.all (index 0)
    at async Promise.all (index 1)
    at async Jt (file:///d:/Data/Documents/GitHub/dashboard-sv5-tw4-flyonui/node_modules/tailwindcss/dist/lib.mjs:14:755)
    at async Zt (file:///d:/Data/Documents/GitHub/dashboard-sv5-tw4-flyonui/node_modules/tailwindcss/dist/lib.mjs:22:146)
    at async Module.Lo (file:///d:/Data/Documents/GitHub/dashboard-sv5-tw4-flyonui/node_modules/tailwindcss/dist/lib.mjs:22:1872)
    at async qO (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3544:1643)
    at async Object.reload (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3546:745)
    at async Tx.softRestart (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3550:131)
    at async E (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3548:13175)
    at async c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3548:13591

at first I thought it was only related to the copy markup plugin, but after commenting out the code which referenced to the window object, the next plugin thew the exact same error.

[github-actions]

Hi @bartcuijpers

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[github-actions]

Potential duplicates:

• bug: Tailwind IntelliSense Error regarding options #75 (60.93% Match)

[hachiroth]

Same here.
My solution is import the flyonui in a single js file , then import it in css as a plugin. This will solve the error reported by Tialwindcss IntelliSense, and you can also pass optinos in css normally(#75 ).

[bartcuijpers]

Same here. My solution is import the flyonui in a single js file , then import it in css as a plugin. This will solve the error reported by Tialwindcss IntelliSense, and you can also pass optinos in css normally(#75 ).

@calebzen Can you share the JS file?

[hachiroth]

Same here. My solution is import the flyonui in a single js file , then import it in css as a plugin. This will solve the error reported by Tialwindcss IntelliSense, and you can also pass optinos in css normally(#75 ).

@calebzen Can you share the JS file?

Sure! I used:

plugins.js

export { default } from "flyonui";

main.css

@import "tailwindcss";
@plugin "../plugins.js" {
  themes: black --default;
}
@import "flyonui/variants.css";

[PruthviPraj00]

Hi @bartcuijpers and @calebzen,

Apologies for the delayed response. It seems that issue #75 and the current one are different. I have already provided a response to issue #75, so please take a look there for more details.

Regarding the current issue, we’ve tested the copy markup and other components, and they are working fine. The framework integration page will be updated soon.

In the meantime, please check out this starter kit:

https://github.com/themeselection/flyonui-svelte-integration

You can use this starter kit to try and recreate the issue you're encountering. Just keep the following in mind:

• When passing parameters using data attributes, notice how the object containing the parameters is wrapped in curly braces and how the slashes are properly escaped.

Example:

data-select={`{
    "placeholder": "Select option...",
    "toggleTag": "<button type=\\"button\\" aria-expanded=\\"false\\"></button>",
}`}

Let me know if you need further clarification!

[bartcuijpers]

I’m experiencing exactly the same problems in this repository. Just to be clear, you can see these issues under “Tailwind CSS IntelliSense” in the VS Code output window.

---- RELOADING DESIGN SYSTEM ----
---- D:/Data/Desktop/flyonui-svelte-integration-main/flyonui-svelte-integration-main/src/app.css ----
[Error - 8:25:32 PM] Unable to load plugin: flyonui ReferenceError: window is not defined
    at d:/Data/Desktop/flyonui-svelte-integration-main/flyonui-svelte-integration-main/node_modules/flyonui/src/js/plugins/copy-markup/index.ts:193:1
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async import (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:256:2163)
    at async d:/Data/Desktop/flyonui-svelte-integration-main/flyonui-svelte-integration-main/node_modules/flyonui/src/js/index.ts:17:42
    at async Function.import (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:256:2163)
    at async s (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3544:848)
    at async c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3544:1307
    at async file:///d:/Data/Desktop/flyonui-svelte-integration-main/flyonui-svelte-integration-main/node_modules/tailwindcss/dist/lib.mjs:14:976
    at async Promise.all (index 1)
    at async Promise.all (index 1)
    at async Gt (file:///d:/Data/Desktop/flyonui-svelte-integration-main/flyonui-svelte-integration-main/node_modules/tailwindcss/dist/lib.mjs:14:755)
    at async Ht (file:///d:/Data/Desktop/flyonui-svelte-integration-main/flyonui-svelte-integration-main/node_modules/tailwindcss/dist/lib.mjs:22:146)
    at async Module.Bo (file:///d:/Data/Desktop/flyonui-svelte-integration-main/flyonui-svelte-integration-main/node_modules/tailwindcss/dist/lib.mjs:22:1872)
    at async qO (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3544:1643)
    at async Object.reload (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3546:745)
    at async Tx.softRestart (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3550:131)
    at async E (c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3548:13175)
    at async c:\Users\bartcuijpers\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.11\dist\tailwindServer.js:3548:13591
---- RELOADED IN 531.88ms ----

[OmkarOza]

Hello @bartcuijpers ,

We have released a patch update today. Could you please test with the new version and let us know if you still encounter the same issue.

~Best regards

[bartcuijpers]

Solved!