Vite with PNPM fails due to import analysis on `node_modules/.pnpm` package

285 views Asked by At

Using PNPM and Vite in a monorepo results in the following issue, I have no idea what type of abomination this [email protected]_@[email protected] are, probably some PNPM weirdness. Any way to disable this checking of the libraries?

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 protected]_@[email protected]/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 protected]_@[email protected]/node_m
odules/vite/dist/node/chunks/dep-df561101.js:43993:46)
      at TransformContext.error (project/node_modules/.pnpm/[email protected]_@types+node@20
.7.0/node_modules/vite/dist/node/chunks/dep-df561101.js:43989:19)
      at TransformContext.transform (project/node_modules/.pnpm/[email protected]_@types+nod
[email protected]/node_modules/vite/dist/node/chunks/dep-df561101.js:41740:22)
      at async Object.transform (project/node_modules/.pnpm/[email protected]_@types+node@20
.7.0/node_modules/vite/dist/node/chunks/dep-df561101.js:44283:30)
      at async loadAndTransform (project/node_modules/.pnpm/[email protected]_@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.

What are these + packages?

Here is my resolved tsconfig

{
    "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"]
}

I am using vite-swc-react plugin.

Dev deps

"typescript": "5.1.6",
"vite": "^4.4.5",
"@vitejs/plugin-react-swc": "^3.3.2",

I don't necessarily need a solution, just a pointer as to what is happening, as I am currently completely lost. There are no docs or anything documenting similar behaviour.

1

There are 1 answers

0
Nikola-Milovic On

The answer was totally unrelated, my defines were missing JSON.stringify... Error is completely misleading, but at least its solved, leaving this up for any other unfortunate soul that encounters this.

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            "@dashboard": path.resolve(__dirname, "./src"),
        },
    },
    define: {
        'global': {},
        'process.env.ENVIRONMENT': JSON.stringify(process.env.ENVIRONMENT),
    }
});