Unexpected token '.'

[Vitaminaq]

Describe the bug

上午11:51:08 [vite] Error when evaluating SSR module /src/api/index.ts:
SyntaxError: Unexpected token '.'
    at new AsyncFunction (<anonymous>)
    at instantiateModule (D:\work\kbb_ssr_hybrid\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:66543:28)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

// dep-e0fe87f8.js:66543:28
const AsyncFunction = async function () { }.constructor;
        const initModule = new AsyncFunction(`global`, ssrModuleExportsKey, ssrImportMetaKey, ssrImportKey, ssrDynamicImportKey, ssrExportAllKey, result.code + `\n//# sourceURL=${mod.url}`);
        await initModule(context.global, ssrModule, ssrImportMeta, ssrImport, ssrDynamicImport, ssrExportAll);

// index.ts
import BaseAxios from '@/utils/local-axios';
import { config, Config } from '@/utils/config';

// 获取对应baseUrl
const getBaseUrl = (key: keyof Config = 'base_url'): string => {
	return config[key] ? config[key] : key;
};

// 替换url中的占位符
export const replacePlaceholder = <P extends { [key: string]: any }>(
	url: string,
	params?: P
) => {
	if (!params) return { url };
	const p = { ...params };
	Object.keys(params).forEach((i) => {
		const key = `{${i}}`;
		if (url.match(key)) {
			url = url.replace(key, params[i]);
			delete p[i];
		}
	});
	return {
		url,
		params: p,
	};
};

export class BaseMethod extends BaseAxios {
	public baseUrlKey: keyof Config = 'base_url';

	public async get<P extends { [key: string]: any }, R>(
		url: string,
		params?: P,
		baseUrlKey?: keyof Config
	): Promise<R> {
		const key: keyof Config = baseUrlKey || this.baseUrlKey;
		const up = replacePlaceholder<P>(url, params);
		return this.axios.get(up.url, {
			baseURL: getBaseUrl(key),
			params: {
				...up.params
			},
		});
	}
	public async post<P, R>(
		url: string,
		params?: P,
		baseUrlKey?: keyof Config
	): Promise<R> {
		const key: keyof Config = baseUrlKey || this.baseUrlKey;
		const up = replacePlaceholder<P>(url, params);
		return this.axios.post(
			up.url,
			{
				...up.params,
			},
			{
				baseURL: getBaseUrl(key),
			}
		);
	}
	public async put<P, R>(
		url: string,
		params?: P,
		baseUrlKey?: keyof Config
	): Promise<R> {
		const key: keyof Config = baseUrlKey || this.baseUrlKey;
		const up = replacePlaceholder<P>(url, params);
		return this.axios.put(
			up.url,
			{
				...up.params,
			},
			{
				baseURL: getBaseUrl(key),
			}
		);
	}
	public delete<P, R>(
		url: string,
		params?: P,
		baseUrlKey?: keyof Config
	): Promise<R> {
		const key: keyof Config = baseUrlKey || this.baseUrlKey;
		const up = replacePlaceholder<P>(url);
		return this.axios.delete(up.url, {
			baseURL: getBaseUrl(key),
		});
	}
}

export default BaseMethod;

Updated vite version to 2.6.14，and vue version to 3.2.23，This error occurs in the development environment，Package and then run, everything will be normal

Reproduction

Company project, none

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
    Memory: 2.39 GB / 15.75 GB
  Binaries:
    Node: 16.13.0 - D:\soft\node\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.0 - D:\soft\node\npm.CMD
  Browsers:
    Edge: Chromium (96.0.1054.34)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @vitejs/plugin-legacy: ^1.4.0 => 1.6.3
    @vitejs/plugin-vue: ^1.10.1 => 1.10.1
    @vitejs/plugin-vue-jsx: ^1.1.6 => 1.3.0
    vite: 2.6.14 => 2.6.14

Used Package Manager

yarn

Logs

上午11:51:08 [vite] Error when evaluating SSR module /src/utils/local-axios.ts:
SyntaxError: Unexpected token '.'
    at new AsyncFunction (<anonymous>)
    at instantiateModule (D:\work\kbb_ssr_hybrid\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:66543:28)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
上午11:51:08 [vite] Error when evaluating SSR module /src/api/index.ts:
SyntaxError: Unexpected token '.'
    at new AsyncFunction (<anonymous>)
    at instantiateModule (D:\work\kbb_ssr_hybrid\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:66543:28)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[github-actions]

Hello @Vitaminaq. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[Vitaminaq]

demo：https://github.com/Vitaminaq/cfsw-vue-cli3.0/tree/vue3.0-ssr

[Vitaminaq]

Sorry, it's only now

[sodatea]

It's an edge case in ssrTransform https://github.com/vitejs/vite/blob/v2.7.2/packages/vite/src/node/ssr/ssrTransform.ts

https://github.com/Vitaminaq/cfsw-vue-cli3.0/blob/9f2d66e7a96b87afaca1d686512e0712ca78a287/src/utils/local-axios.ts#L1-L7

import axios, { AxiosInstance } from 'axios';
class LocalAxios {
	public axios: AxiosInstance;
}

The class public field axios shares the same name with the import binding axios, therefore it is mistakenly converted to __vite_ssr_import_0__.default, resulting in a SyntaxError.

[Vitaminaq]

Thank you. The development environment is really caused by this problem

[serialine]

src/stores/index.ts

import Vue from 'vue';
import Vuex from 'vuex';
import { storeModules } from 'stores/storeAccessor';

Vue.use(Vuex);

export const storeOptions = {
  modules: storeModules,
};

export * from 'stores/storeAccessor';

const createStore = () => new Vuex.Store(storeOptions);
export default createStore;

logs

5:30:08 PM [vite] Error when evaluating SSR module /src/stores/index.ts:
SyntaxError: Unexpected token '.'
    at new AsyncFunction (<anonymous>)
    at instantiateModule (/Users/rare/workspace/***/node_modules/vite/src/node/ssr/ssrModuleLoader.ts:171:24)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

ssr transformed

const __vite_ssr_import_0__ = await __vite_ssr_import__("vue");

const __vite_ssr_import_1__ = await __vite_ssr_import__("vuex");

const __vite_ssr_import_2__ = await __vite_ssr_import__("/src/stores/storeAccessor.ts");

__vite_ssr_import_0__.default.use(__vite_ssr_import_1__.default);
const storeOptions = {
  modules: __vite_ssr_import_2__.storeModules
};
Object.defineProperty(__vite_ssr_exports__, "storeOptions", { enumerable: true, configurable: true, get(){ return storeOptions }});
const __vite_ssr_import_3__ = await __vite_ssr_import__("/src/stores/storeAccessor.ts");
__vite_ssr_exportAll__(__vite_ssr_import_3__);
const createStore = () => new __vite_ssr_import_1__.default.Store(storeOptions);
__vite_ssr_exports__.default = createStore;

I am experiencing the same issue.
Can you tell me which part of the code above is the problem (Unexpected token '.')
or is there anything need to fix the origin source code to avoid this case?

[sapphi-red]

Closing as I confirmed that this was fixed by #6261.