Property 'env' does not exist on type 'ImportMeta' in 3.0.0

bartoszkrawczyk2 commented 2 years ago

Describe the bug

In vite 3.0.0 it still exists, even if it was previously closed.

Can be recreated using react-ts template. Try to use env variable via import.meta.env, TS will give you an error Property 'env' does not exist on type 'ImportMeta'.

According to the docs it should work: https://vitejs.dev/guide/env-and-mode.html

Reproduction

yarn create vite my-app --template react-ts

System Info

System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Memory: 128.70 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 103.0.1
    Safari: 15.4
    Safari Technology Preview: 15.4

Used Package Manager

yarn

Logs

No response

Validations

[x] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[ ] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

bluwy commented 2 years ago

Just created the react-ts template and it's working fine in both vscode and npm run build

innocenzi commented 2 years ago

Just coming in to say that there might have been a regression somewhere: import.meta is no longer typed in my project even with vite/client referenced in tsconfig.json.

Previously, I had this tsconfig.json:

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "lib": ["esnext", "dom"],
        "types": ["node", "stripe-v3", "vite/client"],
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/vue/*"],
            "~/*": ["resources/*"]
        }
    },
    "vueCompilerOptions": {
        "experimentalSuppressInvalidJsxElementTypeErrors": true
    },
    "include": ["resources/**/*"],
    "exclude": ["public/**/*", "node_modules", "vendor"]
}

And import.meta was typed. As you can see, vite/client is referenced in types. For some reason which I don't quite get, this is no longer working unless I add /// <reference types="vite/client" /> in a .d.ts file.

iulo commented 2 years ago

same issue, add import 'vite/client' to a shared .d.ts file in project fix it.

sapphi-red commented 2 years ago

@innocenzi I was not able to reproduce it. (stackblitz) Does it still happen? Just in case, did you try "reload window" or "restart typescript server"?

innocenzi commented 2 years ago

Hey @sapphi-red, I update regularly, and it seems that it has been fixed. I'm not even sure this is Vite-related, could be just VSC or an extension.

sapphi-red commented 2 years ago

Let's close this for now as I suppose this is caused by VSCode's typescript language support.

lud-hu commented 2 years ago

Hi,

I also have this issue with the latest versions of vite and VSCode. 😢

$ npm create vite@latest my-react-app -- --template react-ts
$ cd my-react-app/
$ npm i

node 16.14.2, npm 8.5.0, typescript 4.6.4

@innocenzi Which versions do you use? I'm on the latest versions available.

cqgsm commented 2 years ago

tsconfig.config.json

lud-hu commented 2 years ago

I still get the same error message with your proposed change, @cqgsm.

benmccann commented 1 year ago

To reproduce:

git clone git@github.com:PuruVJ/kit.git
cd kit
git checkout feat/site-kit-6
cd packages/kit/test/apps/options
pnpm install
pnpm check

The error can be fixed by adding "types": ["vite/client"] in tsconfig.json as suggested above. However, it seems wrong that this is required. It can also be fixed by adding /// <reference types="vite/client" /> at the top of node_modules/vite/dist/node/index.d.ts, which seems like the better fix. However, I'm not exactly sure how to do that since it looks like this file is generated

benmccann commented 1 year ago

It turns out that having to add "types": ["vite/client"] or /// <reference types="vite/client" /> is the expected behavior: https://vitejs.dev/guide/features.html#client-types

SvelteKit is doing this on behalf of users so that users don't have to do anything: https://github.com/sveltejs/kit/blob/fd8eacde6f747d169c401b911dc6af68e2b3b74c/packages/kit/src/exports/public.d.ts#L2

The branch in my reproduction has a bug that stripped it out

vitejs / vite