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

Question

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

import styled from 'styled-components';

const someDiv = styled.div`...`;

现在运行时出现问题

vite build

:

vite v4.0.2 building for production...
✓ 51 modules transformed.
[commonjs--resolver] Unexpected token (1:167492) in /project/node_modules/styled-components/dist/styled-components.browser.esm.js
file: /project/node_modules/styled-components/dist/styled-components.browser.esm.js:1:167492
1: 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

所以看起来它正在尝试使用 commonjs--resolver 导入

styled-components.browser.esm.js

，但是该文件顶部有

import

语句，并且似乎很混乱。

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

更新 07/02/2023： 在 Github 讨论中，其他人注意到，当

define

中没有

vite.config.ts

块时，一切正常：https://github.com/vitejs/vite/discussions/11495。 但是，如果您确实需要在那里定义某些内容，那么这是一个有问题的解决方案。

Answer 1

我用 Vite 打开了一个 bug 报告，结果发现问题在于

define

的工作原理，它用 vite 配置中的

define

中的内容替换了所有地方的“进程”一词，导致语法/令牌错误。

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

Answer 2

来自 Vite 文档：https://vitejs.dev/guide/env-and-mode.html

• 对于 JavaScript 字符串，您可以使用 Unicode 零宽度空格来分隔字符串，例如'导入.meta\u200b.env.MODE'。

• 对于 Vue 模板或其他编译为 JavaScript 字符串的 HTML，您可以使用该标签，例如导入.meta.env.MODE

所以我的

define

变成了：

 define: {
    'process.<wbr>env': {}