Jonghakseo / chrome-extension-boilerplate-react-vite

Chrome Extension Boilerplate with React + Vite + Typescript
MIT License
2.26k stars 329 forks source link

fix: export module error #683

Closed PatrykKuniczak closed 1 month ago

PatrykKuniczak commented 1 month ago

* Please fill in the required items.

Priority*

Purpose of the PR*

On the #682 i changed this value, because one person from discord suggest it, but it isn't good idea, because i see a part of pages don't work properly, we need to change it immediately.

Changes*

I removed module from tsconfig

This it very urgent :)

akshaycj commented 3 weeks ago

Removing the module brings back the below error: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext' @PatrykKuniczak is there any work around for this?

PatrykKuniczak commented 3 weeks ago

@akshaycj I've figured it out, a minutes ago XD

I need to take a look on that, i've placed it on my TODO list, i'll fixed it ASAP :)

akshaycj commented 3 weeks ago

@PatrykKuniczak quick question, what parts of the extension are affected when module is added? just curious.

PatrykKuniczak commented 3 weeks ago

@akshaycj If my brain works well, that's probably content-ui i really doesn't remember, i need to take a look.

Maybe that's conflict with sth else, and it distract me, and the solution could be to rollback this PR.

PatrykKuniczak commented 3 weeks ago

@akshaycj Sth like that ocurr:

image

I don't want to struggle with this, i'll create new package for handle all env and simplify it for users 🔥

paluchi commented 2 weeks ago

I'm struggling a lot with this

PatrykKuniczak commented 2 weeks ago

I'm struggling a lot with this

I'm currently working on new solution, i have som bash script for automatization and now process.env have all envs including this from CLI.

But i can't use process in browser. I need to create additional object which takes all process values which will work either on server(node) and on browser.

Be pacient, we'll merge it ASAP 😄

paluchi commented 2 weeks ago

I'm struggling a lot with this

I'm currently working on new solution, i have som bash script for automatization and now process.env have all envs including this from CLI.

But i can't use process in browser. I need to create additional object which takes all process values which will work either on server(node) and on browser.

Be pacient, we'll merge it ASAP 😄

That's awesome to know, thank you very much @PatrykKuniczak

PatrykKuniczak commented 2 weeks ago

@paluchi But I'm verrryyy stuck with 1 think and we all were stuck, but i hope i'll do it in this week :) It depends if @Jonghakseo are able to fix this issue 😆

Jonghakseo commented 2 weeks ago

@paluchi @PatrykKuniczak

Maybe it works for us.

paluchi commented 2 weeks ago

@Jonghakseo @PatrykKuniczak At least from my side I can say you are helping a lot of people fixing this issue. I'm trying to centralize envs in a .ts file under packages directory but It seems not to work with process.env nor import.meta.env.{YOUR_KEY}

zirho commented 1 week ago

I had to remove this line to get it working https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/packages/tsconfig/utils.json#L8

but even then, I get ts error saying

Property 'env' does not exist on type 'ImportMeta'.ts(2339)
image

Let me try to fix this.

zirho commented 1 week ago

it turned out that it refers to ImportMeta in this file node_modules/.pnpm/typescript@5.5.4/node_modules/typescript/lib/lib.dom.d.ts copying vite-env.d.ts into the package that uses import.meta.env works for me. Thank you!

so basically,

  1. add tsconfig.json in compilerOptions
    "module": "ESNext",
  2. copy vite-env.d.ts file in the package.
PatrykKuniczak commented 1 week ago

it turned out that it refers to ImportMeta in this file node_modules/.pnpm/typescript@5.5.4/node_modules/typescript/lib/lib.dom.d.ts copying vite-env.d.ts into the package that uses import.meta.env works for me. Thank you!

so basically,

  1. add tsconfig.json in compilerOptions
    "module": "ESNext",
  1. copy vite-env.d.ts file in the package.

I'll do it to work everywhere good, but after we merge #711 :) Thanks for your temporary solution

paluchi commented 2 days ago

Hi @PatrykKuniczak. Is there any time estimate for the resolution of this problem?

PatrykKuniczak commented 2 days ago

Hi @PatrykKuniczak. Is there any time estimate for the resolution of this problem?

It depends on @Jonghakseo time, because i have been waiting for code review