WARNING: `import.meta is not available` after updating to 6.20.0

Question

WARNING: `import.meta is not available` after updating to 6.20.0

Opened this issue 8 months ago · 39 comments

What are the steps to reproduce this issue?

Define a mutator that uses import.meta environment variables in the browser
Run orval to generate the client

What happens?

Since orval is packaged in CJS, the CLI throws a warning that import.meta will be empty even though the function using import.meta is never executed during generation.

What were you expecting to happen?

The mutator should be executed without any warnings. Why does orval bother with linting client code?

Any logs, error output, etc?

…

Any other comments?

Somewhere between versions 6.19 and 6.23 the build-tooling for orval seems to have changed. I can't find this being mentioned in any of the release notes.

What versions are you using?

Package Version: 6.24.0

Answer 1 · 2024-01-30T11:30:17.000Z

I think yours is just a symptom of this: #886

I have a feeling you are using Vite and Vite now assumes ESM incorrectly

Answer 2 · 2024-01-30T12:58:32.000Z

I am using Vite, indeed. I'm struggling to understand how Vite impacts the work of the Orval CLI tool.

Answer 3 · 2024-01-30T12:59:53.000Z

Yeah its weird its because Vite assumes all your code and libraries are ESM modules and Orval is not...it is a CJS module right now. I don't quite fully understand the Vite bundler and how it works I have to admit.

Answer 4 · 2024-01-30T15:37:46.000Z

What I meant is that the warning is issued when running orval --config ./configs/orval.config.ts. Nothing Vite-related should be getting executed at this stage, so I don't see how the two relate. Is orval transpiling mutator files? If so, would providing a separate tsconfig help here?

Answer 5 · 2024-01-30T15:40:55.000Z

@velin-deity any help would be appreciated if you want to track this one down.

Answer 6 · 2024-01-30T15:44:06.000Z

I do want to solve the issue but I still need help understanding how the CLI works. More importantly, what actually happens when a mutator is added?

Answer 7 · 2024-01-30T15:45:41.000Z

OK I marked help wanted. I don't use mutators in my projects but maybe @soartec-lab can answer.

Answer 8 · 2024-01-30T15:47:18.000Z

oh I just checked I used an Axios Mutator with Vite and I see the same warning import.meta.env. as you I just ignore it.

import Axios, { AxiosError, RawAxiosRequestConfig } from "axios";

export const AXIOS_INSTANCE = Axios.create({ baseURL: import.meta.env.REACT_APP_API_SERVER! });

Answer 9 · 2024-01-30T23:52:02.000Z

Ok, I'll take a look this too.

Answer 10 · 2024-01-31T00:06:29.000Z

@velin-deity

If you don't mind, could you please tell me the minimal files, such as "mutator.ts" and "orval.config.js", that would allow me to reproduce this?

Answer 11 · 2024-02-05T11:00:21.000Z

@soartec-lab You should be able to reproduce here https://github.com/velin-deity/test-mutator

Answer 12 · 2024-04-15T07:16:13.000Z

Hi, this thread still has the needs_reproducer tag. Is there anything more we can do aside from @velin-deity's previous comment?

Answer 13 · 2024-04-15T10:30:39.000Z

@deity-jeroen
Thank you. I think it's going to take some time before I can look into this and start taking action.

Answer 14 · 2024-08-21T07:25:08.000Z

Hi. Any progress on this? I get warnings about import.meta.env not being available when I generate client code with orval.
This is the line I have in the apiClient.ts file which causes the warning:
export const API_V1_BASE_URL = import.meta.env.VITE_API_V1_BASE_URL;

It is Vite-related indeed.

Is there any way to run the command-line tool in ESM mode? ChatGPT suggested to set output: { format: "esm"} in the config file, but it is an obvious hallucination - there is no such option for Orval, at least not documented :D.

Answer 15 · 2024-08-21T11:40:56.000Z

I am not positive but i think its because of this: #886 I think a couple of things Orval uses like the IBM OpenAPI Validator are not being used in a ES6 kind of way etc.

Answer 16 · 2024-08-22T09:31:37.000Z

is there a workaround how to fix env import using vite?

Answer 17 · 2024-08-22T10:16:30.000Z

Not that I know of

Answer 18 · 2024-08-22T10:24:03.000Z

Looks like a blocker for using Vite + Orval. Is there a fix coming soon?

Answer 19 · 2024-08-22T10:36:29.000Z

I use Vite with Orval and it works fine. I just see the warning printed out but the code works fine.

Answer 20 · 2024-08-22T10:57:41.000Z

▲ [WARNING] "import.meta" is not available with the "cjs" output format and will be empty [empty-import-meta]

src/api/axios-config.ts:15:11:
  15 │   baseURL: import.meta.env.VITE_API_BASE_URL,

I have this warning and the generated code has localhost as url not the one in the env variables

Answer 21 · 2024-08-23T13:22:22.000Z

I am not having this issue I have two env files.

env.development

VITE_REACT_APP_API_SERVER = http://localhost:8080/
VITE_REACT_APP_VERSION=$npm_package_version

env.production

VITE_REACT_APP_API_SERVER = /
VITE_REACT_APP_VERSION=$npm_package_version

When I package my production build I see the correct value and everything is working correctly.

Answer 22 · 2024-08-23T13:56:02.000Z

export const AXIOS_INSTANCE = axios.create({
  baseURL: import.meta.env.VITE_REACT_APP_API_SERVER,
});

I have this in my axios config instance, and the generated hooks are with localhost:3005 but my env variables is

VITE_REACT_APP_API_SERVER = http://localhost:8080/

Answer 23 · 2024-08-23T14:06:08.000Z

I have the same thing...

import Axios, { AxiosError, RawAxiosRequestConfig } from 'axios';

export const AXIOS_INSTANCE = Axios.create({ baseURL: import.meta.env.REACT_APP_API_SERVER! });

export const useAxiosMutator = <T>(): ((config: RawAxiosRequestConfig) => Promise<T>) => {
	return (config: RawAxiosRequestConfig) => {
		const source = Axios.CancelToken.source();
		const promise = AXIOS_INSTANCE({
			...config,
			cancelToken: source.token
		}).then(({ data }) => data);

		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
		// @ts-ignore
		promise.cancel = () => {
			source.cancel('Query was cancelled by React Query!');
		};

		return promise;
	};
};

export default useAxiosMutator;

// In some case with react-query and swr you want to be able to override the return error type so you can also do it here like this
export type ErrorType<Error> = AxiosError<Error>;

Answer 24 · 2024-08-23T14:10:31.000Z

I just tried generating with removing and it gets the variable from env, i guess the issue is the client
client: "react-query",

i'm using tanstack

"@tanstack/react-query": "^5.51.21",
"@tanstack/react-query-devtools": "^5.51.21",
"vite": "^5.3.4",
    "orval": "^7.0.1",

Answer 25 · 2024-08-23T14:13:08.000Z

I have a fully working example here: https://github.com/melloware/quarkus-primereact uses latest TanStack Query an Axios. I am using Farm but I just switched to Farm from Vite and it was working with Vite as well. Feel free to run my code and inspect it.

Answer 26 · 2024-08-26T09:47:25.000Z

@melloware I tried you example, when i run the application the api call is not directed to the env variable

Answer 27 · 2024-08-26T11:57:31.000Z

@JovanaBozhinovska i think you are right i think mine has been accidentally working because its always serving / and I thought it was working but it was just accidentally getting lucky. So yes this is definitely an issue.

Answer 28 · 2024-08-26T12:11:35.000Z

can we expect a fix?

Answer 29 · 2024-08-26T12:17:29.000Z

@JovanaBozhinovska this is an open source project so anyone who knows how to fix the issue and willing to fix the issue can submit a fix.

Answer 30 · 2024-08-26T12:21:21.000Z

@JovanaBozhinovska Based on @velin-deity hint it happened somewhere between 6.19.0 and 6.24.0 a great start would be narrowing down exactly what version broke it by walking backwards and trying 6.23, 6.22 etc until we know exactly where it broke then we can start narrowing down which fix caused it.

Answer 31 · 2024-08-27T21:03:02.000Z

@JovanaBozhinovska were you planning on gathering the info requested above?

Answer 32 · 2024-08-29T06:24:45.000Z

@melloware It starts happening in version 6.20.0 in my reproduction repo

Answer 33 · 2024-08-29T09:07:22.000Z

Ok so it broke between 6.19 and 6.20?

Answer 34 · 2024-08-29T10:03:46.000Z

yes, i tried 6.19 and there was no warning.

Answer 35 · 2024-08-29T12:34:48.000Z

looking at the 6.20 release notes: v6.19.1...v6.20.0

I think one of the dependency updates must have broken this: #1003

Answer 36 · 2024-08-30T07:33:43.000Z

Workaround:

Replace import.meta.env with process.env in your config files:

export const config = {
  baseName: process.env.VITE_APP_BASE_NAME,
  baseUrl: process.env.VITE_APP_BASE_URL,
  apiBaseUrl: process.env.VITE_APP_API_BASE_URL,
};

In vite.config.ts, add this to expose environment variables:

define: {
  'process.env': loadEnv(mode, process.cwd()),
},

This avoids the import.meta warning and keeps things working smoothly.

Answer 37 · 2024-08-30T11:54:42.000Z

OK I use Farm which is a Vite clone written in Rust: https://www.farmfe.org/
Thanks to @spaceod i did the following.

I didn't have to touch farm.config.ts i simply had to tell Farm to run in CJS mode using set FARM_CONFIG_FORMAT=cjs then it allowed me to use process.env.VITE_REACT_APP_API_SERVER

package.json

"dev": "set FARM_CONFIG_FORMAT=cjs && farm start",
"build": "set FARM_CONFIG_FORMAT=cjs && farm build",
"preview": "set FARM_CONFIG_FORMAT=cjs && farm preview",

Answer 38 · 2024-09-05T16:50:10.000Z

@melloware Besides the workaround, should we expect an actual fix? Do you need any further input/help?

Answer 39 · 2024-09-05T17:53:50.000Z

Yep I am more than happy to accept a PR if someone wants to figure it out. I am pretty sure it's related the commit referenced above probably related to the IBM OpenApi Validator.