React(vite,ts) app Vercel Deployment Error: SyntaxError with Axios

[Jeong-yeon-Lee]

Describe the issue

I am currently working on a React-TypeScript project. I tested it locally with mocking using msw and now I am trying to deploy it on Vercel. However, during the deployment on Vercel, I keep encountering the following error related to Axios: "SyntaxError: Unexpected token (705:2) in /vercel/path0/node_modules/axios/lib/utils.js." I want to resolve this error.

I have tried the following steps to fix the error:

1. Set "strict" to "false" and "true" in tsconfig.json.
2. Added the following code to vercel.config:

{
"rewrites": [
{"source": "/(.*)", "destination": "/"}
]
}

3. Installed and used "vite-plugin-ts-checker."
4. Tried npm update related to axios (^1.3.4) error, and downgraded to axios ^1.3.3.
5. Tried to overwrite the command when building on Vercel with "npm run build," etc.

Additionally, I tried the following based on an existing Axios issue (#464):
6. Removed "default" from "export default" in nodemoduls/axios/lib/axios.js.
7. Deleted nodemodules and package.lock and reinstalled.
8. Tried adding "main": "dist/axios.js" to package.json.

However, the error remains the same, and the deployment is still not successful.
The error message points to the "export default {...,global: _global,...}" part in axios/utils.js at line 705:2.

I need help resolving this issue. Thank you.

Example Code

SyntaxError: Unexpected token (705:2) in /vercel/path0/node_modules/axios/lib/utils.js
    at pp$4.raise (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20978:13)
    at pp$9.unexpected (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:18279:8)
    at pp$5.parseIdent (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20909:10)
    at pp$5.parsePropertyName (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20713:109)
    at pp$5.parseProperty (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20640:8)
    at pp$5.parseObj (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20603:21)
    at pp$5.parseExprAtom (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20338:17)
    at pp$5.parseExprSubscripts (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20154:19)
    at pp$5.parseMaybeUnary (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20120:17)
    at pp$5.parseExprOps (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20047:19)
Error: Command "npm run build" exited with 1
BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

Expected behavior

No response

Axios Version

1.3.3.,1.3.4.

Adapter Version

HTTP

Browser

Chrome

Browser Version

111.0.5563.110(arm64)

Node.js Version

v18.14.0

OS

No response

Additional Library Versions

"dependencies": {
    "@heroicons/react": "^2.0.16",
    "@types/react-router-dom": "^5.3.3",
    "axios": "^1.3.3",
    "react": "^18.2.0",
    "react-daum-postcode": "^3.1.1",
    "react-dom": "^18.2.0",
    "react-intersection-observer": "^9.4.3",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.8.2",
    "recoil": "^0.7.7",
    "sockjs-client": "^1.6.1",
    "v6": "^0.0.0",
    "vite-plugin-ts-checker": "^0.1.5"
  },
  "devDependencies": {
    "@tailwindcss/line-clamp": "^0.4.2",
    "@types/react": "^18.0.28",
    "@types/react-cookies": "^0.1.0",
    "@types/react-dom": "^18.0.11",
    "@types/sockjs-client": "^1.5.1",
    "@types/stompjs": "^2.3.5",
    "@types/uuid": "^9.0.1",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.13",
    "daisyui": "^2.51.3",
    "msw": "^1.1.0",
    "postcss": "^8.4.21",
    "stompjs": "^2.3.3",
    "tailwind-scrollbar-hide": "^1.1.7",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  },
  "msw": {
    "workerDirectory": "public"
  }

Additional context/Screenshots

No response

[jklanica]

I ran into the same problem. Your dependencies helped me to find out what our projects have in common and to target the issue. Try removing following from vite.config.js:

define: {
  global: {}
}

This helped me.

[Charlygraphy23]

Have you tried with skipLibraryCheck

"compilerOptions": {
    "skipLibCheck": true,
    ...
 }

[Jeong-yeon-Lee]

Thank you for all your help! @Charlygraphy23 @jklanica
I was able to solve the problem by modifying the 'define' section in vite.config.ts.
If I remove this section, or change it to define: { global: "globalThis" } the build works fine and the deployment is successful without any issues.
It is suspected that there was a problem with handling axios as a global object during the vite build process.

[dasturchioka]

I am trying the both solutions but it is not working for me. Vue-js project, with Vite configuration

[quiet-ocean]

✓ 181 modules transformed.
✓ built in 10.34s
[commonjs--resolver] Missing "./dist/axios" specifier in "axios" package
error during build:
Error: Missing "./dist/axios" specifier in "axios" package
at e (file:///E:/Github/Mindmail-Dev/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:16649:25)
at n (file:///E:/Github/Mindmail-Dev/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:16649:627)
at o (file:///E:/Github/Mindmail-Dev/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:16649:1297)
at resolveExportsOrImports (file:///E:/Github/Mindmail-Dev/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:23407:20)
at resolveDeepImport (file:///E:/Github/Mindmail-Dev/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:23426:31)
at tryNodeResolve (file:///E:/Github/Mindmail-Dev/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:23115:20)
at Object.resolveId (file:///E:/Github/Mindmail-Dev/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:22876:28)
at file:///E:/Github/Mindmail-Dev/node_modules/rollup/dist/es/shared/node-entry.js:24551:40
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async PluginDriver.hookFirstAndGetPlugin (file:///E:/Github/Mindmail-Dev/node_modules/rollup/dist/es/shared/node-entry.js:24451:28)

I had error like this and fixed by:

define: {
_global: ({}),
},

in vite.config.ts

[Pentaghast666]

Adding my 2c Js not ts, i get {} global error while building at Vercel, then global error running it. I had to change BOTH vite.config.js to _global:{} AND add <script>const global = globalThis;</script> to the .html. Changing vite confdig to _global let it build, and adding the script let it run in the browser.