由于 Typescript 枚举，Next.js 在 Safari 中呈现空白屏幕答案

【问题标题】：Next.js renders blank screen in Safari due to Typescript enums由于 Typescript 枚举，Next.js 在 Safari 中呈现空白屏幕
【发布时间】：2021-06-12 21:52:41
【问题描述】：

该网站在 Chrome 和 Edge 中运行良好，但在 Safari（适用于 iOS）中无法正常运行。

它会加载所有元素、样式和脚本，但什么都不显示。

经过几个小时的调试，结果证明这是由于枚举导入（不是任何特定的）。我知道这一点是因为当我删除导入时，一切都开始正常工作了。

我在一个单一的仓库中工作（使用 Yarn 工作区），所有的枚举都位于一个“共享”包中。从这个“共享”包中导入一个已经实现枚举的类可以正常工作，但是，将任何枚举直接导入网络应用程序会导致问题。

// @*/shared

// ./enums/Protocol.ts

export enum Protocol {
  ETHEREUM = 'ETHEREUM'
}

// ./index.js

...
export * from './enums';
export * from './types';
export * from './utils';
...

// @*/web

// ./modules/api/ApiClient.ts

import { Protocol } from '@*/shared'; // This does NOT work


// Here's an example that implements the enum indirectly.


// @*/shared

import { Protocol } from '../enums';

export class Wallet {
  protocol: Protocol;
}

// @*/web

// ./components/User.tsx

import { Wallet } from '@*/shared'; // This works

如果在本地定义相同的枚举，在“web”包中（不导入），这也可以。

// @*/web

// ./modules/api/ApiClient.ts

enum Protocol {
  ETHEREUM = "ETHEREUM"
}

class ApiClient {
  getWallet(protocol: Protocol, address: string) {
    ... // Also works
  }
}

没有任何错误显示，因此我真的很难找出问题所在。此外，如前所述，此问题仅存在于 Safari 中。

任何帮助将不胜感激。

【问题讨论】：

标签： reactjs typescript safari next.js yarn-workspaces

【解决方案1】：

解决了。我了解到从该“共享”包中导入（并实际使用）任何东西都会导致问题。这背后的原因是一个不受支持的正则表达式（Safari 仍然不支持lookbehind）。

总结一下：从导出格式错误/不受支持的正则表达式的包中导入 anything 会导致问题。

【讨论】：