How to fix Vite build / syntax error "Unexpected token" in third party dependencies?

Question

I'm trying to create a production build of my React application with Vite. When I run the npm run dev command, the app will start and seems to work as it should, but during the build I always get these kind of parser errors by some third party dependencies, telling that it includes an unexpected token.

I'm using node 19.1.0.

Am I missing something in my config file or what could it be?

[commonjs--resolver] Unexpected token (705:2) in C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/axios/lib/utils.js
file: C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/axios/lib/utils.js:705:2
703:   toFiniteNumber,
704:   findKey,
705:   global: _global,
       ^
706:   isContextDefined,
707:   ALPHABET,
error during build:
SyntaxError: Unexpected token (705:2) in C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/axios/lib/utils.js
    at pp$4.raise (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20972:13)
    at pp$9.unexpected (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:18273:8)
    at pp$5.parseIdent (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20903:10)
    at pp$5.parsePropertyName (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20707:109)
    at pp$5.parseProperty (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20634:8)
    at pp$5.parseObj (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20597:21)
    at pp$5.parseExprAtom (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20332:17)
    at pp$5.parseExprSubscripts (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20148:19)
    at pp$5.parseMaybeUnary (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20114:17)
    at pp$5.parseExprOps (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20041:19)

The project was initialized with React and TypeScript. I had to configure polyfills for several libs that required node dependencies. The vite.config.ts looks like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        host: true, // Here
        strictPort: true,
        port: 8080
    },
    resolve: {
        alias: {
            './runtimeConfig': './runtimeConfig.browser'
        }
    },
    define: {
        global: ({})
    }
})

Here is the package.json:

{
  "name": "acc-ctv-front",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "env-cmd -f .env.np vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "prepare": "husky install",
    "cy:open": "cypress open",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^4.3.4",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.14",
    "@types/styled-components": "^5.1.26",
    "aws-amplify": "^5.0.9",
    "axios": "^1.2.2",
    "cypress": "^12.3.0",
    "env-cmd": "^10.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.8.0",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.8.1",
    "rollup-plugin-node-resolve": "^5.2.0",
    "styled-components": "^5.3.9",
    "styled-media-query": "^2.1.2",
    "wouter": "^2.10.0-alpha.1"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.3.0",
    "@commitlint/config-conventional": "^17.3.0",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@typescript-eslint/eslint-plugin": "^5.48.0",
    "@typescript-eslint/parser": "^5.48.0",
    "@vitejs/plugin-react": "^3.0.0",
    "devmoji": "^2.3.0",
    "eslint": "^8.31.0",
    "eslint-plugin-react": "^7.31.11",
    "husky": "^8.0.2",
    "prettier": "^2.8.1",
    "typescript": "^4.9.3",
    "vite": "^4.0.0"
  }
}

score 5 · Answer 1 · answered Apr 04 '23 at 12:23

I resolved the problem, it's works for me, just change in vite.config.ts, to

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        host: true, // Here
        strictPort: true,
        port: 8080
    },
    resolve: {
        alias: {
            './runtimeConfig': './runtimeConfig.browser'
        }
    },
    define: {
        _global: ({})
    }
})

In lib from axios you need to pass global to _global

The key to why this solution works is the "define: { _global: ({}) }" it'd be nice if the solution didn't indicate you need to replace the entire config — General Sirhc, Aug 07 '23 at 22:11

score 2 · Answer 2 · answered May 17 '23 at 14:29

2

enter image description here

I have encountered such error and resolved by

define: { _global: ({}), }, in vite.config.ts

answered May 17 '23 at 14:29

Aleksander K

21
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 18 '23 at 04:21

score 0 · Answer 3 · answered May 11 '23 at 04:52

I am facing the very similar issue with core-js

✓ 347 modules transformed.
✓ built in 3.15s
[commonjs--resolver] Unexpected token (56:6) in node_modules/core-js/modules/es.symbol.description.js
file: /node_modules/core-js/modules/es.symbol.description.js:56:6
54:   });
55:
56:   $({ global: true, constructor: true, forced: true }, {
          ^
57:     Symbol: SymbolWrapper
58:   });
error during build:
SyntaxError: Unexpected token (56:6) in node_modules/core-js/modules/es.symbol.description.js
    at pp$4.raise (file://node_modules/rollup/dist/es/shared/node-entry.js:21134:13)
    at pp$9.unexpected (file://node_modules/rollup/dist/es/shared/node-entry.js:18435:8)

The solution is that to use _global: '({})'

How to fix Vite build / syntax error "Unexpected token" in third party dependencies?

3 Answers3