This Plugin is not working with Vite 3.1.0 #27

haozileung · 2022-09-09T15:04:48Z

This Plugin is not working with Vite 3.1.0. I think it's related to this commit

aizawasayo · 2022-09-14T14:58:21Z

+1，Do u know how to fix it？

rex-ll · 2022-09-19T10:31:26Z

+1

dearmark · 2022-09-22T00:20:21Z

+1

Carnia · 2022-09-27T09:41:46Z

+1

badlym · 2022-09-27T10:05:38Z

怎么解决啊,我也发现这个问题了
client.js:5

   Uncaught ReferenceError: __COLOR_PLUGIN_OUTPUT_FILE_NAME__ is not defined

dearmark · 2022-09-28T05:46:06Z

@badlym 召唤天降猛男

billydong1973 · 2022-09-29T15:36:48Z

怎么解决啊,我也发现这个问题了 client.js:5
   Uncaught ReferenceError: __COLOR_PLUGIN_OUTPUT_FILE_NAME__ is not defined

同问，怎么解决啊

ifzm · 2022-10-11T06:08:08Z

+1

badlym · 2022-10-14T07:36:36Z

现在解决办法是不用这个插件了,自己写,百度找一个antdesign替换主题的办法.

badlym · 2022-10-14T07:37:06Z

作者没时间维护了估计,钱已经赚够了,名气也打响了.还是自己想办法吧

lidianlei · 2022-10-18T08:16:33Z

+1

dearmark · 2022-10-19T00:05:42Z

作者没时间维护了估计,钱已经赚够了,名气也打响了.还是自己想办法吧

虽然有这个可能，但是我觉得作者可能生活或者工作上有大变化，还是Respect吧

yangliadmin · 2022-10-22T04:22:19Z

你们哪个大神是不是可以把这个包下载下来优化一下就行了，然后重新发布一个，项目里面再重新引用一下就好了

SingleDogNo1 · 2022-11-03T09:16:20Z

先说一下我的解决方案。讲的不好请多包涵。我使用 pnpm 安装依赖，node_nodules 文件夹下会有.pnpm文件夹。其他安装方式可以打开对应的依赖包操作。
升级 vite 版本，然后打开 node_modules/.pnpm/vite-plugin-theme@0.8.6_vite@3.2.2/node_modules/vite-plugin-theme/es/client.js，修改

- const colorPluginOutputFileName = __COLOR_PLUGIN_OUTPUT_FILE_NAME__;
+ const colorPluginOutputFileName = '';
- const isProd = __PROD__;
+ const isProd =true;
- const colorPluginOptions = __COLOR_PLUGIN_OPTIONS__;
+ const colorPluginOptions = {}

即可。

问题出现在插件实现的逻辑。核心逻辑是生成好相应的 css 代码片段，然后保存成目标文件。然后通过字符串替换的方式把相应的文本插入到目标文件当中。具体逻辑对应/src/injectClientPlugin.ts80 行左右。

declare const __COLOR_PLUGIN_OPTIONS__: Options;
declare const __COLOR_PLUGIN_OUTPUT_FILE_NAME__: string;
declare const __ANTD_DARK_PLUGIN_OUTPUT_FILE_NAME__: string;
declare const __ANTD_DARK_PLUGIN_EXTRACT_CSS__: boolean;
declare const __ANTD_DARK_PLUGIN_LOAD_LINK__: boolean;
declare const __PROD__: boolean;

const colorPluginOutputFileName = __COLOR_PLUGIN_OUTPUT_FILE_NAME__;
const isProd = __PROD__;
const colorPluginOptions = __COLOR_PLUGIN_OPTIONS__;

先在目标文件中声明了一个colorPluginOutputFileName变量，然后将这个变量文本替换为最终生成好的代码。
问题出在client/client.ts中。31-36 行，ts 没有编译这几个类型，但是保留了38 行之后的赋值，因此才出现了变量为定义的现象。结合上面我的理解，作者本意应该只是为了声明了一个初始值，目的就是用做之后重写用的，换句话说，这些初始值是什么本质上没有意义。
虽然没从根本上解决，但还是希望能帮到大家。

blurries · 2022-11-05T09:34:53Z

修改vite.config.ts文件，通过环境变量定义临时解决

define: {
  ...
 //新增以下变量
  __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
  __PROD__: true,
  __COLOR_PLUGIN_OPTIONS__: {},
},

yangliadmin · 2022-11-07T01:39:13Z

nice

billydong1973 · 2022-11-08T07:02:25Z

很感谢以上提供的解决方案，目前可以运行了

tt-sevth · 2022-11-10T06:18:13Z

you can try replace "vite-plugin-theme": "^0.8.6" by "vite-plugin-theme": "github:tt-sevth/vite-plugin-theme" in package.json, then run pnpm up vite-plugin-theme.

Of course, I only use it in vite3, not tested in vite2.
And you can also fork this project to your own repository and replace github:tt-sevth/vite-plugin-theme with you project url.

enjoy it :)

billydong1973 · 2022-11-14T02:04:38Z

good job.

ifzm · 2022-11-14T04:02:30Z

you can try replace "vite-plugin-theme": "^0.8.6" by "vite-plugin-theme": "github:tt-sevth/vite-plugin-theme" in package.json, then run pnpm up vite-plugin-theme.

Of course, I only use it in vite3, not tested in vite2. And you can also fork this project to your own repository and replace github:tt-sevth/vite-plugin-theme with you project url.

enjoy it :)

nice! 👍

lgcxc · 2022-11-30T09:00:57Z

修改vite.config.ts文件，通过环境变量定义临时解决
define: {
  ...
 //新增以下变量
  __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
  __PROD__: true,
  __COLOR_PLUGIN_OPTIONS__: {},
},

我按照你的方法试了一下还是不行呢

luchanan · 2022-12-01T07:27:09Z

修改vite.config.ts文件，通过环境变量定义临时解决
define: {
  ...
 //新增以下变量
  __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
  __PROD__: true,
  __COLOR_PLUGIN_OPTIONS__: {},
},
我按照你的方法试了一下还是不行呢

放在define里面呀

jiangqx95 · 2022-12-01T09:20:15Z

我按照这样改了后可以运行，但是vite 3.0.X 系统主题切换没问题，3.1.x、3.2.x系统主题切换就不行了，其他两个主题切换没问题，控制台没有任何报错，求助大佬呀

blurries · 2022-12-01T11:33:05Z

package.json
package.txt
看看对比下版本

lgcxc · 2022-12-01T14:24:14Z

修改vite.config.ts文件，通过环境变量定义临时解决
define: {
  ...
 //新增以下变量
  __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
  __PROD__: true,
  __COLOR_PLUGIN_OPTIONS__: {},
},
我按照你的方法试了一下还是不行呢
放在define里面呀

谢谢了，看了配置明白了

jiangqx95 · 2022-12-02T03:20:16Z

package.json package.txt 看看对比下版本

我直接用你的package.json替换，还是不行，
node 14.19.3、node 17.9.1都试了
pnpm 7.17.1
windows 11
用你的package.json，然后只将 vite固定 3.0.9 版本就可以，你的没问题吗？
官网的示例 https://vben.vvbin.cn/#/dashboard/analysis 也不行了，哈哈

kirklin · 2022-12-03T08:31:29Z

package.json package.txt 看看对比下版本

我直接用你的package.json替换，还是不行， node 14.19.3、node 17.9.1都试了 pnpm 7.17.1 windows 11 用你的package.json，然后只将 vite固定 3.0.9 版本就可以，你的没问题吗？官网的示例 https://vben.vvbin.cn/#/dashboard/analysis 也不行了，哈哈

pnpm装这个 https://github.com/kirklin/vite-plugin-vben-theme

jiangqx95 · 2022-12-03T14:10:41Z

package.json package.txt 看看对比下版本

我直接用你的package.json替换，还是不行， node 14.19.3、node 17.9.1都试了 pnpm 7.17.1 windows 11 用你的package.json，然后只将 vite固定 3.0.9 版本就可以，你的没问题吗？官网的示例 https://vben.vvbin.cn/#/dashboard/analysis 也不行了，哈哈

pnpm装这个 https://github.com/kirklin/vite-plugin-vben-theme

不行，访问直接报错

kirklin · 2022-12-03T14:32:52Z

package.json package.txt 看看对比下版本

我直接用你的package.json替换，还是不行， node 14.19.3、node 17.9.1都试了 pnpm 7.17.1 windows 11 用你的package.json，然后只将 vite固定 3.0.9 版本就可以，你的没问题吗？官网的示例 https://vben.vvbin.cn/#/dashboard/analysis 也不行了，哈哈

pnpm装这个 https://github.com/kirklin/vite-plugin-vben-theme

不行，访问直接报错
要用新的依赖，把原来的删除，然后全局替换vite-plugin-theme为@kirklin/vite-plugin-vben-theme
"@kirklin/vite-plugin-vben-theme": "0.1.1",

再附上一份我的devDependencies

"devDependencies": {
"@commitlint/cli": "^17.3.0",
"@commitlint/config-conventional": "^17.3.0",
"@iconify/json": "^2.1.146",
"@iconify/utils": "^2.0.2",
"@kirklin/eslint-config": "^0.2.1",
"@kirklin/vite-plugin-vben-theme": "0.1.1",
"@purge-icons/generated": "^0.9.0",
"@types/codemirror": "^5.60.5",
"@types/crypto-js": "^4.1.1",
"@types/fs-extra": "^9.0.13",
"@types/html-to-text": "^8.1.1",
"@types/inquirer": "^8.2.5",
"@types/intro.js": "^3.0.2",
"@types/jest": "^27.5.2",
"@types/lodash-es": "^4.17.6",
"@types/mockjs": "^1.0.7",
"@types/node": "^18.11.10",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.5.0",
"@types/qs": "^6.9.7",
"@types/showdown": "^1.9.4",
"@types/sortablejs": "^1.15.0",
"@vitejs/plugin-legacy": "^2.3.1",
"@vitejs/plugin-vue": "^3.2.0",
"@vitejs/plugin-vue-jsx": "^2.1.1",
"@vue/compiler-sfc": "^3.2.45",
"@vue/test-utils": "^2.2.4",
"autoprefixer": "^10.4.13",
"commitizen": "^4.2.5",
"conventional-changelog-cli": "^2.2.2",
"cross-env": "^7.0.3",
"cz-git": "^1.3.12",
"czg": "^1.3.12",
"dotenv": "^16.0.3",
"esbuild": "^0.13.15",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"esno": "^0.14.1",
"fs-extra": "^10.1.0",
"husky": "^8.0.2",
"inquirer": "^8.2.5",
"jest": "^27.5.1",
"less": "^4.1.3",
"lint-staged": "12.3.7",
"npm-run-all": "^4.1.5",
"picocolors": "^1.0.0",
"pnpm": "^7.17.1",
"postcss": "^8.4.19",
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"prettier": "^2.8.0",
"rimraf": "^3.0.2",
"rollup": "^2.79.1",
"rollup-plugin-visualizer": "^5.8.3",
"ts-jest": "^27.1.5",
"ts-node": "^10.9.1",
"typescript": "^4.9.3",
"unplugin-auto-import": "^0.11.5",
"vite": "^3.2.4",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-imagemin": "^0.6.1",
"vite-plugin-mkcert": "^1.10.1",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-purge-icons": "^0.8.2",
"vite-plugin-pwa": "^0.13.3",
"vite-plugin-style-import": "^2.0.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vite-plugin-windicss": "^1.8.8",
"vue-eslint-parser": "^8.3.0",
"vue-tsc": "^0.33.9"
},

zhunnyWang · 2023-04-07T05:52:39Z

带来次变化的更新为https://github.com/vitejs/vite/pull/9848。
此更新自动为未优化的node_modules 导入加入hash值，因为该插件的tranform中的路径匹配方法失效。匹配不到正确路径，自然目标文件得不到更改，变量赋初始值就没办法生效。
最简单的改法，找的vite-plugin-theme打包后的transform方法，替换原有的路径匹配方法，endsWith替换为includes：
if (nid === CLIENT_PUBLIC_ABSOLUTE_PATH || nid.includes(path6) || nid.includes(path6.replace(///gi, "_")))

ma-lihui · 2023-05-19T03:44:57Z

带来次变化的更新为https://github.com/vitejs/vite/pull/9848。此更新自动为未优化的node_modules 导入加入hash值，因为该插件的tranform中的路径匹配方法失效。匹配不到正确路径，自然目标文件得不到更改，变量赋初始值就没办法生效。最简单的改法，找的vite-plugin-theme打包后的transform方法，替换原有的路径匹配方法，endsWith替换为includes： if (nid === CLIENT_PUBLIC_ABSOLUTE_PATH || nid.includes(path6) || nid.includes(path6.replace(///gi, "_")))

亲测可行，具体做法，通过pnpm patch打补丁

pnpm patch vite-plugin-theme@0.8.6

会提示一个文件路径，修改提示路径下的dist/index.js 23251行
修改完后运行命令行中提示的 pnpm patch-commit

qiaochangwei · 2023-05-19T07:06:14Z

package.json package.txt 看看对比下版本

我直接用你的package.json替换，还是不行， node 14.19.3、node 17.9.1都试了 pnpm 7.17.1 windows 11 用你的package.json，然后只将 vite固定 3.0.9 版本就可以，你的没问题吗？官网的示例 https://vben.vvbin.cn/#/dashboard/analysis 也不行了，哈哈

pnpm装这个 https://github.com/kirklin/vite-plugin-vben-theme

麻烦问一下这个插件在vben v2.10.0支持嘛？有试过嘛？

kirklin · 2023-05-19T07:42:55Z

支持的哈

qiaochangwei · 2023-05-19T08:13:26Z

支持的哈
刚刚试了一波，可行。支持一波，感谢。

github-ZH-cn · 2023-08-24T01:51:31Z

作者没时间维护了估计,钱已经赚够了,名气也打响了.还是自己想办法吧

写插件可以赚钱?

- fix bug vbenjs#27 修复 vite 升级 3 版本后插件出现变量未定义的报错。 - fix bug vbenjs#26 修复生产环境切换主题失效的问题。

Yuliang-Lee · 2024-03-26T11:53:03Z

https://www.npmjs.com/package/@xlaoyu/vite-plugin-theme 修改了问题发布了一个包

Loveyless · 2024-03-28T09:02:31Z

修改vite.config.ts文件，通过环境变量定义临时解决
define: {
  ...
 //新增以下变量
  __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
  __PROD__: true,
  __COLOR_PLUGIN_OPTIONS__: {},
},

nice bro thx

haozileung mentioned this issue Sep 9, 2022

vite2的版本的服务比较慢，导致首次加载页面时间太长，建议升级vite到3的版本 vbenjs/vue-vben-admin#2160

Closed

sapphi-red mentioned this issue Nov 14, 2022

vite3.1.0-beta.1-bug-always-pending vitejs/vite#10919

Closed

7 tasks

huangfuwenhao mentioned this issue Jul 20, 2023

Fixed variable undefined after vite upgrade version 3;Fixed Production mode switching theme failure. #30

Open

Yuliang-Lee added a commit to Yuliang-Lee/vite-plugin-theme that referenced this issue Mar 26, 2024

fix:

adcb5b6

- fix bug vbenjs#27 修复 vite 升级 3 版本后插件出现变量未定义的报错。 - fix bug vbenjs#26 修复生产环境切换主题失效的问题。

This Plugin is not working with Vite 3.1.0 #27

This Plugin is not working with Vite 3.1.0 #27

Comments

haozileung commented Sep 9, 2022

aizawasayo commented Sep 14, 2022

rex-ll commented Sep 19, 2022

dearmark commented Sep 22, 2022

Carnia commented Sep 27, 2022

badlym commented Sep 27, 2022

dearmark commented Sep 28, 2022

billydong1973 commented Sep 29, 2022

ifzm commented Oct 11, 2022

badlym commented Oct 14, 2022

badlym commented Oct 14, 2022

lidianlei commented Oct 18, 2022

dearmark commented Oct 19, 2022

yangliadmin commented Oct 22, 2022 • edited

SingleDogNo1 commented Nov 3, 2022

blurries commented Nov 5, 2022 • edited

yangliadmin commented Nov 7, 2022 via email

billydong1973 commented Nov 8, 2022

tt-sevth commented Nov 10, 2022

billydong1973 commented Nov 14, 2022

ifzm commented Nov 14, 2022

lgcxc commented Nov 30, 2022

luchanan commented Dec 1, 2022

jiangqx95 commented Dec 1, 2022 • edited

blurries commented Dec 1, 2022

lgcxc commented Dec 1, 2022

jiangqx95 commented Dec 2, 2022 • edited

kirklin commented Dec 3, 2022

jiangqx95 commented Dec 3, 2022

kirklin commented Dec 3, 2022 • edited

zhunnyWang commented Apr 7, 2023

ma-lihui commented May 19, 2023

qiaochangwei commented May 19, 2023 • edited

kirklin commented May 19, 2023

qiaochangwei commented May 19, 2023 • edited

github-ZH-cn commented Aug 24, 2023

Yuliang-Lee commented Mar 26, 2024

Loveyless commented Mar 28, 2024

yangliadmin commented Oct 22, 2022 •

edited

blurries commented Nov 5, 2022 •

edited

jiangqx95 commented Dec 1, 2022 •

edited

jiangqx95 commented Dec 2, 2022 •

edited

kirklin commented Dec 3, 2022 •

edited

qiaochangwei commented May 19, 2023 •

edited

qiaochangwei commented May 19, 2023 •

edited