reactjs - Vite com PNPM falha devido à análise de importação no pacote `node_modules/.pnpm`
Usar PNPM e Vite em um monorepo resulta no seguinte problema, eu não faço ideia de que tipo de abominação seja este [email _@[email , provavelmente alguma estranheza do PNPM. Existe alguma maneira de desativar essa verificação das bibliotecas?
9:02:46 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS s
yntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
Plugin: vite:import-analysis
File: /project/node_modules/.pnpm/[email _@[email /node_modules/vite/dist/clie
nt/env.mjs:4:0
1 | const context = (() => {
| ^
2 | if (typeof globalThis !== 'undefined') {
3 | return globalThis;
at formatError (project/node_modules/.pnpm/[email _@[email /node_m
odules/vite/dist/node/chunks/dep-df561101.js:43993:46)
at TransformContext.error (project/node_modules/.pnpm/[email _@types+node@20
.7.0/node_modules/vite/dist/node/chunks/dep-df561101.js:43989:19)
at TransformContext.transform (project/node_modules/.pnpm/[email _@types+nod
[email /node_modules/vite/dist/node/chunks/dep-df561101.js:41740:22)
at async Object.transform (project/node_modules/.pnpm/[email _@types+node@20
.7.0/node_modules/vite/dist/node/chunks/dep-df561101.js:44283:30)
at async loadAndTransform (project/node_modules/.pnpm/[email _@types+node@20
.7.0/node_modules/vite/dist/node/chunks/dep-df561101.js:54950:29)
Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to
name the file with the .jsx or .tsx extension.
O que são esses pacotes +?
Aqui está meu tsconfig resolvido
{
"compilerOptions": {
"composite": false,
"declaration": true,
"declarationMap": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"inlineSources": false,
"isolatedModules": true,
"preserveWatchOutput": true,
"strictNullChecks": true,
"skipLibCheck": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"target": "es2020",
"useDefineForClassFields": true,
"lib": [
"es2020",
"dom",
"dom.iterable"
],
"module": "esnext",
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./",
"paths": {
"@dashboard/*": [
"./src/*"
]
}
},
"references": [
{
"path": "./tsconfig.node.json"
}
],
"files": [
"./src/main.tsx",
...
],
"include": [
"src"
],
"exclude": [
"node_modules"
]
}
tsconfig.node.ts{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
Estou usando o plugin vite-swc-react.
Dependências de desenvolvimento
"typescript": "5.1.6",
"vite": "^4.4.5",
"@vitejs/plugin-react-swc": "^3.3.2",
Eu não preciso necessariamente de uma solução, apenas uma indicação do que está acontecendo, pois atualmente estou completamente perdido. Não há documentação ou qualquer coisa documentando um comportamento semelhante.
Resposta #1
A resposta estava totalmente fora do contexto, meus defines estavam faltando JSON.stringify... O erro é completamente enganoso, mas pelo menos está resolvido, deixando isso aqui para qualquer outra alma infeliz que encontre isso.
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@dashboard": path.resolve(__dirname, "./src"),
},
},
define: {
'global': {},
'process.env.ENVIRONMENT': JSON.stringify(process.env.ENVIRONMENT),
}
});
