HeyKos
commented
3 years ago After several attempts at correcting this bug, I've opted to instead to drop storybook in favor of Docz via issue #27 .
Open HeyKos opened 3 years ago
HeyKos
commented
3 years ago After several attempts at correcting this bug, I've opted to instead to drop storybook in favor of Docz via issue #27 .
HeyKos
commented
3 years ago After attempting to use an alternative component library and documentation solution via #27, it appears that there isn't a great solution that plays well with Vite due to the lack of import.meta. The other issue is that the current Storybook release uses Webpack 4 which doesn't have support for import.meta, but there is a prerelease that is built with Webpack 5. I've attempted to target that version to see if I could get Vite and Storybook to work together, but it ended up producing the same issue. The good news is that the recent 6.2 release opens the door for custom JS bundlers like Vite. I am going to comment out storybook for the time being, and keep an eye out for the open issue that Storybook has to add a Vite Builder.
This is the error I'm currently running into:
ERROR in ./src/firebase-config.ts 2:16
Module parse failed: Unexpected token (2:16)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| var firebaseConfig = {
> apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
| appId: import.meta.env.VITE_FIREBASE_APP_ID,
| authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
@ ./src/firebase-init.ts 2:0-47 6:25-39
@ ./src/pages/home/home-page.tsx
@ ./src/pages/home/home-page.stories.tsx
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
hnagrath09
commented
3 years ago Hey @HeyKos, I also faced the same problem in my monorepo architecture where individual packages are using vitejs. I solved this by using webpack5 along with providing a path to the .env file from a package and extending the plugin in custom webpack configuration.
Here's the code of .storybook/main.js
const { resolve } = require('path');
const dotenv = require('dotenv');
const webpack = require('webpack');
dotenv.config({
path: resolve(__dirname, '../packages/safety/.env.development'),
});
module.exports = {
stories: [
'../packages/**/*.stories.mdx',
'../packages/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
core: { builder: 'webpack5' },
webpackFinal: async (config) => {
config.resolve.alias = {
src: resolve(__dirname, '../packages/safety/src'),
};
config.plugins.push(
new webpack.DefinePlugin({
'import.meta.env': JSON.stringify(process.env),
}),
);
return config;
},
};@hnagrath09 thanks for sharing your experience. I'll have to give it another try, and see what I can come up with.
HeyKos
commented
2 years ago There has been some movement with the custom vite builder for Storybook. It might be work another attempt.
shapeshifta78
commented
1 year ago Probably after upgrading to node 18 this happens for me as well using 7.0.11 of @storybook/react-vite. Whenever import.meta is used in a js the build breaks. Any ideas how to fix it?
Need to resolve issue from latest Build & Deploy Action. Details: