I’ve started a React 18 project. I did not use CRA or CRACO. I setup deps manually and configured webpack manually.

I have installed storybook 8 and added Chromatic for visual tests.

There is a config file for Chromatic chromatic.config.json with this following

{
  "projectId": "Project:${{CHROMATIC_LOCAL_PROJECT_ID}}",
  "storybookConfigDir": "src/storybook",
  "zip": true
}

My .env file

CHROMATIC_LOCAL_PROJECT_ID=my_secret_token

My package.json

"storybook": "storybook dev -p 6006 -c ./src/storybook",
"build-storybook": "storybook build -c ./src/storybook",
"test-storybook": "test-storybook -c ./src/storybook"

The problem is that I cannot make chromatic.config.json read CHROMATIC_LOCAL_PROJECT_ID variable when running visual tests.

How do I do that? Storing my token in the config file directly does not seem proper (but it works) even though it is generated by Chromatic automatically.

I tried to use .env file but it did not work. I have not found any answer on the internet.