#import svg files from root into the workspace packages

1 messages · Page 1 of 1 (latest)

manic needle
#

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',
            },
        ],
    },
});
manic needle
#

I have just discovered the issue is when I'm importing a function from packages/utils into .css.ts files