dino_morrison Posts - Answer Overflow

dino_morrison

•Created by dino_morrison on 7/21/2023 in #🔰newbie

How do I set globalthis.__VUE_PROD_DEVTOOLS__

I'm getting an error stating that __VUE_OPTIONS_API__ and __VUE_PROD_DEVTOOLS__ are not defined. While the error was definitely present, it didn't really cause an issue when developing my newtab but now that I've moved on to to popup, it throws the error every time I click on the extension icon and the popup is empty. The exact error is:

__VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.

__VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.

To fix this, I manually add globalThis.__VUE_OPTIONS_API__ = true; and globalThis.__VUE_PROD_DEVTOOLS__ = true; to the .plasmo/static/popup.ts file. The problem with this solution is that it has to be done manually every time I run pnpm dev. Is there somewhere that this can be configured that I'm not smart enough to figure out?

3 replies

PD🧩 Plasmo Developers

•Created by dino_morrison on 7/15/2023 in #🔰newbie

Can't get tailwind CSS to import

I set up plasmo with the with-src flag and replaced react with vue and then added tailwind. Everything is working great until I try to import the style.css file. I am working with an index.vue file in the /src/newtab directory. I have tried adding an index.html file and load the stylesheet the traditional way with a link element, I have tried importing in both the style and script tags of the vue component and I've tried adding it with the background.ts file. Every time, no matter which method I use, I get the following error: Unexpected token Number { has\_sign: false, value: 50.0, int\_value: Some(50) } In the style tag of the vue component I used the following syntax: @import "~/style.css" In the script tag of the vue component I used the followning syntax: import "data-text:~/style.css" Iin the background.ts file I used the following syntax: import cssText from "data-text:~/style.css" and the following code:

const style = document.createElement("style")
style.textContent = cssText
document.head.appendChild(style)

const style = document.createElement("style")
style.textContent = cssText
document.head.appendChild(style)

I realize background.ts is probably not the place for this but I know the code from that file was being executed so I tried it there. Again, I'm getting the same error no matter which method I choose (Unexpected token Number { has\_sign: false, value: 50.0, int\_value: Some(50) }). There is no other context provided.

4 replies

Gaming

Programming