Hello, I'm trying to move to a monorepo structure and I'm moving the folder one by one creating packages.
In the root app I have a folder icons and inside that folder I have .svg files which are imported and exported like this in a index.ts file:
import airportRound, { ReactComponent as AirportRound } from './airport-round.svg';
...
export { airportRound }
I have a function which will return one icon based on some conditions and that functions is located in
packages/utils workspace.
When I try to start the dev server (same error is when I run the build command), I get this error:
[ERROR] No loader is configured for ".svg" files: src/icons/svg//airport-round.svg.svg
Before moving the utils as package everything was working fine.
Here I have my vite.config.ts
import { PluginOption, defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
import svgr from '@svgr/rollup';
import { injectScriptConfigPlugin } from './src/utilities/injectScriptConfigPlugin';
import { visualizer } from 'rollup-plugin-visualizer';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
jsxImportSource: '@welldone-software/why-did-you-render',
}),
vanillaExtractPlugin(),
svgr(),
visualizer({
template: 'treemap', // or sunburst
open: true,
gzipSize: true,
brotliSize: true,
filename: 'analice.html',
}) as PluginOption,
injectScriptConfigPlugin(),
],
resolve: {
alias: [
{
// Needed for `useSelector` tracking in wdyr.tsx: https://github.com/welldone-software/why-did-you-render/issues/85
find: 'react-redux',
replacement: 'react-redux/dist/react-redux.js',
},
],
},
});