Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite: Support environment variables in viteFinal define config #19905

Merged
merged 6 commits into from
Nov 25, 2022

Conversation

IanVS
Copy link
Member

@IanVS IanVS commented Nov 21, 2022

Issue: Ref: https://github.com/jcollicoat/vite-storybook/issues/1

What I did

@jcollicoat discovered that setting environment variables with vite's define option inside of viteFinal had no effect. I realized this was because we were setting a define rule for import.meta.env (setting it to a stringified object of the env variables we know about before handling viteFinal), so instead of the full string replacement of import.meta.env.STORYBOOK_FOO, vite was finding import.meta.env, turning it into an object, then trying to read the FOO property, which isn't there.

This is solved by moving the call to stringifyProcessEnvs after we get viteFinal (which is actually what we do in 6.5: https://github.com/storybookjs/builder-vite/blob/5f3da981f9ac89f871afaacc052f1551c4fbdde9/packages/builder-vite/build.ts#L31-L34). Note that destructuring env vars is not supported by the webpack builder.

I also removed the fallback for XSTORYBOOK_EXAMPLE_APP which was added back when we used that variable in other places, but we no longer do, so there's no need to set it.

How to test

  • Is this testable with Jest or Chromatic screenshots?
  • Does this need a new example in the kitchen sink apps?
  • Does this need an update to the documentation?

Should I add a sandbox story to test environment variables, similar to what we have in 6.5? (https://github.com/storybookjs/builder-vite/blob/5f3da981f9ac89f871afaacc052f1551c4fbdde9/examples/react/stories/EnvironmentVariables.stories.jsx)

@ndelangen ndelangen merged commit 9cb8ba1 into next Nov 25, 2022
@ndelangen ndelangen deleted the vite/define branch November 25, 2022 09:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants