Svelte - Unexpected token (parse-error)

It seems like Parcel fails to parse this in a Svelte popup:

const errorMessage = {
  youtube: "Cannot assign. Used by YouTube",
  alreadyInUse: "Cannot assign. Already in use"
} as const;

const errorMessage = {
  youtube: "Cannot assign. Used by YouTube",
  alreadyInUse: "Cannot assign. Already in use"
} as const;

because of the as const part Plsamo version: 0.60.3-lab.2

79 Replies

AviOP•2y ago

After removing it, it seems like this is an invalid syntax:

const keysSet = new Set<string>();
                                ^

const keysSet = new Set<string>();
                                ^

Removing .plasmo/ doesn't solve the issue either

lab•2y ago

Try verbose logging and see if it spits out any other info :d

AviOP•2y ago

I did try, that's how I found out that the aforementioned lines were problematic

AviOP•2y ago

message.txt

lab•2y ago

At the bottom of the code pasting, is there a stack trace?

AviOP•2y ago

:global(.mdc-data-table__cell.mdc-data-table__cell:first-of-type) {
  vertical-align: top;
}</style>

🟡 19     |  C:\repositories\extensions\youtube-like-dislike-shortcut-plasmo\src\popup\components\ButtonCustomization.svelte:25:35

:global(.mdc-data-table__cell.mdc-data-table__cell:first-of-type) {
  vertical-align: top;
}</style>

🟡 19     |  C:\repositories\extensions\youtube-like-dislike-shortcut-plasmo\src\popup\components\ButtonCustomization.svelte:25:35

Only the problematic line

lab•2y ago

what happens if you move that component outside of popup directory?

AviOP•2y ago

Move the file and remove the references to it, or just move?

lab•2y ago

you prob need to replace the reference too yeah - tho in my project when I move files around they automatically replace the path for me

AviOP•2y ago

My WebStorm also did it, but the error is the same

lab•2y ago

I'm not entirely sure yeah, this is the TS in svelte territory, this error comes from the TS checker within Svelte

AviOP•2y ago

I mean visually there aren't issues

lab•2y ago

🔴 ERROR | Unexpected token (parse-error)

Also this error could indicates hidden token btw afaik, this happens when you have a whitespace character somewhere that messed up the whole file

AviOP•2y ago

Maybe it has to do with the tsconfig.json How should it look like?

lab•2y ago

It looks like this on the example:

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.svelte"],
  "compilerOptions": {
    "paths": {
      "~*": ["./*"]
    },
    "baseUrl": "."
  }
}

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.svelte"],
  "compilerOptions": {
    "paths": {
      "~*": ["./*"]
    },
    "baseUrl": "."
  }
}

AviOP•2y ago

Why both .tsx and .svelte?

lab•2y ago

oh true yeah we can remove .tsx for this and vue as well xD good catch

AviOP•2y ago

Lmao Also, IMO when a user does

pnpx plasmo init extension-name

pnpx plasmo init extension-name

similar to other CLIs like Vue/VIte, it should ask the user whether to start off from a vanilla boilerplate, Svelte, Vue, React and whether to add BGSW Because I often forget the --with-svelte flag and I find myself doing

cd extension-name && pnpm un react react-dom @types/react @types/react-dom && pnpm i svelte

cd extension-name && pnpm un react react-dom @types/react @types/react-dom && pnpm i svelte

Annoyingly, --with-svelte does produce a build that compiles even when doing const keys = new Set<string>()

lab•2y ago

hehhhh interesting... good idea, I will add it in a future version - can you file an RFC issue? Also, if you're down to spearhead it pls do :p

AviOP•2y ago

My mind isn't quite free to work on projects that aren't mine ATM, plus I'll need some assistance anyway

lab•2y ago

aight logged in an rfc: https://github.com/PlasmoHQ/plasmo/issues/354

GitHub

[RFC] plasmo init prompt for template · Issue #354 · PlasmoHQ/plasmo

How do you envision this feature/change to look/work like? Also, IMO when a user does pnpx plasmo init extension-name similar to other CLIs like Vue/VIte, it should ask the user whether to start of...

AviOP•2y ago

I like how you basically copied my message into the issue

lab•2y ago

yeah lol xD eventually I will add a feature into Pallas where I can mention her to turn a message into a gh issue

AviOP•2y ago

It sounds like it should work, but the issue will not have enough info

lab•2y ago

The idea in my mind is that it just need to log the data and then reference the conversion ID on discord just like the issue above then the people can continuing discussing it on Discord the github issue is really to tracking, it can be used for discussing as needed for me, the issue is used to create a branch

AviOP•2y ago

I'm curious how that'll work out Interesting I copied the files from the original Plasmo port into the test Svelte project, and after a few PNPM installs the error came back

lab•2y ago

it could be that the stack trace is wrong, or that there's a hidden character in that file

AviOP•2y ago

@louis Interesting, WebStorm randomly decided to throw the error mentioned by the Svelte compiler The solution was:

{
  "compilerOptions": {
    "lib": ["ESNext"]
  }
}

{
  "compilerOptions": {
    "lib": ["ESNext"]
  }
}

but then, I get errors of Unresolved type: KeyboardEvent, so the total solution is

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM", "DOM.Iterable"]
  }
}

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM", "DOM.Iterable"]
  }
}

lab•2y ago

hmm interesting all of that is included in the base plasmo tsconfig so not sure why that's needed ;d

lab•2y ago

https://github.com/PlasmoHQ/plasmo/blob/6342d64ad5e6208f9db3cae4cd46006104036c46/cli/plasmo/templates/tsconfig.base.json#L10

GitHub

plasmo/tsconfig.base.json at 6342d64ad5e6208f9db3cae4cd46006104036c...

🧩 The Browser Extension Framework. Contribute to PlasmoHQ/plasmo development by creating an account on GitHub.

AviOP•2y ago

Maybe it's not capitalized properly? Why dafuq I removed the "lib" line, re-ran pnpm dev, and the error doesn't spit anymore What is up...

AviOP•2y ago

What the actual fuck

AviOP•2y ago

For some stupid reason, if I copy the Svelte snippet (https://github.com/PlasmoHQ/examples/blob/de42aa8fe74e2b025fa582112d59795c7c04ba4e/with-svelte/popup.svelte) over to this project, add let set = new Set<string>(); and them remove everything else, it's fine But if I start from the previous code, remove everything else until I'm left with let set = new Set<string>();, it spits an error BeyondWeeping

lab•2y ago

I wonder if this is because the default popup.svelte contains everything needed for svelte so the compiler doesn't throw, and since it has that cached even if you remove everything it would still be fine (?). I bet if you shutdown the dev server then try adding it back again, it will likely barf ;d

AviOP•2y ago

Restarting the dev server throws the same error 🤷‍♂️

lab•2y ago

yup

AviOP•2y ago

That's one of the strangest issues I've encountered

lab•2y ago

does it work if you just do let something = new Set<string>();

AviOP•2y ago

I mean it's literally the same piece of code

lab•2y ago

I've a suspicion that set and get might be parsed as reserved keywords

AviOP•2y ago

Nope

🟡 23     |  C:\repositories\extensions\youtube-like-dislike-shortcut-plasmo\src\popup.svelte:3:31
🔴 ERROR  | Unexpected token (parse-error)
🟡 24     | 1: <script type="ts">
2:
3:   const setSomething = new Set<string>();
                                          ^
4: </script>
🟡 25     | <script type="ts">

  const setSomething = new Set<string>();
</script>

🟡 26     |  C:\repositories\extensions\youtube-like-dislike-shortcut-plasmo\src\popup.svelte:3:40

🟡 23     |  C:\repositories\extensions\youtube-like-dislike-shortcut-plasmo\src\popup.svelte:3:31
🔴 ERROR  | Unexpected token (parse-error)
🟡 24     | 1: <script type="ts">
2:
3:   const setSomething = new Set<string>();
                                          ^
4: </script>
🟡 25     | <script type="ts">

  const setSomething = new Set<string>();
</script>

🟡 26     |  C:\repositories\extensions\youtube-like-dislike-shortcut-plasmo\src\popup.svelte:3:40

lab•2y ago

if you remove the template type annotation does it work?

AviOP•2y ago

It does If you'd like I can screenshare

lab•2y ago

BTW if you change type="ts" to lang="ts" does it work?

AviOP•2y ago

It does, maybe that was the issue?

lab•2y ago

lol yeah

AviOP•2y ago

Holy cow, a stupid typo ruined my past 4 months

lab•2y ago

dw we all been there

AviOP•2y ago

I think it's worth specifying it in a repo somewhere, to replace type="ts" with lang="ts"

lab•2y ago

all the svelte example uses lang="ts", but yeah we can add it to the FAQ section in the svelte example

AviOP•2y ago

Or, we can ignore it in the transformer level ThinkSmirk

lab•2y ago

well you would need to send a PR to the svelte preprocessor itself

AviOP•2y ago

No I mean, in Plasmo itself

lab•2y ago

(it's what looking at the code and figure out if it's ts/js) you may try but what's the use of type="ts"? type is supposed to denote styling vs template or some other thing right I don't think it's meant to use the way you were using anyway

AviOP•2y ago

I.e. before sending the file to the processor, have

if (code.includes("<script") && code.includes('type="ts"')) {
  code = code.replace('type="ts"', 'lang="ts"')
}

if (code.includes("<script") && code.includes('type="ts"')) {
  code = code.replace('type="ts"', 'lang="ts"')
}

I mean that's the way I set up my Svelte files in my extensions so far Is it better to inform the devs in a README about supporting lang="ts" or is it better to just let them run type="ts" and take care of this mistake?

lab•2y ago

Is type="ts" a standard within svelte?

AviOP•2y ago

I dunno, but it works for me

lab•2y ago

I think it might work in like svelte 2.x or some I looked up the docs, everywhere I look it all changed to lang="ts"

AviOP•2y ago

I've always been using Svelte 3 Interesting

lab•2y ago

Like even the MDN docs: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript#porting_our_to-do_list_app_to_typescript

TypeScript support in Svelte - Learn web development | MDN

In this article we took our to-do list application and ported it to TypeScript.

lab•2y ago

lab•2y ago

^ I couldn't find that string lol

AviOP•2y ago

Wrap in double quotes

lab•2y ago

Yeah I think it's deprecated entirely - if you look at their docs, it's all lang='ts' only in that one image alt that I think they forgot to change

AviOP•2y ago

Ok interesting, so the right solution might indeed be "make sure to have lang="ts" in your Svelte component"

lab•2y ago

yeah

AviOP•2y ago

Done https://github.com/PlasmoHQ/examples/commit/aff8616861166726f95564d0e2cb2c66eb03e1be

GitHub

doc: update with-svelte README (#27) · PlasmoHQ/examples@aff8616

Signed-off-by: avi12 Signed-off-by: avi12

AviOP•2y ago

Somehow `lang="ts" did not solve it in the following case: Plasmo 0.64.2 popup.svelte

<script lang="ts">
  import type { QualityFpsPreferences, VideoAutoResize, VideoSize } from "./index";
</script>

<script lang="ts">
  import type { QualityFpsPreferences, VideoAutoResize, VideoSize } from "./index";
</script>

produces

🔴 ERROR | Unexpected token (parse-error)
🟡 147    | 1: <script lang="ts">
2:   import type { QualityFpsPreferences, VideoAutoResize, VideoSize } from "./index";
                 ^
3: </script>

🔴 ERROR | Unexpected token (parse-error)
🟡 147    | 1: <script lang="ts">
2:   import type { QualityFpsPreferences, VideoAutoResize, VideoSize } from "./index";
                 ^
3: </script>

lab•2y ago

hmmm is index a svelte file?

AviOP•2y ago

No, index.d.ts

lab•2y ago

hmmm, try changing it to index.ts or include the .d - I don't think you can include declaration file

AviOP•2y ago

I renamed index.d.ts to types.ts, but it spits the same error

lab•2y ago

try import it with ./types.ts? not sure how svelte is resolving import nowaday

AviOP•2y ago

I did

<script lang="ts">
  import type { QualityFpsPreferences, VideoAutoResize, VideoSize } from "./types";

</script>

<script lang="ts">
  import type { QualityFpsPreferences, VideoAutoResize, VideoSize } from "./types";

</script>

Oh wait Yeah, still

<script lang="ts">
  import type { QualityFpsPreferences, VideoAutoResize, VideoSize } from "./types.ts";

</script>

<script lang="ts">
  import type { QualityFpsPreferences, VideoAutoResize, VideoSize } from "./types.ts";

</script>

lab•2y ago

even after restarting the server?

AviOP•2y ago

Stopped the server, deleted .plasmo/, restarted the server, same error Last time I got a proper description for (parse-error) was via the browser, which was awkward I deleted every Svelte file but popup.svelte, changed that file's content to

<script lang="ts">
  let val: number;
</script>

<script lang="ts">
  let val: number;
</script>

still getting the error 🤷‍♂️

lab•2y ago

lol what

AviOP•2y ago

lmao what I pnpx plasmo init proj --with-svelte'd, copied over src/*, and it magically works I have no idea whether one or more deps were wrecked, but certainly nothing is wrong about any source file

lab•2y ago

lol

Gaming

Programming

Svelte - Unexpected token (parse-error)