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

[velin-deity]

What are the steps to reproduce this issue?

1. Define a mutator that uses import.meta environment variables in the browser
2. 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

[melloware]

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

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

[velin-deity]

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

[melloware]

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.

[velin-deity]

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?

[melloware]

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

[velin-deity]

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?

[melloware]

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

[melloware]

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! });

[soartec-lab]

Ok, I'll take a look this too.

[soartec-lab]

@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?

[velin-deity]

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

[deity-jeroen]

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

[soartec-lab]

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

[strazdinsg]

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.

[melloware]

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.

[JovanaBozhinovska]

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

[melloware]

Not that I know of

[Vurmevska]

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

[melloware]

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

[JovanaBozhinovska]

▲ [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

[melloware]

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.

[JovanaBozhinovska]

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/

[melloware]

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>;

[JovanaBozhinovska]

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",

[melloware]

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.

[JovanaBozhinovska]

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

[melloware]

@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.

[JovanaBozhinovska]

can we expect a fix?

[melloware]

@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.

[melloware]

@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.

[melloware]

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

[velin-deity]

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

[melloware]

Ok so it broke between 6.19 and 6.20?

[JovanaBozhinovska]

yes, i tried 6.19 and there was no warning.

[melloware]

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

[spaceod]

Workaround:

1. 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,
   };

2. 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.

[melloware]

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",

[velin-deity]

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

[melloware]

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.