-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
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
[BUG] NextJS addon does not get environment variables by default #26215
Comments
@SalahAdDin Have you followed the official documentation about setting up environment variables in Storybook?: https://storybook.js.org/docs/configure/environment-variables#using-storybook-configuration |
The thing is, if we are working with NextJS, it should not require extra configuration for environment variables. |
Storybook isn't an integration into Next.js, but rather it runs as a separate App. Our APIs are mainly designed in a way to be usable across different kind of frameworks and renderers. Automatically loading your environment variables or even expose process.env to the browser automatically can be seriously dangerous. For sure, we could do whatever Next.js is doing behind the scenes to provide environment variables to the client and server bundle by following specific rules, but since an universal API to support envs already exists in Storybook and it is pretty trivial to set it up (usually did once), I don’t think we will support automatic detection of env vars for Next.js |
@valentinpalkovic OK, I tried to mock some of the NextJS required environment variables as the documentation says: env: (config) => ({
...config,
NEXT_PUBLIC_API_PORT: "6006",
}), But it always returns undefined, and it is problematic. Even this does not work:
|
I have not tried the solution mentioned in the issue. With recent Storybook main.js/ts file, it would look more like this now:
|
Does it work? |
One of my colleague just tested and this works: webpackFinal: async (config: Configuration) => {
config.plugins = config.plugins || [];
config.plugins.push(
new DefinePlugin(
Object.keys(process.env)
.filter((key) => key.startsWith('NEXT_PUBLIC_'))
.reduce(
(acc, key) => ({
...acc,
[`process.env.${key}`]: JSON.stringify(process.env[key]),
}),
{}
)
)
);
return config;
}, |
How do you manage the types? Where is the |
@valentinpalkovic I think this is something we can support easily in |
@SalahAdDin Here are the imports for TypeScript and the code: import type { StorybookConfig } from '@storybook/nextjs';
import { Configuration } from 'webpack';
const { DefinePlugin } = require('webpack');
const config: StorybookConfig = {
// The rest of your configuration goes here...
// Needed to add this so that the NEXT_PUBLIC_ env variables are available in Storybook
webpackFinal: async (config: Configuration) => {
config.plugins = config.plugins || [];
config.plugins.push(
new DefinePlugin(
Object.keys(process.env)
.filter((key) => key.startsWith('NEXT_PUBLIC_'))
.reduce(
(acc, key) => ({
...acc,
[`process.env.${key}`]: JSON.stringify(process.env[key]),
}),
{}
)
)
);
return config;
},
};
export default config; |
It requires to install the Webpack types from DefinitelyTyped, right? |
I do not know where 'webpack' comes from as it is not in your |
We are getting this issue. |
Describe the bug
We use the environment variables to set up among others, API url, base url, etc. But when launching the storybook it is unable to find the setup environment variables!
To Reproduce
Just setup and NextJS project with storybook, define any page or function to use with environment variables, create its story and run it.
System
Additional context
We are using Storybook as a workaround to test the pages with MSW, using the respective addon.
It could be fixed by applying this on the addon.
The text was updated successfully, but these errors were encountered: