facebook / facebook/docusaurus

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

Đang mở
#7,606 4 bình luận 1 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
66.2k
Fork
10k
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
52

Mô tả

### 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.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.