Giter Club home page Giter Club logo

Comments (12)

caoxiemeihao avatar caoxiemeihao commented on June 10, 2024 2

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

from vite-plugin-dynamic-import.

caoxiemeihao avatar caoxiemeihao commented on June 10, 2024 1

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

from vite-plugin-dynamic-import.

GKhelio avatar GKhelio commented on June 10, 2024 1

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

index.ts
image

dynamic-import-to-glob.ts
image

I have created the pull request #14

from vite-plugin-dynamic-import.

caoxiemeihao avatar caoxiemeihao commented on June 10, 2024

You can provide complete configuration?

from vite-plugin-dynamic-import.

abuenoinn avatar abuenoinn commented on June 10, 2024

vite config

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...

from vite-plugin-dynamic-import.

caoxiemeihao avatar caoxiemeihao commented on June 10, 2024

You can try wrapping a normalizePath()

import { normalizePath } from 'vite'

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

from vite-plugin-dynamic-import.

abuenoinn avatar abuenoinn commented on June 10, 2024

Is getting the same error

from vite-plugin-dynamic-import.

chumager avatar chumager commented on June 10, 2024

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

from vite-plugin-dynamic-import.

caoxiemeihao avatar caoxiemeihao commented on June 10, 2024

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

from vite-plugin-dynamic-import.

GKhelio avatar GKhelio commented on June 10, 2024

@caoxiemeihao A new version will be generated??

from vite-plugin-dynamic-import.

caoxiemeihao avatar caoxiemeihao commented on June 10, 2024

@GKhelio coming soon...

from vite-plugin-dynamic-import.

GKhelio avatar GKhelio commented on June 10, 2024

@caoxiemeihao thx!!

from vite-plugin-dynamic-import.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.