ERROR Unexpected token (1:0)

[ghost]

Hello,

I use vite-plugin-dynamic-import to import my .vue files into Nuxt3 (3.0.0-rc.3).

However, since version 0.9.6 and all higher versions of vite-plugin-dynamic-import, I have the following error: "ERROR Unexpected token (1:0)"

Reproduction link : https://github.com/antoineanorra/vite-plugin-dynamic-import-issue

Version >=0.9.6 not working, run this :

npm i && npm run dev

Version 0.9.5 working, run this :

npm i -D [email protected] && npm run dev

[cram0]

The same is happening to me, it would be cool to have a fix for it.

[caoxiemeihao]

Below is the order in which plugins actually run, this behavior is not freely controllable in Nuxt. :(

[ 
  'vite:pre-alias',
  'alias',
  'nuxt:vite-node-server',
  'nuxt:import-protection',
  'vite:modulepreload-polyfill',
  'vite:resolve',
  'vite:optimized-deps',
  'vite:html-inline-proxy',
  'vite:css',
  'vite:esbuild',
  'vite:json',
  'vite:wasm',
  'vite:worker',
  'vite:asset',
  'replace',
  'virtual',
  // 🐞 This should come after `vite:vue` and `vite:vue-jsx`
  'vite-plugin-dynamic-import',
  'test-plugin-order',
  'nuxt:cache-dir',
  'vite:vue',
  'vite:vue-jsx',
  'nuxt:vite-relative-asset',
  'vite:define',
  'vite:css-post',
  'vite:worker-import-meta-url',
  'nuxt:composable-keys',
  'nuxt:dynamic-base-path',
  'nuxt:dev-style-ssr',
  'unctx:transfrom',
  'nuxt:components-loader',
  'nuxt:auto-imports-transform',
  'vite:client-inject',
  'vite:import-analysis'
]

You can see the plugin execution order in the following way.

export default defineNuxtConfig({
    vite: {
        plugins: [
            dynamicImport(),
            {
                name: 'view-plugin-order',
                configResolved(conf) {
                    console.log(conf.plugins.map(p => p.name));
                },
            },
        ],
    }
})

---

Maybe we can force the order of plugins to achieve our purpose.

1. npm i -D vite-plugin-utils
2. configure the plugin into nuxt.config.ts

+ import { sortPlugin } from 'vite-plugin-utils'

export default defineNuxtConfig({
    vite: {
        plugins: [
-           dynamicImport(),
+           sortPlugin({
+               plugin: dynamicImport(),
+               names: ['vite:vue', 'vite:vue-jsx'],
+               enforce: 'post',
+           }),
        ],
    }
})

We will got the following plugins order.

[
  'vite:pre-alias',
  'alias',
  'nuxt:import-protection',
  'vite:modulepreload-polyfill',
  'vite:resolve',
  'vite:optimized-deps',
  'vite:html-inline-proxy',
  'vite:css',
  'vite:esbuild',
  'vite:json',
  'vite:wasm',
  'vite:worker',
  'vite:asset',
  'replace',
  'virtual',
  'view-plugin-order',
  'nuxt:cache-dir',
  'nuxt:vite-relative-asset',
  'vite:vue',
  'vite:vue-jsx',
  // 🎉 Work normally
  'vite-plugin-dynamic-import',
  'vite:define',
  'vite:css-post',
  'vite:worker-import-meta-url',
  'nuxt:composable-keys',
  'nuxt:dynamic-base-path',
  'unctx:transfrom',
  'nuxt:components-loader',
  'nuxt:auto-imports-transform',
  'vite:client-inject',
  'vite:import-analysis'
]

---

[caoxiemeihao]

Since v0.9.6 and later, I have removed the sortPlugin in the plugin. At the moment, this may be the wrong decision. 😅

https://github.com/vite-plugin/vite-plugin-dynamic-import/commit/db14977c0cf614f2e7908f8da793006c68b0ae1f

[ghost]

I confirm that everything works thanks to your solution, thank you @caoxiemeihao !

[noel-schenk]

Still works but now the plugins was updated: This is also the solution if your alias is not working.

// https://nuxt.com/docs/api/configuration/nuxt-config

import dynamicImport from "vite-plugin-dynamic-import";
import { sort } from "vite-plugin-utils/sort-plugin";

export default defineNuxtConfig({
  vite: {
    plugins: [
      sort({
        plugin: dynamicImport(),
        names: ["vite:vue", "vite:vue-jsx"],
        enforce: "post",
      }),
    ],
  },
});