cmseguin / rollup-plugin-react-scoped-css

A rollup plugin designed to allow scoped css to be run in react (Compatible with vite and rollup)
43 stars 6 forks source link

Trows a dynamic import warning in vite #44

Open GameBear64 opened 1 year ago

GameBear64 commented 1 year ago

When I use this it throws a warning.

image

ehasaranga commented 1 year ago

any fix for this issue?

GameBear64 commented 1 year ago

@ehasaranga I ended up just ignoring the error by adding this in my vite.config.js

const logger = createLogger();
const originalWarning = logger.warn;
logger.warn = (msg, options) => {
  // console.log(msg);
  if (
    msg.includes('import(import.meta.url).then(currentExports =>') &&
    msg.includes('The above dynamic import cannot be analyzed by Vite.')
  )
    return;
  originalWarning(msg, options);
};

Don't forget to import createLogger from vite.

soggie commented 1 year ago

For those who have trouble getting this to work, here's the full code:

import { createLogger } from 'vite'  // add "createLogger" to the list of imports from vite

// ... code ...

export default defineConfig(({ command, mode}) => {  

  const logger = createLogger()
  // ... code to overwrite the logger warnings ... 

  return {
    customLogger: logger,  // Don't forget this (https://vitejs.dev/config/shared-options.html#customlogger)

    ... your current code
  }
})
orsifrancesco commented 1 year ago

ok, let me just combine the previous two answers

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css'
import path from "path";
import { createLogger } from 'vite'

const logger = createLogger();
const originalWarning = logger.warn;
logger.warn = (msg, options) => {
  if (
    msg.includes('import(import.meta.url).then(currentExports =>') &&
    msg.includes('The above dynamic import cannot be analyzed by Vite.')
  )
    return;
  originalWarning(msg, options);
};

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    reactScopedCssPlugin()
  ],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'build',
  },
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
  customLogger: logger
})