Deprecation messages in Vite 5

[marvinruder]

After upgrading to Vite 5, I see the following warning messages when starting the Vite server or building with Vite:

 WARN  plugin 'vite:html' uses deprecated 'enforce' option. Use 'order' option instead.
 WARN  plugin 'vite:html' uses deprecated 'transform' option. Use 'handler' option instead.

[changweihua]

any plan to publish to npmjs.com ?

[wen403]

什么时候更新啊

[wojtekmaj]

Try vite-plugin-simple-html.
It doesn't have as many features, but doesn't produce this warning. You can consider it a "lite" version of this plugin, but maybe it will cover your needs (it covers mine!).

[webJose]

I just tried vite-plugin-simple-html. It is merely a variable replacer that looks for variables with a regular expression. It doesn't really execute EJS.

[cyz1901]

Hi @anncwb. Could you help to check and approve this pr if you have time? 😳
This may help us solve this problem.

[marvinruder]

The issue is solved for me now when adding viteNext: true to the plugin options. Thanks for the fix!

A future implementation might even be able to read the installed version of Vite and behave accordingly without the need for an explicit option (especially since future breaking changes in Vite 6+ may require an additional option viteNextNext or similar), but for now my problem is gone.

[ryomahan]

A future implementation might even be able to read the installed version of Vite and behave accordingly without the need for an explicit option (especially since future breaking changes in Vite 6+ may require an additional option viteNextNext or similar), but for now my problem is gone.

I tired to do this, but couldn't find a good way to get the version number of the vite currentily used by the external project(Maybe there are some ways to do it and I just didn't find it ).

[marvinruder]

I tired to do this, but couldn't find a good way to get the version number of the vite currentily used by the external project(Maybe there are some ways to do it and I just didn't find it ).

At least the latest version of Vite appears to export its version, so import { version } from "vite"; should do the trick.

There are some other ways to do this using Vite’s package.json, but they use Node.js APIs that are still experimental:

• import.meta.resolve("vite/package.json") returns the URL to Vite’s package.json, but uses import.meta.resolve with stability “1.2 - Release candidate” (see more)
• import vitePackageJson from "vite/package.json" assert { type: "json" }; stores Vite’s version in vitePackageJson.version, but uses JSON modules, which is at stability “1 - Experimental” (see more)

[haiweilian]

At least the latest version of Vite appears to export its version, so import { version } from "vite"; should do the trick.

There are some other ways to do this using Vite’s package.json, but they use Node.js APIs that are still experimental:

• import.meta.resolve("vite/package.json") returns the URL to Vite’s package.json, but uses import.meta.resolve with stability “1.2 - Release candidate” (see more)
• import vitePackageJson from "vite/package.json" assert { type: "json" }; stores Vite’s version in vitePackageJson.version, but uses JSON modules, which is at stability “1 - Experimental” (see more)

When vite>2 the version constant can be used. I don't want to configure ViteNext. I think #135 (comment)

[ryomahan]

When vite>2 the version constant can be used. I don't want to configure ViteNext. I think #135 (comment)

version can't be used in vite v2.x, it has been defined since v3.0，But this package needs to support vite version >=2.0.0, so we can't use this way.

[marvinruder]

When vite>2 the version constant can be used. I don't want to configure ViteNext. I think #135 (comment)

version can't be used in vite v2.x, it has been defined since v3.0，But this package needs to support vite version >=2.0.0, so we can't use this way.

But we can catch this. How about

async function getViteMajorVersion() {
  try {
    let { version } = await import("vite");
    return Number(version.split(".")[0]);
  } catch (_) {
    return 2;
  }
}

[ryomahan]

But we can catch this. How about

Yeah! I just thought of that too, I'm coding now.

[ryomahan]

There is a new question, do I need to keep the viteNext. @marvinruder @jinmao88

[marvinruder]

There is a new question, do I need to keep the viteNext. @marvinruder

@ryomahan I believe we can remove it. Even in the future, we should be able to adapt to the different behavior of major Vite versions using the function I proposed. Also, for users it is difficult to understand which versions of Vite are next.

[ryomahan]

@ryomahan I believe we can remove it. Even in the future, we should be able to adapt to the different behavior of major Vite versions using the function I proposed. Also, for users it is difficult to understand which versions of Vite are next.

My concern is whether this will affect people who have already upgraded vite-plugin-html.

[marvinruder]

@ryomahan I believe we can remove it. Even in the future, we should be able to adapt to the different behavior of major Vite versions using the function I proposed. Also, for users it is difficult to understand which versions of Vite are next.

My concern is whether this will affect people who have already upgraded vite-plugin-html.

There should be no troubles in JavaScript, additional entries in the user options object are probably ignored.

For TypeScript, we could keep the option in

vite-plugin-html/packages/core/src/typing.ts

Line 65 in ad22da1

viteNext?: boolean

and mark it as deprecated in JSDoc:

    /**
     * fit vite2+
     * 
     * @deprecated This option is no longer needed and can be safely removed from your configuration, as
     *             the plugin will automatically detect the version of Vite from now. This option will
     *             be removed in the next major version.
     */
    viteNext?: boolean;

But I am also fine with removing it entirely, the very few users of this option (which has been published for a very short time) are probably also reading this discussion.

[ryomahan]

Ok, I'll submit the PR after verifying that the code is ok.

[ryomahan]

Ok, I'll submit the PR after verifying that the code is ok.

Another tricky question, the createPlugin method is not async...

[marvinruder]

Another tricky question, the createPlugin method is not async...

I made it async and tested it, everything seemed working fine. Vite accepts async plugins (see vitejs/vite#8509, vitejs/vite#8574).

Edit: It accepts async plugins starting with version 3 – this may be a problem. In this case, we can switch from

import { … } from "vite";

to

import vite from "vite";

or

import * as vite from "vite";

and check whether vite.version is defined or not (and use vite.… in other places of the module).

[ryomahan]

Edit: It accepts async plugins starting with version 3 – this may be a problem. In this case, we can switch from

import { … } from "vite";

to

import vite from "vite";

or

import * as vite from "vite";

and check whether vite.version is defined or not (and use vite.… in other places of the module).

That's a good idea, I've spent a lot of time on how to handle asynchronous results.

[ryomahan]

finish it in #140

[zkvvv]

After upgrading to Vite 5, I see the following warning messages when starting the Vite server or building with Vite:

 WARN  plugin 'vite:html' uses deprecated 'enforce' option. Use 'order' option instead.
 WARN  plugin 'vite:html' uses deprecated 'transform' option. Use 'handler' option instead.

/**
* If you are using vite that version higher than 5.0.0-beta.13, you can set viteNext to true to align vite's config
*/
viteNext: true,