英文:
How to fix Vite build / syntax error "Unexpected token" in third party dependencies?
问题
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.
我正在尝试使用Vite创建React应用的生产构建。当我运行npm run dev命令时，应用程序启动并似乎按预期运行，但在构建过程中，我总是遇到一些第三方依赖项引发的解析错误，告诉我它包含一个意外的标记。
I'm using node 19.1.0.
我正在使用 Node 19.1.0。
Am I missing something in my config file or what could it be?
我的配置文件中是否漏掉了什么，或者可能是什么问题？
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:
该项目是使用 React 和 TypeScript 初始化的。我不得不为几个需要 Node 依赖项的库配置填充。vite.config.ts 文件如下：
Here is the package.json:
以下是package.json文件：
英文:
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"
}
}
答案1
得分: 5
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, // 在这里
strictPort: true,
port: 8080
},
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser'
}
},
define: {
_global: ({})
}
})
In lib from axios you need to pass global to _global
英文:
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
答案2
得分: 2
我遇到了这个错误，并通过在vite.config.ts中添加以下内容解决了它：
define: {
_global: ({}),
},
英文:
I have encountered such error and resolved by
define: {
_global: ({}),
},
in vite.config.ts
答案3
得分: 0
我遇到了与core-js非常相似的问题。
✓ 已转换347个模块。
✓ 在3.15秒内构建完成。
[commonjs--resolver] node_modules/core-js/modules/es.symbol.description.js 中出现意外的令牌(第56行第6列)。
文件：/node_modules/core-js/modules/es.symbol.description.js:56:6
54: });
55:
56: $({ global: true, constructor: true, forced: true }, {
^
57: Symbol: SymbolWrapper
58: });
构建期间出现错误：
SyntaxError: node_modules/core-js/modules/es.symbol.description.js 中出现意外的令牌(第56行第6列)。
在 pp$4.raise (file://node_modules/rollup/dist/es/shared/node-entry.js:21134:13)
在 pp$9.unexpected (file://node_modules/rollup/dist/es/shared/node-entry.js:18435:8)
解决方法是使用 _global: ''({})''。
英文:
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: '({})'
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论