Dynamic imports with aliases not working running under Windows OS

[abuenoinn]

The plugin is not working when using aliases in imports under Windows, but it's working in Mac OS and Linux.

This is the error: [plugin:vite-plugin-dynamic-import] invalid import "import('@/components/${path}${name}.vue')". Variable bare imports are not supported, imports must start with ./ in the static part of the import. For example: import('./foo/${bar}.js').

vite.config.ts:

resolve: { alias: { '@': resolve(__dirname, './src'), }, },

Node: 16.15.1 Vite: 2.9.9 vite-plugin-dynamic-import: 0.9.9 OS: Windows 10

[caoxiemeihao]

You can provide complete configuration?

[abuenoinn]

In dynamic-import-to-glob I make this change for testing: if ((!glob.startsWith('./') && !glob.startsWith('../')) && (!glob.startsWith('.\\') && !glob.startsWith('..\\'))) {

The problem is in Windows path is like ..\..\..\components\etc...

[caoxiemeihao]

You can try wrapping a normalizePath()

import { normalizePath } from 'vite'

resolve: { alias: { '@': normalizePath(resolve(__dirname, './src')), }, },

[abuenoinn]

Is getting the same error

[caoxiemeihao]

I think I might need a Windows PC to reproduce the BUG 😅

[chumager]

It also happens to me with Linux debian.

[vite-plugin-dynamic-import] invalid import "import(`@/${comp}`)". Variable bare imports are not supported, imports must start with ./ in the static part of the import. For example: i
mport(`./foo/${bar}.js`).

vite.config.js:

import {createVuePlugin} from "vite-plugin-vue2";
import viteCompression from "vite-plugin-compression";
import dynamicImport from "vite-plugin-dynamic-import";
import {defineConfig, normalizePath} from "vite";
import path from "path";
import fs from "fs";

const HOST = "0.0.0.0";

import JSON5 from "json5";
import YAML from "yaml";
const baseConfig = YAML.parse(fs.readFileSync("/etc/default/itdfw.yaml", {encoding: "utf8"}));
const {config: configDir, fileType} = baseConfig;
const configPath = path.resolve(configDir, `config.${fileType}`);
const configFile = fs.readFileSync(configPath, {encoding: "utf8"});
let configObj;
switch (fileType) {
  case "yaml":
    configObj = YAML.parse(configFile);
    break;
  case "json":
    configObj = JSON.parse(configFile);
    break;
  case "json5":
    configObj = JSON5.parse(configFile);
    break;
  case "js":
    configObj = require(configPath);
    break;
  default:
    throw new Error("fileType unknown, pleas check fileType key in /etc/default/itdfw.yaml");
}
let itdConfig = {};
try {
  itdConfig = require(path.resolve(process.cwd(), "../.itdfw.js"));
} catch (e) {
  console.warn(".itdfw.js doesn't exist");
}
let protocol;
switch (configObj.Protocol) {
  case "H2":
  case "SPDY":
  case "HTTP2":
  case "HTTPS":
    protocol = "https";
    break;
  case "HTTP":
  default:
    protocol = "http";
}
process.env.VUE_APP_PROTOCOL = protocol;
const proxy = `${protocol}://${itdConfig.devHost || process.env.VUE_APP_HOST}`;
console.log("proxy:", proxy);
const {DocumentRoot} = baseConfig;
const config = defineConfig({
  base: "./",
  server: {
    host: HOST,
    proxy: {
      "/APP": {
        target: proxy,
        changeOrigin: true
      }
    }
  },
  resolve: {
    alias: [
      {
        find: "@/",
        replacement: normalizePath(path.resolve(__dirname, "src"))
      },
      {
        find: "itdfw/",
        replacement: path.resolve(__dirname, "src")
      },
      {
        find: /^ITDFW$/,
        replacement: path.resolve(__dirname)
      },
      {
        find: "default/",
        replacement: path.resolve(DocumentRoot, "DEFAULT/vue/src")
      }
    ]
  },
  plugins: [
    dynamicImport(),
    createVuePlugin({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.includes("itd-wc")
        }
      }
    }),
    viteCompression()
  ],
  build: {
    outDir: "../html"
  }
});
export default config;

node: 16.15.1 vite: 2.9.13 rollup: 2.75.6 vite-plugin-dynamic-import: 0.9.9

[caoxiemeihao]

@chumager thanks for your feedback. Can you provide a minimize Demo?

[GKhelio]

I managed to fix it by adding the normalizePath to the following two paths

index.ts

dynamic-import-to-glob.ts

I have created the pull request https://github.com/vite-plugin/vite-plugin-dynamic-import/pull/14

[GKhelio]

@caoxiemeihao A new version will be generated??

[caoxiemeihao]

@GKhelio coming soon...

[GKhelio]

@caoxiemeihao thx!!

[caoxiemeihao]

Now, vite-plugin-dynaimc-import is available.