builder-vite
builder-vite copied to clipboard
Published
20 hours ago •
storybookjs
storybookjs
[Help Wanted] Config Vite compiler with PostCSS, Tailwind and custom alias
Hi!,
I am triying to make more efficient my storybook build, I first tried SWC but I only had a improvent in build time not in HMR, the creator of SWC for Storybook recommend me use vite instead so I am here!, First of all thanks for your hard work. I am trying to configurate Vite with PostCSS, Tailwind and custom alias.
My OLD configuration is this:
const path = require('path');
const aliasConfig = require('../tsconfig.json');
const pathsNext = aliasConfig.compilerOptions.paths || {};
function getPaths(paths) {
const pathsSB = {};
const keys = Object.keys(paths);
keys.forEach(function (key) {
const alias = key.replace('/*', '');
const pathNext = `../${paths[key][0].replace('*', '')}`;
pathsSB[alias] = path.resolve(__dirname, pathNext);
});
return pathsSB;
}
module.exports = {
webpackFinal: async (config, { configType }) => {
config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
config.resolve.alias = {
...config.resolve.alias,
...getPaths(pathsNext),
};
return config;
},
stories: [
'../components/**/*.stories.mdx',
'../components/**/*.stories.@(js|jsx|ts|tsx)',
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
{
/**
* Fix Storybook issue with PostCSS@8
* @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
*
* Fix Storybook issue with CSS Module and PostCSS
* @see https://github.com/storybookjs/addon-postcss/issues/29
*/
name: '@storybook/addon-postcss',
options: {
styleLoaderOptions: {},
cssLoaderOptions: {
modules: true,
sourceMap: true,
importLoaders: 1,
},
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
staticDirs: ['../public', '../assets', '../stories/assets'],
framework: '@storybook/react',
core: {
builder: 'webpack5',
},
};
I followed the examples and I add the storybook-builder-vite as builder, enabled storyStoreV7 and added viteFinal instead of webpackFinal.
const path = require('path');
const aliasConfig = require('../tsconfig.json');
const pathsNext = aliasConfig.compilerOptions.paths || {};
function getPaths(paths) {
const pathsSB = {};
const keys = Object.keys(paths);
keys.forEach(function (key) {
const alias = key.replace('/*', '');
const pathNext = `../${paths[key][0].replace('*', '')}`;
pathsSB[alias] = path.resolve(__dirname, pathNext);
});
return pathsSB;
}
module.exports = {
stories: [
'../components/**/*.stories.mdx',
'../components/**/*.stories.@(js|jsx|ts|tsx)',
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
{
/**
* Fix Storybook issue with PostCSS@8
* @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
*
* Fix Storybook issue with CSS Module and PostCSS
* @see https://github.com/storybookjs/addon-postcss/issues/29
*/
name: '@storybook/addon-postcss',
options: {
styleLoaderOptions: {},
cssLoaderOptions: {
modules: true,
sourceMap: true,
importLoaders: 1,
},
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
'storybook-addon-swc',
],
staticDirs: ['../public', '../assets', '../stories/assets'],
framework: '@storybook/react',
core: {
builder: 'storybook-builder-vite',
},
features: {
storyStoreV7: true,
},
async viteFinal(config, { configType }) {
config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
config.resolve.alias = {
...config.resolve.alias,
...getPaths(pathsNext),
};
return config;
},
};
But I am receiving this error in the stories:
And in the console it show this:
yarn run v1.22.17
$ start-storybook -p 6006
info @storybook/react v6.4.13
info
info => Loading presets
info => Serving static files from ././public at /
info => Serving static files from ././assets at /
info => Serving static files from ././stories/assets at /
info => Loading custom manager config
info => Loading custom manager config
info => Using cached manager
╭────────────────────────────────────────────────────╮
│ │
│ Storybook 6.4.13 for React started │
│ 2.53 s for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://192.168.1.157:6006/ │
│ │
│ A new version (6.4.19) is available! │
│ │
│ Upgrade now: npx sb@latest upgrade │
│ │
│ Read full changelog: https://git.io/fhFYe │
│ │
╰────────────────────────────────────────────────────╯
16:52:56 [vite] Internal server error: Failed to resolve import "!style-loader!css-loader!postcss-loader!@styles/storybook.css" from ".storybook/preview.js". Does the file exist?
Plugin: vite:import-analysis
File: /Users/user/Sites/project/.storybook/preview.js
7 | * @see https://github.com/tailwindlabs/tailwindcss/issues/6314#issuecomment-1018747989
8 | */
9 | import '!style-loader!css-loader!postcss-loader!@styles/storybook.css';
| ^
10 |
11 | export const parameters = {
at formatError (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:38098:46)
at TransformContext.error (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:38094:19)
at normalizeUrl (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:69819:26)
at async TransformContext.transform (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:69959:57)
at async Object.transform (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:38334:30)
at async doTransform (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:53030:29)
I am importing my styles in preview.js
/**
* Fix Storybook issue with Tailwind
* Also is need to add stories directory to content in Tailwind config
* @see https://github.com/tailwindlabs/tailwindcss/issues/6314#issuecomment-1018747989
*/
import '!style-loader!css-loader!postcss-loader!@styles/storybook.css';
System
Environment Info:
System:
OS: macOS 12.3
CPU: (8) arm64 Apple M1 Pro
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v17.3.1/bin/yarn
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
Chrome: 99.0.4844.83
Firefox: 98.0.1
Safari: 15.4
npmPackages:
@storybook/addon-actions: ^6.4.13 => 6.4.13
@storybook/addon-docs: ^6.4.13 => 6.4.18
@storybook/addon-essentials: ^6.4.13 => 6.4.13
@storybook/addon-links: ^6.4.13 => 6.4.13
@storybook/addon-postcss: ^2.0.0 => 2.0.0
@storybook/builder-webpack5: ^6.4.13 => 6.4.13
@storybook/manager-webpack5: ^6.4.13 => 6.4.13
@storybook/react: ^6.4.13 => 6.4.13
@mdx-js/preact: ^2.1.0 => 2.1.0
storybook-builder-vite: ^0.1.21 => 0.1.21
vite: ^2.8.6 => 2.8.6
Can anyone help me? Thanks!
Hi,
Try changing the following line In your preview.js
- import '!style-loader!css-loader!postcss-loader!@styles/storybook.css';
+ import '@styles/storybook.css';
The reason for the error is that Vite doesn't understand Webpack's import loader syntax !style-loader!css-loader!postcss-loader!.
@haleksandre Hi, thanks! I also tried that before, but I had got this error. I don't understand why it says it finds the symbol "<" when it doesn't exist.
It's pretty late, but i came across the same issue and got it working with simply importing
import 'tailwindcss/tailwind.css';
instead of
import '@styles/storybook.css';
I came across this in a DaisyUI-Example (tailwind-based component library).
