Vue Typescript starter - import.meta.env unusuable

[zefman]

Hey currently you cannot use Vite's enviroment variables with the Vue typescript starter because the the tsconfig module option is set to "CommonJS".

tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "module": "CommonJS",
    "target": "ES2020",
    "lib": ["DOM"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "~/*": ["./src/*"]
    },
  },
  "ts-node": {
    "transpileOnly": true
  }
}

Is there a way around this?

[brillout]

Would declare global do the trick? Otherwise overriding by defining a separate pages/tsconfig.js?

[zefman]

Unfortunately neither of those suggestions seem to work. If I ignore the the typescript errors and log import.meta it is missing the env object as well. I'm not too clear on how this is all working with Vite (first time using it) but will continue to poke around to see if I can figure it out.

[brillout]

Have you seen https://github.com/brillout/vite-plugin-ssr#env-files?

[brillout]

See d478bec for how to change your tsconfig.json to support import.meta.

Let me know if you have any other questions.

[stephensamra]

@brillout, those changes to tsconfig.json did not work for me. In server/index.ts, I'm trying to import a file from src that contains references to import.meta, and I am getting this error when I run yarn dev:

/Users/stephen/.../src/config.ts:4
    graphqlEndpoint: import.meta.env.VITE_GRAPHQL_ENDPOINT,
                            ^^^^

SyntaxError: Cannot use 'import.meta' outside a module

My tsconfig.json file:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": [
      "DOM",
    ],
    "types": [
      "vite/client"
    ],
    "baseUrl": ".",
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "ES2020",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noImplicitAny": false,
    "paths": {
      "src/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "./src",
    "./server"
  ],
  "ts-node": {
    "transpileOnly": true,
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

Any help would be appreciated, thanks.

[brillout]

But your IDE is not complaining right?

How is your yarn dev script defined?

Worst case: bisec between your project and the boilerplate until you find the root cause

[stephensamra]

Correct, the IDE no longer shows it as an error. The yarn dev script is: ts-node ./server. I will compare the project and the example and narrow it down. Thanks.

[brillout]

Seems like something's wrong with your `ts-node` not picking up the `package.json#ts-node` options. Either bisec, or dig into ts-node `node_modules/` code to see why it doesn't pick up the options.

…

On Mon, Jul 19, 2021 at 1:50 PM Stephen Samra ***@***.***> wrote: Correct, the IDE no longer shows it as an error. The yarn dev script is: ts-node ./server. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#101 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHVQRQUQIP6L5WVYNXC2WDTYQGR5ANCNFSM463XKSXQ> .

[deckchairlabs]

I didn't think import.meta would exist outside of the context of vite?

[stephensamra]

@brillout thanks, I will look into that.

[brillout]

@deckchairlabs That is correct. In particular import.meta doesn't exist in server.js. But better to have false positive than not being able to use import.meta at all.

[stephensamra]

@brillout, you were right that ts-node was not picking up the tsconfig.json#ts-node options.

Adding a console.log inside ts-node for those options showed:

{
  "transpileOnly": undefined,
  "compilerOptions": undefined
}

However, when I inline those options in the package.json script like so:

"scripts": {
  "dev": "ts-node --transpile-only --compiler-options '{\"module\":\"CommonJS\"}' ./server",
}

... it shows:

{
  "transpileOnly": true, 
  "compilerOptions": { 
    "module": "CommonJS"
  }
}

Unfortunately, even with those options set, I still get the same error so I'm still looking into it. Thanks for the help thus far though!

[brillout]

Hm, seems like a bug in ts-node. But yea you'll eventually find the problem by further digging :-)

…

On Mon, Jul 19, 2021 at 2:32 PM Stephen Samra ***@***.***> wrote: @brillout <https://github.com/brillout>, you were right that ts-node was not picking up the tsconfig.json#ts-node options. Adding a console.log inside ts-node for those options showed: { "transpileOnly": undefined, "compilerOptions": undefined} However, when I inline those options in the package.json script like so: "scripts": { "dev": "ts-node --transpile-only --compiler-options '{\"module\":\"CommonJS\"}' ./server", } ... it shows: { "transpileOnly": true, "compilerOptions": { "module": "CommonJS" }} Unfortunately, even with those options set, I still get the same error so I'm still looking into it. Thanks for the help thus far though! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#101 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHVQRWCCFFMUWFQJD7NTOLTYQLNVANCNFSM463XKSXQ> .

[chesterlaykin]

Hello , I have also get import.meta errors when running thereact-ts project.
This happens when I install npm init vite-plugin-ssr@latest (v: 0.4.36) with the react-ts option, when starting the server.

The errors I get with react-ts begin with:
[vite] warning: "import.meta" is not available in the configured target environment ("ES2017") and will be empty
and then shows where the error occured, for example:

42 |
43 |  $RefreshReg$(_c, "PageContextProvider");
44 |  if (import.meta.hot) {
   |      ^
45 |    window.$RefreshReg$ = prevRefreshReg;
46 |    window.$RefreshSig$ = prevRefreshSig;

  Plugin: vite:esbuild
  File: (myproject)/renderer/usePageContext.tsx

The "window.$RefreshReg$code comes from plugin-react\dist\index.cjs.

tsconfig has"module": "ES2020"and

"ts-node": {
    "transpileOnly": true,
    "compilerOptions": {
      "module": "CommonJS"
    }
  }

[brillout]

@chesterlaykin I can't reproduce with:

$ pnpm create vite-plugin-ssr@latest
# Select `react-ts`
$ pnpm install
$ pnpm exec tsc --noEmit

[chesterlaykin]

Here is a reproduction: .
I haven't run that "exec tsc" command though, is that required? I use yarn , but yarn exec tsc doesn't work.

I ran:
npm init vite-plugin-ssr@latest , (react-ts option)
yarn install
yarn run dev

[brillout]

Alright, I could reproduce. It's a Vite bug; the best would be to create a new GitHub ticket over at Vite's repository and reference the reproduction you made. In the meantime, you can pin Vite to 3.0.9.

[chesterlaykin]

Thanks, I posted the issue and there is a workaround mentioned,
to set esbuild.target to 'esnext' (in vite config I guess).

  esbuild: {
    target: 'esnext'
  }

which works.
Otherwise, changing tsconfig "target": to "esnext" also got rid of the error.

[brillout]

@chesterlaykin Thanks for the update 👌. Tracking issues: #461 and vitejs/vite#10167.

[bob-user]

@brillout, those changes to tsconfig.json did not work for me. In server/index.ts, I'm trying to import a file from src that contains references to import.meta, and I am getting this error when I run yarn dev:

/Users/stephen/.../src/config.ts:4
    graphqlEndpoint: import.meta.env.VITE_GRAPHQL_ENDPOINT,
                            ^^^^

SyntaxError: Cannot use 'import.meta' outside a module

My tsconfig.json file:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": [
      "DOM",
    ],
    "types": [
      "vite/client"
    ],
    "baseUrl": ".",
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "ES2020",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noImplicitAny": false,
    "paths": {
      "src/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "./src",
    "./server"
  ],
  "ts-node": {
    "transpileOnly": true,
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

Any help would be appreciated, thanks.

@stephensamra did you have any luck with that ?

[stephensamra]

@bob-user I don't remember how we got around the problem in the end, and I don't have the access to check. It's possible we ended up using dotenv to handle it.