when this method in node_modules

[Miofly]

i create a method to use dynamic import, when this method not in node_modules is correct。

but when this method is build and published to npm, there was something wrong

method.exp

export function generateRoutes(path, title, children, attrs?: Partial<RouteItemExtendMeta>) {
  const _attrs = pick(attrs, ['component']);
  const noInMeta = ['name', 'redirect', 'component'];
  const meta_attrs = omit(attrs, noInMeta);

  joinParentPath(children, path);

  const _routes = {
    path,
    // redirect: attrs?.redirect ? attrs.redirect : _redirect,
    children: generateChildRoutes(children, attrs?.dirName, attrs?.isIndex),
    ..._attrs,
    meta: {
      title,
      ...meta_attrs
    }
  };

  generateRouteRedirect(_routes as RouteRecordItem);

  return _routes;
}

export function generateChildRoutes(routes, dirName, isIndex) {
  const noInMeta = ['path', 'title', 'name', 'children', 'component', 'redirect'];

  return routes.map((item) => {
    const meta_item = omit(item, noInMeta);

    const _path = item.path.includes('/') ? item.path.split('/') : [item.path];

    let compPath = item.path.includes('/:') ? item.path.split('/:')[0] : item.path;

    if (item.hideParPath) {
      const compPaths = compPath.split('/');
      const deleteNum = isBoolean(item.hideParPath) ? 1 : item.hideParPath;
      compPaths.splice(compPaths.length - (deleteNum + 1), deleteNum);
      compPath = compPaths.join('/');
    }

    const comp = item.component
      ? item.component
      : (!item.generateComp && item.children?.length) || isUrl(item.path)
      ? null
      : () => import(`@/${dirName}${item?.isIndex || (!isBoolean(item?.isIndex) && isIndex) ? compPath + '/index' : compPath}.vue`);

    const route_item = {
      ...pick(item, ['path', 'redirect']),
      component: comp,
      children: item.children?.length ? generateChildRoutes(item.children, dirName, isIndex) : null,
      meta: {
        ...meta_item,
        title: item?.title || _path[_path.length - 1]
      }
    };

    delObjAttrNotExist(route_item, true);

    return route_item;
  });
}

[gabalicious]

I too am having issues trying to dynamically import from node_modules folder

[caoxiemeihao]

Who can provide a minimal reproduction repo?

[Miofly]

https://github.com/Miofly/vue-admin-plus

plugin is in vite-common-config

[fcamblor]

I'm facing the same problem when expecting vite-plugin-dynamic-import will work on some imported node_modules libs.

For instance, to reproduce :

• create a basic vite project
• install @ionic/core : npm install @ionic/core
• Import it in your index.ts file :

import { defineCustomElements as defineIonicCustomElements } from '@ionic/core/loader';

....

defineIonicCustomElements();

• Include a simple <ion-button>hello</ion-button> in your app
• You will see an error in the console :

- This error is due to the fact that a dynamic import is performed in `node_modules/@ionic/core/dist/esm-es5/index-be218d70.js` file :

... and this file is not handled properly by vite (I assume this is because it is outside of my project's scope, because located in node_modules)

[caoxiemeihao]

v1.3.0 support 👉 node_modules

[caoxiemeihao]

I'm facing the same problem when expecting vite-plugin-dynamic-import will work on some imported node_modules libs.

For instance, to reproduce :

create a basic vite project
install @ionic/core : npm install @ionic/core
Import it in your index.ts file :

Hey 👋 @fcamblor it works to me. @v1.3.0

dynamicImport({
  filter(id) {
    // `node_modules` is exclude by default, so we need to include it explicitly
    if (id.includes('node_modules/@ionic')) {
      return true
    }
  },
}),

[fcamblor]

@caoxiemeihao, I've seen your README update from yesterday but didn't got a chance to try it out before you did.

Thanks a lot for a that fast workaround ;-)

[Miofly]

@caoxiemeihao

i use latest version,Although the function is not affected, the following error will occur when starting

is seem to import type error

repo link:https://github.com/Miofly/vue-admin-plus