Any way to hide logs about React.js dynamic lazy imports?

[perisicnikola37]

Hello.

I'm using map for dynamic lazy imports in React.js like this:

const [
  AnimatedScore,
  FireworksCanvas,
  Header,
  URLForm,
  LoadingErrorMessages,
  RadarChartSection,
  ExceededSentences,
  Footer,
  SubHeader,
] = [
  'AnimatedScore',
  'FireworksCanvas',
  'Header',
  'URLForm',
  'LoadingErrorMessages',
  'RadarChartSection',
  'ExceededSentences',
  'Footer',
  'SubHeader',
].map((component) => React.lazy(() => import(`../components/${component}`)))

I've done that because of drastical(75%) improvement in building time.

And now I have this in my terminal output:

2:57:25 PM [vite] (client) warning: invalid import "../components/${component}". A file extension must be included in the static part of the import. For example: import(`./foo/${bar}.js`).
  Plugin: vite:dynamic-import-vars
  File: /home/nikolaperisic/Desktop/dev-to-rater/analyzer/src/pages/DevToPostAnalyzer.tsx
2:57:25 PM [vite] (client) warning: 
/home/nikolaperisic/Desktop/dev-to-rater/analyzer/src/pages/DevToPostAnalyzer.tsx
40 |    "Footer",
41 |    "SubHeader"
42 |  ].map((component) => React.lazy(() => import(`../components/${component}`)));
   |                                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
43 |  const SuspenseWrapper = ({
44 |    children,
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis

Is there any way to hide this?

[sapphi-red]

I've done that because of drastical(75%) improvement in building time.

I guess it's just because those components are not bundled anymore.

Is there any way to hide this?

You can add /* @vite-ignore */ comment inside the import() call as the message says.

[perisicnikola37]

Already tried that and got the following:

48 |    return React.lazy(
49 |      () => import(
50 |        `../components/${component}.tsx`
   |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
51 |        /* @vite-ignore */
52 |      )
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

I used this:

const [
  AnimatedScore,
  FireworksCanvas,
  Header,
  URLForm,
  LoadingErrorMessages,
  RadarChartSection,
  ExceededSentences,
  Footer,
  SubHeader,
] = [
  'AnimatedScore',
  'FireworksCanvas',
  'Header',
  'URLForm',
  'LoadingErrorMessages',
  'RadarChartSection',
  'ExceededSentences',
  'Footer',
  'SubHeader',
].map((component) => {
  return React.lazy(
    () => import(`../components/${component}.tsx` /* @vite-ignore */),
  )
})

[sapphi-red]

Did you try import(/* @vite-ignore */ `../components/${component}.tsx`)?

[perisicnikola37]

Yes, I tried that. It removes the warnings in the terminal, which is good. However, when I preview the build using npm run preview, the page doesn't load properly. I'm encountering the following errors in the console:

• GET http://localhost:4173/components/Header.tsx net::ERR_ABORTED 404 (Not Found)
• Failed to fetch dynamically imported module: http://localhost:4173/components/Header.tsx

It seems like I'm running into this issue: #11804.

I guess I’ll just ignore these warnings for now...

[sapphi-red]

However, when I preview the build using npm run preview, the page doesn't load properly.

That is expected and not related to #11804. You are telling Vite to ignore the import, so you have the responsibility to map that files somehow. If you want the import to be processed by Vite, you shouldn't add /* @vite-ignore */.