facebook / facebook/docusaurus

Discrepancy between dev and prod build behavior (TypeError: class constructors must be invoked with 'new')

未关闭
#7,606 4 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
TypeScript
星标
66.2k
派生
10k
平均合并
1 天 3 小时
30 天内合并 PR
52

描述

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#reporting-new-issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).

### Description

I created a repo to demonstrate the issue here: https://github.com/devalbo/docusaurus-protobuf-test

I want to use the package `@protobuf-ts/plugin` to use some data in a docusaurus page. Everything was going great in dev mode. However, once I did a local build with `npm run build`/`npm run serve`, when I go to a test page, I get an error similar to the stack trace below. I have 2 test pages - one with the protobuf directly in the function call and one where it's in a called function. I see the error in both of these pages in the prod build.

I'm also not seeing this behavior if I do a fresh `create-react-app` with Typescript support and then run `npm run build`/`serve -s build`.

I figure there's something going on in the build process I'm not aware of (or able to figure out :( ) that's causing this. Is there some type of docusaurus thing I need to configure for this to work the same way in both dev and prod?

```
Uncaught (in promise) TypeError: class constructors must be invoked with 'new'
a http://localhost:3000/assets/js/46169e7c.eaa30263.js:1
5568 http://localhost:3000/assets/js/46169e7c.eaa30263.js:1
o http://localhost:3000/assets/js/runtime~main.9bc87d77.js:1
promise callback*723/u["46169e7c"]< http://localhost:3000/assets/js/main.45756f3d.js:2
d http://localhost:3000/assets/js/main.45756f3d.js:2
f http://localhost:3000/assets/js/main.45756f3d.js:2
f http://localhost:3000/assets/js/main.45756f3d.js:2
h http://localhost:3000/assets/js/main.45756f3d.js:2
preload http://localhost:3000/assets/js/main.45756f3d.js:2
N http://localhost:3000/assets/js/main.45756f3d.js:2
N http://localhost:3000/assets/js/main.45756f3d.js:2
9383 http://localhost:3000/assets/js/main.45756f3d.js:2
o http://localhost:3000/assets/js/runtime~main.9bc87d77.js:1
http://localhost:3000/assets/js/main.45756f3d.js:2
O http://localhost:3000/assets/js/runtime~main.9bc87d77.js:1
http://localhost:3000/assets/js/main.45756f3d.js:2
t http://localhost:3000/assets/js/runtime~main.9bc87d77.js:1
http://localhost:3000/assets/js/main.45756f3d.js:2
46169e7c.eaa30263.js:1:238
```

### Reproducible demo

https://github.com/devalbo/docusaurus-protobuf-test

### Steps to reproduce

See steps in repo README.

### Expected behavior

I would expect the same behavior from dev and prod builds when I use the test pages (ideally, one where I can use the `protobuf-ts` plugin), but it really sucks to not have the same results in prod as I get in dev.

### Actual behavior

I'm also not seeing this behavior if I do a fresh `create-react-app` with Typescript support and then run `npm run build`/`serve -s build`.

Stack trace below happens only on prod build when I go to test pages:

```
Uncaught (in promise) TypeError: class constructors must be invoked with 'new'
a http://localhost:3000/assets/js/46169e7c.eaa30263.js:1
5568 http://localhost:3000/assets/js/46169e7c.eaa30263.js:1
o http://localhost:3000/assets/js/runtime~main.9bc87d77.js:1
promise callback*723/u["46169e7c"]< http://localhost:3000/assets/js/main.45756f3d.js:2
d http://localhost:3000/assets/js/main.45756f3d.js:2
f http://localhost:3000/assets/js/main.45756f3d.js:2
f http://localhost:3000/assets/js/main.45756f3d.js:2
h http://localhost:3000/assets/js/main.45756f3d.js:2
preload http://localhost:3000/assets/js/main.45756f3d.js:2
N http://localhost:3000/assets/js/main.45756f3d.js:2
N http://localhost:3000/assets/js/main.45756f3d.js:2
9383 http://localhost:3000/assets/js/main.45756f3d.js:2
o http://localhost:3000/assets/js/runtime~main.9bc87d77.js:1
http://localhost:3000/assets/js/main.45756f3d.js:2
O http://localhost:3000/assets/js/runtime~main.9bc87d77.js:1
http://localhost:3000/assets/js/main.45756f3d.js:2
t http://localhost:3000/assets/js/runtime~main.9bc87d77.js:1
http://localhost:3000/assets/js/main.45756f3d.js:2
46169e7c.eaa30263.js:1:238
```

### Your environment

- Public source code: https://github.com/devalbo/docusaurus-protobuf-test
- Public site URL:
- Docusaurus version used: 2.0.0-beta.21
- Environment name and version (e.g. Chrome 89, Node.js 16.4): npm 8.5.0, node v16.14.2
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): mac OS Montery (12.4)

### Self-service

- [ ] I'd be willing to fix this bug myself.

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。