vite-plugin-svgr
vite-plugin-svgr copied to clipboard
Storybook.js returning 'TypeError: Failed to fetch dynamically imported module' when leveraging vite-plugin-svgr
I am attempting to import .svg files for a storybook project and am running into an module import error. I have tried a few alternative solutions but have made no progress. It's throwing an error specifically import statement.
vite.config.ts:
export default defineConfig({
plugins: [
svgr({
svgrOptions: {
plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
svgoConfig: {
plugins: ['preset-default', 'removeTitle', 'removeDesc', 'removeDoctype', 'cleanupIds'],
},
},
include: "*.svg",
}),
react()],
resolve: {
alias: {
"@public": path.resolve(__dirname, "./public"),
"@design-tokens": path.resolve(__dirname, "./src/stories/@01-design-tokens"),
"@atoms": path.resolve(__dirname, "./src/stories/@02-atoms"),
"@molecules": path.resolve(__dirname, "./src/stories/@03-molecules"),
"@organisms": path.resolve(__dirname, "./src/stories/@04-organisms"),
"@templates": path.resolve(__dirname, "./src/stories/@05-templates"),
},
}
});
Package.json:
{
"name": "app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"storybook": "storybook dev -h ${STORYBOOK_HOST} -p ${STORYBOOK_PORT}",
"build-storybook": "storybook build",
"swa": "node node_modules/.bin/swa"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.0.17"
},
"devDependencies": {
"@azure/static-web-apps-cli": "^1.1.3",
"@storybook/addon-essentials": "^7.0.17",
"@storybook/addon-interactions": "^7.0.17",
"@storybook/addon-links": "^7.0.17",
"@storybook/blocks": "^7.0.17",
"@storybook/builder-vite": "^7.0.24",
"@storybook/manager-api": "^7.0.18",
"@storybook/react": "^7.0.17",
"@storybook/react-vite": "^7.0.17",
"@storybook/testing-library": "^0.0.14-next.2",
"@storybook/theming": "^7.0.18",
"@svgr/plugin-jsx": "^8.0.1",
"@svgr/plugin-svgo": "^8.0.1",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-react-swc": "^3.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"eslint-plugin-storybook": "^0.6.12",
"prop-types": "^15.8.1",
"sass": "^1.62.1",
"typescript": "^5.0.2",
"vite": "^4.3.2",
"vite-plugin-svgr": "^3.2.0"
}
}
import structure: import { ReactComponent as logoIcon } from "@public/logos/logoIcon.svg";
I have the same issue! It will be great to get a reliable recipe for usage storybook with vite-plugin-svgr
My storybook config:
import svgr from "vite-plugin-svgr";
/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-actions",
"@storybook/addon-jest",
{
name: "@storybook/addon-coverage",
// ToDo: not working
options: { istanbul: { exclude: ["**/DataGrid/assets/**"] } },
},
],
framework: {
name: "@storybook/react-vite",
options: {},
},
docs: {
autodocs: "tag",
},
async viteFinal(config: Record<string, any>) {
// Merge custom configuration into the default config
return mergeConfig(config, {
// Add storybook-specific dependencies to pre-optimization
optimizeDeps: {
include: ["storybook-addon-designs"],
},
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
path: require.resolve("path-browserify"),
},
},
build: {
...config.build,
assetsInlineLimit: 20,
},
plugins: [...config.plugins, svgr()],
});
},
};
export default config;
My package.json
{
"name": "ui-components",
"version": "1.0.0",
"description": "Storybook for UI components",
"main": "dist/index.mjs",
"types": "dist/index.d.mts",
"repository": {
"type": "git",
"url": "https://gitlab.com/ui-components.git"
},
"files": [
"dist",
"src/index.ts",
"src/**",
"!src/Introduction",
"!src/stories",
"!src/jest-setup.ts",
"!*.test.*",
"!**/stories/**"
],
"scripts": {
"storybook": "storybook dev -p 6006",
"chromatic": "chromatic --ci",
"semantic-release": "semantic-release",
"build": "tsup",
"tsc:typecheck": "tsc -p tsconfig.json --noEmit",
"lint": "eslint --ext .ts,.tsx src/ --fix",
"test": "jest",
"test:generate-output": "jest --json --outputFile=.jest-test-results.json || true",
"test:storybook": "test-storybook --coverage",
"shitty_debugging": "sh ./shitty_debugging.sh",
"prepare": "husky install",
"reinstall_deps": "rm -rf node_modules package-lock.json && npm cache verify && npm i && npm outdated"
},
"keywords": [],
"license": "ISC",
"dependencies": {
"@tanstack/react-table": "8.9.1",
"@types/geojson": "7946.0.10",
"@types/lodash.get": "4.4.7",
"@types/lodash.isequal": "4.5.6",
"@types/mapbox-gl": "2.7.12",
"lodash.get": "4.4.2",
"lodash.isequal": "4.5.0",
"mapbox-gl": "2.15.0"
},
"devDependencies": {
"@commitlint/cli": "17.6.5",
"@commitlint/config-conventional": "17.6.5",
"@semantic-release/gitlab-config": "12.0.1",
"@storybook/addon-coverage": "0.0.9",
"@storybook/addon-docs": "7.1.0",
"@storybook/addon-essentials": "7.1.0",
"@storybook/addon-interactions": "7.1.0",
"@storybook/addon-jest": "7.1.0",
"@storybook/addon-links": "7.1.0",
"@storybook/blocks": "7.1.0",
"@storybook/jest": "0.1.0",
"@storybook/manager-api": "7.1.0",
"@storybook/react": "7.1.0",
"@storybook/react-vite": "7.1.0",
"@storybook/test-runner": "0.11.0",
"@storybook/testing-library": "0.1.0",
"@storybook/theming": "7.1.0",
"@testing-library/jest-dom": "5.17.0",
"@testing-library/react": "14.0.0",
"@types/eslint": "8.44.0",
"@types/jest": "29.5.3",
"@typescript-eslint/eslint-plugin": "6.1.0",
"@typescript-eslint/parser": "6.1.0",
"chromatic": "6.19.5",
"esbuild-plugin-svgr": "^2.0.0",
"eslint": "8.45.0",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-i18next": "6.0.3",
"eslint-plugin-jest": "27.2.3",
"eslint-plugin-jest-dom": "5.0.1",
"eslint-plugin-prettier": "5.0.0",
"eslint-plugin-react": "7.33.0",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-sonarjs": "0.19.0",
"eslint-plugin-storybook": "0.6.12",
"eslint-plugin-testing-library": "5.11.0",
"husky": "8.0.3",
"jest": "29.6.1",
"jest-environment-jsdom": "29.6.1",
"path-browserify": "1.0.1",
"prettier": "3.0.0",
"semantic-release": "21.0.3",
"storybook": "7.1.0",
"storybook-addon-designs": "6.3.1",
"ts-jest": "29.1.0",
"ts-node": "10.9.1",
"tsup": "7.1.0",
"vite-plugin-svgr": "^3.2.0",
"wait-for-expect": "3.0.2"
},
"peerDependencies": {
"@emotion/react": "11.11.0",
"@emotion/styled": "11.11.0",
"@mui/icons-material": "5.14.0",
"@mui/material": "5.14.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "7.45.0",
"tss-react": "4.8.2"
},
"engines": {
"node": ">=18.16.0",
"npm": ">=9.5.0"
}
}
Did you find a solution ? I just updated vite from 2.9.x
to 3.2.7
and storybook from 6.5.x
to 7.3.2
and I have the same issue with storybook.
I'm using vite-plugin-svgr just fine in my storybook. Could someone having an issue create a small reproduction, perhaps using https://storybook.new?