Tag: vite

Transform SVGs into React components using svgr as vite plugin

npm install --save-dev vite-plugin-svgr

// vite.config.js
import svgr from "vite-plugin-svgr";

export default {
  // ...
  plugins: [svgr()],
};

Then SVG files can be imported as React components:

import Logo from "./logo.svg?react";

If you are using TypeScript, there is also a declaration helper for better type inference:

/// <reference types="vite-plugin-svgr/client" />

 

References
https://www.npmjs.com/package/vite-plugin-svgr

Vite Server is running but not working on localhost

vite.config.ts

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import dns from 'node:dns'

dns.setDefaultResultOrder('verbatim')

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        host: '127.0.0.1'
    }
})

References
https://stackoverflow.com/questions/70694187/vite-server-is-running-but-not-working-on-localhost
https://vitejs.dev/config/server-options.html#server-host