crcong / vite-plugin-externals

use to external resources

Hello guys ~ 👋

I'm a web developer, interested opensource.

• 🤔 Focusing on @vuejs, @vite, @typescript
• 😄 Thanks for you reading

vite-plugin-externals's Issues

When are cached files actually used?

Hey, thanks for your plugin 👋

Coming from this Storybook PR, I took a quick look at the source code of this plugin. I see it generates cached files, but I'm quite confused: I could not find where those cached files are consumed. Is there anything I could be missing?

[bug] xxx in "/index.html" can't be bundled without type="module" attribute

It correctly work but report a warning while building

<script src="xxx.js"> in "/index.html"  can't be bundled without type="module" attribute

Then I edit it as <script type="module" src="xxx.js"> but it report error:

Error: [vite]: Rollup failed to resolve import "xxx.js" from ".../index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

And here is my viteExternalsPlugin config:

    viteExternalsPlugin(
      { xxx: 'Xxx' },
      {
        disableInServe: true
      }
    )

process没有定义

尝试使用的时候，会出现process没有定义
if (process.env.NODE_ENV === 'production') {
// DCE check should happen before ReactDOM bundle executes so that
// DevTools can report bad minification during injection.
checkDCE();
module.exports = require('./cjs/react-dom.production.min.js');
} else {
module.exports = require('./cjs/react-dom.development.js');
}

在和自动导入插件同时使用时的问题优化

当我在项目中同时使用到了 unplugin-auto-import 自动导入相关 API 时, 打包的时候会因为 vite-plugin-externals 先进行外部库的处理转换，而导致 unplugin-auto-import 自动导入的 API 失效。

下面是我查看的使用自动导入 ref 时插件的执行顺序。

然后我在 node_modules 下面修改了 vite-plugin-externals 的 index.js 中关于该插件的返回对象（添加了属性enforce: 'post'）后就可以正常使用了。

希望老哥看下有没有更好的处理方法优化一下。

Provide A Way to Config Source Map Creation To Avoid Building Crash Caused By Hi-Res Sourcemap

The current config about source mapping is to create the most accurate source map which can under certain circumstances cause building failure like the following image.

The root cause is this line. By turning of hi-res this problem can be solved.
I was wondering if it is viable to provide an option to control the config of source-map generation: Like the following git diff shows

export ... from 'my-external' not supported

I tested your plugin and it's working great for imports !

However I have some use case where I do:

export { name } from 'my-external';
// or 
export { default } from 'my-external';

Right now the plugins will replace those exports with empty string.

Configurable cache directory

I have two Vite configs that use the same node_modules directory but have different externals config.
vite-plugin-externals uses a single non-configurable cache directory for both of them. So there are conflicts. And only a single plugin works correctly.

Proposal: allow to configure cache directory.

Vite itself allows it.

I am eager to bring MR to fix it.

What do you think about that?

添加filter 配置之后window.Vue 转换失败

如下配置，打包后搜索代码。发现没有window.Vue。删掉filter后打包，就有window.Vue
plugins: [
vue(),
viteExternalsPlugin(
{
vue: 'Vue',
'vue-router': 'VueRouter',
// axios: 'axios',

    }, {
      filter(code, id) {
        // console.log(id, 'pinia pinia ');
        // 处理 pinia，解决 cdn 加载 Vue 响应式丢失问题
        if (id.includes('pinia')) {
          // console.log(id, 'pinia pinia ');
          return true;
        }
        return false;
      },
      disableInServe: true,
    }
   
  ),
],

Cache not busted by changing external names

First off, thanks for making this extension public and maintaining it!

I was using this, and at some point it stopped working, and I was quite confused why. Then I reverted my code that provided the externals back to the previous name and everything worked again. It looks like the cache y'all use is not using the name as a key to bust the cache. So changing this code:

        viteExternalsPlugin({
            react: 'myReact',
        }),

to:

        viteExternalsPlugin({
            react: ['myMicrofrontendNamespace', 'react'],
        }),

the importReact function is still trying to return window.myReact even after a server restart. but removing .vite/deps fixes the issue. So I believe there's an issue in the cache logic.

TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')

I've been struggling with externals related errors while trying to import a react module I'm building with Vite. With the normal rollup externals config I kept getting Cannot read properties of null (reading 'useEffect'), so React itself being null, and with different config I got window is undefined. With this plugin these errors seem to be solved. At the moment I'm still getting this error:

TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')

It seems weird because it's also a property of the React object, which is accessable now. I can't find anything helpful about it so figured asking here. Somebody knows what I'm doing wrong?

Bit more context: I listed these packages as devDependencies and peerDependencies and they are installed in the other project, the other project is in Next, I don't think thats related to the issue though.

This is the config I'm passing:

    external({
      react: 'React',
      'react-dom': 'ReactDOM',
      'styled-components': 'styled'
    }, {
      useWindow: false,
      disableSsr: true
    })

请问vite自带的rollup配置rollupOptions和这个插件有什么区别

build: {
    rollupOptions: {
      external: ['react', 'react-dom', 'dayjs', 'antd'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          dayjs: 'dayjs',
          antd: 'antd',
        },
        paths: {
          react:
            'https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js',
          'react-dom':
            'https://unpkg.com/[email protected]/umd/react-dom.production.min.js',
          dayjs:
            'https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/dayjs.min.js',
          antd: 'https://cdnjs.cloudflare.com/ajax/libs/antd/5.9.4/antd.min.js',
        },
      },
}
    },

vite可以配置external相关，为啥还要出个插件呢？

Vite 3 version?

Just wanted to see if you had plans for a Vite 3 compatible version? It might be as simple as updating the peer dependency semver.

支持a.b.c这种情况

支持 window['a']['b']['c']

Can't resolve vitePluginExternals since 0.5.2

Dist structure has been changed, can't resolve viteExternalPlugins by the previous way.

import { viteExternalsPlugin } from 'vite-plugin-externals'

生产环境怎么配置，目前生产环境无效

0.3.3 version regular expresion cause error

when i update version from 0.3.2 to 0.3.3, i got error below

when i change /.(mjs|js|ts|vue|jsx|tsx)(?.*|)$/ to /.(mjs|js|ts|vue|jsx|tsx)$/

it will perform well

How to configure @mui v5 as external dependency

Hi I have a monorepo where a ws is configured with @mui v5 with the following configuration

but it doesn't work for me, it gives me errors with @mui

Support `export * from 'module'`

I want to external vue, but it export * from 'vue' seems doesn't handled by this plugin.

FYI. the problem was from vue-demi

error while external module export to window var with special key

I have a external module @namespace/something, and export to window var with the key @namespace/something

so I set the plugin config like this

viteExternalsPlugin({'@namespace/something' : '@namespace/something'})

and the using code like this

import { foo } from '@namespace/something'

then the code generated by the plugin go error like this

const foo = window.@namespace/something.foo

while it should be like this

const foo = window['@namespace/something'].foo

打包 vueuse 报错 RollupError: "shallowRef" is not exported by "../node_modules/vue-demi/lib/index.mjs"

对于二次封装的第三方库无效

package.json

  "dependencies": {
    "vant": "^3.4.5",
    "vue": "^3.2.25",
  }

src/plugins/vant.ts

import Vant from "vant";
export { Vant };

src/main.ts

import { createApp } from 'vue';
import App from './App.vue';

import { Vant } from '@/plugins/vant';

createApp(App).use(Vant).mount('#app');

vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteExternalsPlugin } from 'vite-plugin-externals';

export default defineConfig(async ({ mode }) => {
  return {
    plugins: [
      vue(),
      mode === 'production'
        ? viteExternalsPlugin({
            vue: 'Vue',
            vant: 'vant',
          })
        : undefined,
    ],
    },
  };
});

此时 vant 是没有被替换的。

HMR fails when I use this plugin!!

vite.config.js config

export default defineConfig({
  plugins: [
    viteExternalsPlugin({
      react: 'React',
      'react-dom': 'ReactDOM',
    }),
    reactRefresh()
]})

优化：可否像webpack external那样处理(✺ω✺)

一个关于pinia偏要适配还走vue-demi适配vue2导致的坑已经有人提了 #19 ，就不赘述了嘻嘻|･ω･)

关于处理后的代码，不配置 useWIndow: false 的话都替换成了 window[module] 就赶脚有点占字数Σ(⊙▽⊙，配置了 useWindow: true 的话不能用全局变量名引入，比如 import axios from 'axios' ，否则会报错 cannot access 'axios' before initialization ，因为变成了 const axios = axios o(╥﹏╥)o
P.S 找了各种vite的external相关插件，要么不适配vite 4，要么只在build生效，有2个像webpack那样处理的也坑死，vite-plugin-external 受rollup的zz限制只能改输出文件格式才行，另一个也有了不起的 bug

ε=(´ο｀*)))唉 3202了入vite还是心好累，各种坑，又不是本地跑个demo就完事儿(ಥ﹏ಥ)、、、、

How can I import a vue file?

With following simple App.vue file:

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="Vite + Vue" />
</template>

Vite internal server issue error as follows:

Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
10:06:42 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
  Plugin: vite:import-analysis
  File: /Volumes/devtmp/MyVue3/trial/src/App.vue:3:10
  1  |  <script setup>
  2  |  import HelloWorld from './components/HelloWorld.vue'
  3  |  </script>
     |           ^
  4  |  
  5  |  <template>
      at formatError (file:///Volumes/devtmp/MyVue3/trial/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41235:46)
      at TransformContext.error (file:///Volumes/devtmp/MyVue3/trial/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41231:19)
      at TransformContext.transform (file:///Volumes/devtmp/MyVue3/trial/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39475:22)
      at async Object.transform (file:///Volumes/devtmp/MyVue3/trial/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:30)
      at async loadAndTransform (file:///Volumes/devtmp/MyVue3/trial/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39313:29)

How have I should transformed the import of other vue component? Thank you for your help.

Vue example doesn't work

If you run npm install for the vite-plugin-externals\examples\vue example
it gives an error:
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*

How do I fix this?

Esmodule hoisting

Hi Crcong, I was using your excellent plugin in my own project, thanks for the work!

Since the esbuild used by vite is relying on the hoisted feature of esmodule, see evanw/esbuild#1395 (comment), there would a chance the error: cannot access xxx before initialization will be occurred if we just replace the import statments with const declaration inline. Any thoughts on this?

import * from 'my-external' not support

I have some external module, and have to import by star like import * from 'my-external'

while the code generated is just emty string

build完成后sourcemap失效

1. 设置 build.sourcemap 为 true
2. 进行 build
3. build 完成后，非 node_modules 下的文件sourcemap失效

查了下文档，如果需要提供sourcemap，则需要返回 map: null（未对原代码进行修改）或者返回新的 map: newMap

vite-plugin-externals/src/index.ts

Line 127 in 62bb625

return { code }

改成这样就能修复

return { code, map: null }