This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript"

[joel-chu]

Here is the error when run vite build

[_vite_plugin_require_transform_] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (25:6)
error during build:
SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (25:6)

Our project setup is some what different, we have the vue-cli running along side vite. It's a Vue3 based project but using tsx instead of vue for component (please don't ask, I didn't start this whole thing) and I can not show you any code (company policy). Basically we are in the transitional phrase from vue-cli to vite.

Just wondering if anyone encounter the similar issue and any solution so far.

[WarrenJones]

It's becase your file has some special new syntax that babel can not convert,could you just post your file's soruce code here so I can know how to fix it

[joel-chu]

I have tried to modified your plugin to allow adding plugins to babel

import * as parser from "@babel/parser";
import traverse from "@babel/traverse";
import generate from "@babel/generator";
import * as t from '@babel/types';

export type VitePluginRequireTransformParamsType = {
	//filter files that should enter the plugin
	fileRegex?: RegExp,
	//prefix that would plugin into the requireSpecifier 
	importPrefix?: string,
	//to deal with the requireSpecifier
	importPathHandler?: Function,
	babelPlugins?: parser.ParserPlugin[]
}
export default function vitePluginRequireTransform(
	params: VitePluginRequireTransformParamsType = {}
) {

	const { 
		fileRegex = /.ts$|.tsx$/, 
		importPrefix: prefix = '_vite_plugin_require_transform_', 
		importPathHandler,
		babelPlugins
	} = params;
	/**
	 * <path,exports>
	 */
	let importMap = new Map<string, Set<string>>();
	/**
	 * {variable,path}
	 */
	let variableMather: { [key: string]: string } = {};
	/**
	* {variable,path}
	*/
	let requirePathMatcher: { [key: string]: string } = {};
	return {
		name: prefix,
		async transform(code: string, id: string) {
			let newCode = code;
			if (fileRegex.test(id)) {
				let plugins: parser.ParserPlugin[] = babelPlugins && babelPlugins.length ? babelPlugins : [];

				const ast = parser.parse(code, {
					sourceType: "module",
					plugins,
				});

But babel throw another error:

p is not interable 

And I trace it down to when babel parser checking the plugins.

[WarrenJones]

would you mind to show your minimal source code here that cause the error,so I can track on it

[joel-chu]

I would if I could :S

What did though like I show you to enable babel plugins to pass to the parser.

And I have used @babel/plugin-proposal-object-rest-spread as the plugin, then it produce the aforementioned error from babel.

I will see if I could reproduce a similar error with different set of code and show you.

[WarrenJones]

[vite_plugin_require_transform] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (25:6) error during build: SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (25:6)

[WarrenJones]

just show the code in line 25 ? and try using one of this plugin plugin(s): "jsx", "flow", "typescript".

[toplyb]

I had the same problem. hoping someone finds a solution

[WarrenJones]

I had the same problem. hoping someone finds a solution

could you create a minimal source code and paste out here so that I can know What exactly the problem provoke by