Vite is converting dynamic import statement to __import__ during build. Any way to I could fix this?

Question

I am trying to use vite in one of my existing project. After long hard work I finally managed to make everything work in development mode. But, when I tried to test the app after building scripts with vite build, all dynamic imports failed for me. The issue was, all the import statements were being converted to __import__. If I manually replace __import__ with import on built bundles, then everything works. I tried removing @vitejs/plugin-legacy but, it still did not work.

Here is my vite.config.ts file

import { UserConfigFn } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';
import FullReload from 'vite-plugin-full-reload';
import styleLint from '@amatlash/vite-plugin-stylelint';
import eslintPlugin from 'vite-plugin-eslint';
import legacy from '@vitejs/plugin-legacy';

import { resolve as _resolve, join } from 'path';

import * as tsconfig from './tsconfig.json';

const paths = tsconfig.compilerOptions.paths;

const defaultAlias = Object.keys(paths).reduce((acc, key) => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const value = paths[key][0];
  const path: string = key.replace('/*', '/');
  acc.push({
    find: path,
    replacement: _resolve(__dirname, value.replace('/*', '/').replace('.//', './')) + '/',
  });
  return acc;
}, [] as any[]);

const configFn: UserConfigFn = ({ mode, command }) => {
  const plugins =
    mode === 'development' && command === 'serve'
      ? [
          styleLint({
            exclude: ['node_modules', 'public', 'plyr.css'],
          }),
          eslintPlugin({
            fix: true,
            exclude: ['node_modules', '**/legacy.js'],
          }),
          FullReload(['config/routes.rb', 'app/views/**/*']),
        ]
      : [];
  return {
    plugins: [...plugins, legacy({}), RubyPlugin()],
    css: {
      postcss: '',
    },
    resolve: {
      alias: [
        ...defaultAlias,
        {
          find: /~(.+)/,
          replacement: join(process.cwd(), 'node_modules/$1'),
        },
      ],
    },
    build: {
      sourcemap: process.env.RAILS_ENV !== 'production',
      polyfillDynamicImport: true,
      rollupOptions: {
        output: {
          manualChunks: (id) => {
            if (id.includes('node_modules')) {
              if (id.includes('jquery')) {
                return 'jquery';
              }

              if (
                /creditcards|snabbdom-form|email-validator|format-numbe|form-serialize|phone-regex|email-regex|currency-regex|format-number|snake-case|number-format|superagent/.test(
                  id
                )
              ) {
                return 'formHelpers';
              }

              if (id.includes('chart.js')) {
                return 'chartJs';
              }

              if (id.includes('moment')) {
                return 'momentJs';
              }
              if (id.includes('imagesloaded')) {
                return 'imagesLoaded';
              }

              if (id.includes('uuid')) {
                return 'uuid';
              }

              if (id.includes('flimflam')) {
                return 'flimflam';
              }

              if (/cropperjs|guillotine/.test(id)) {
                return 'imageHelpers';
              }

              if (/ff-dashboard|ff-file-uploader/.test(id)) {
                return 'ffDashboard';
              }

              return 'vendor';
            }
          },
        },
      },
    },
    clearScreen: false,
  };
};

export default configFn;

Answer 1

Turns out it was because polyfillDynamicImport to true.