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";