[Bug] Missing VITE_ env vars in built storybook #489
Labels
Comments
9 tasks
|
Hi, is where we handle stringifying everything forimport.meta.env.
Can you share a minimal reproduction that demonstrates the issue you're seeing? |
|
I tried to create a repro but I'm getting a problem on the storybook prod build where Storybook renders itself instead of the sample story I provided. When ran with https://github.com/fezvrasta/storybook-builder-vite-issue-489
|
|
"vue": "^3.2.39"
|
|
@limbyungki can you share the section of your code where this is coming from? |
onMounted(() => {
if (window.kakao && window.kakao.maps) {
initMap();
} else {
const script = document.createElement('script');
script.onload = () => kakao.maps.load(initMap);
const appkey = import.meta.env.VITE_KAKAO_MAP_APP_KEY;
script.src =
'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=' + appkey;
document.head.appendChild(script);
}
}); |
|
Thanks. Do you have any kind of |
|
vite.config.js import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';
import vueI18n from '@intlify/vite-plugin-vue-i18n';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
vue(),
vueI18n({
include: path.resolve(__dirname, './src/locales/**'),
}),
VitePWA(),
vuetify({ autoImport: true }),
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
},
},
test: {
globals: true,
environment: 'jsdom',
setupFiles: 'vuetify.config.js',
deps: {
inline: ['vuetify'],
},
},
server: {
port: '3000',
},
});.storybook/main.js const path = require('path');
const { mergeConfig } = require('vite');
const vuetify = require('vite-plugin-vuetify');
module.exports = {
stories: [
'../src/**/Intro.stories.mdx',
'../src/components/stories/ui/*.stories.mdx',
'../src/components/stories/functional/*.stories.mdx',
'../src/components/stories/app/*.stories.mdx',
'../src/**/*.stories.mdx',
'../src/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'storybook-addon-vuetify3',
],
framework: '@storybook/vue3',
core: {
builder: '@storybook/builder-vite',
//builder: '@storybook/builder-webpack5',
},
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
});
return config;
},
async viteFinal(config, { configType }) {
config.resolve.alias['~storybook'] = path.resolve(__dirname);
config.resolve.alias['@'] = path.resolve(__dirname, '..', 'src');
config.plugins = [
...config.plugins,
vuetify({
autoImport: true,
}),
];
return mergeConfig(config, {
// customize the Vite config here
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
});
},
features: {
storyStoreV7: true,
},
};.storybook/preview.js import { withVuetify } from 'storybook-addon-vuetify3/dist/decorators';
import { app } from '@storybook/vue3';
import SgButton from '@/components/common/ui/SgButton.vue';
import SgRadio from '@/components/common/ui/SgRadio.vue';
import SgTitle from '@/components/common/ui/SgTitle.vue';
import SgLabel from '@/components/common/ui/SgLabel.vue';
import SgMap from '@/components/common/functional/SgMap.vue';
import SgImageViewer from '@/components/common/functional/SgImageViewer.vue';
import SgCheckbox from '@/components/common/ui/SgCheckbox.vue';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
expanded: true,
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
export const decorators = [
withVuetify,
(_) => {
// loadFonts();
app.component('SgTitle', SgTitle);
app.component('SgLabel', SgLabel);
app.component('SgMap', SgMap);
app.component('SgButton', SgButton);
app.component('SgRadio', SgRadio);
app.component('SgImageViewer', SgImageViewer);
app.component('SgCheckbox', SgCheckbox);
return {
template: `<story />`,
};
},
]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What version of
viteare you using?3.0.9
System info and storybook versions
Describe the Bug
Environment variables are not being injected into
import.meta.envon production builds (output ofbuild-storybook), they are available onstart-storybookthough).The only variables available are the ones starting with
STORYBOOK_, but others starting withVITE_and the whitelisted ones such asNODE_ENV,STORYBOOKetc are all unset.I tried to console.log the env variables in
build.tsand I see them correctly populated. It's not clear at which point they get removed/ignored.The only way to access them seems to use the
import.meta.env.VARIABLE_NAMEliteral, theimport.meta.envobject is missing them.Interestingly enough, if I add
finalConfig.define['import.meta.test'] = finalConfig.define['import.meta.env'];right after
finalConfig.defineis set with the environment variables, I can thenconsole.log(import.meta.test)and I can see the variables in it.I feel like Vite is doing something with
import.meta.env...Link to Minimal Reproducible Example
No response
Participation
The text was updated successfully, but these errors were encountered: