Vite CommonJS Resolver 导入 ESM 时抛出意外令牌错误

Question

我有一个 create-react-app 项目，我正在迁移到 Vite。该项目使用“样式组件”，如下所示：

\n

import styled from \'styled-components\';\n\nconst someDiv = styled.div`...`;\n

\n

现在运行时出现问题vite build：

\n

vite v4.0.2 building for production...\n\xe2\x9c\x93 51 modules transformed.\n[commonjs--resolver] Unexpected token (1:167492) in /project/node_modules/styled-components/dist/styled-components.browser.esm.js\nfile: /project/node_modules/styled-components/dist/styled-components.browser.esm.js:1:167492\n1: import{typeOf as e,isElement as t,isValidElementType as n}from"react-is";import r,{useState as o,useContext as i,useMemo as s,useEffect as a,useRef as c,createElement as u,useDebugValue as l,useLayoutEffect as d}from"react";import h from"shallowequal";import p from"@emotion/stylis";import f from"@emotion/unitless";import m from"@emotion/is-prop-valid";import y from"hoist-non-react-statics";function // ... rest of file\n

\n

所以看起来它正在尝试styled-components.browser.esm.js使用 commonjs--resolver 进行导入，但是import该文件的顶部有一些语句，并且似乎很混乱。

\n

有什么想法可能会发生“意外令牌”错误以及如何解决此问题吗？难道不应该将其导入为 ESM 吗？

\n

2023 年 7 月 2 日更新：\n在 Github 讨论中，其他人注意到，当https://github.com/vitejs/vite/discussions/11495define中没有阻塞时，一切正常。\n但是，vite.config.ts这个如果您确实需要在那里定义某些内容，那么这是一个有问题的解决方案。

\n

Answer 1

我用 Vite 打开了一份错误报告，结果发现问题在于如何define工作，它用 vite 配置中的内容替换了所有地方的“进程”一词define，导致语法/令牌错误。

详细答案在这里：https://github.com/vitejs/vite/issues/12246#issuecomment-1450153095