CODEWITHSUNDEEP
reactjsviterollupdynamic-import
Mark Hkr
Mark Hkr

Reputation: 710

Dynamic lazy imports not working on production, using Vite

I want to to dynamically import several mdx files into a react component, e.g. I have a page that requires different mdx files depending on the selected language, so only one specific file is loaded at a time:

React component:

import { lazy } from 'react'
import { language } from 'currentLanguage'

const Content = lazy(() => import(`../assets/markdown/website/${language}/content.mdx`))

export const Page = () => (
  <div>
    <Content />
  </div>
)

Vite.config.js:

import mdx from '@mdx-js/rollup'
...
  plugins: [
    mdx(),
  ],
...

So, this works fine on development, with the following error (but still works):

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

The problem is that is not working when I try to build for production (The mdx files are not processed nor added to the dist folder), and I don't know where to add a list of those mdx files so they get processed into the bundle? Or do I need to pass an option to the mdx() plugin (options.baseUrl)?

Upvotes: 9

Views: 5010

Answers (1)

houssem
houssem

Reputation: 171

If you are using Vite try removing the lazy(), and import directly. Because in any case Vite will build all of the dynamic files for production.

Upvotes: 0

Related Questions