Skip to content

Commit a12b81b

Browse files
yaobinwenyaobinwen
committed
Add code to reproduce the issue [_ReferenceError: proto is not defined #10_](protocolbuffers/protobuf-javascript#10)
0 parents  commit a12b81b

32 files changed

+21889
-0
lines changed

‎README.md

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
# protobuf-javascript: Try to reproduce "'proto' is not defined"
2+
3+
## Overview
4+
5+
This repository aims to reproduce the "'proto' is not defined" error as described in [_ReferenceError: proto is not defined #10_](https://github.com/protocolbuffers/protobuf-javascript/issues/10) to help the developers figure out whether there is a bug and, if there is, how to fix it.
6+
7+
There two sub-directories:
8+
9+
- `noejs` is a `node.js` native app that cannot reproduce the error.
10+
- `react-app` is a React.js app that can reproduce the error.
11+
12+
I'll first mention the other existing work in the next section and then describe how to use these two apps.
13+
14+
## Other work
15+
16+
The issue [1] [_Failed to compile. 'proto' is not defined (also 'COMPILED') #447_](https://github.com/grpc/grpc-web/issues/447) in `grpc-web` mentions a similar problem that used TypeScript. The quick workaround was to disable `eslint` as mentioned [in this comment](https://github.com/grpc/grpc-web/issues/447#issuecomment-459122012). Others in the discussion also provided alternative workarounds. See [this](https://github.com/grpc/grpc-web/issues/447#issuecomment-460420957), [this](https://github.com/grpc/grpc-web/issues/447#issuecomment-491628171), [this](https://github.com/grpc/grpc-web/issues/447#issuecomment-564285432), [this](https://github.com/grpc/grpc-web/issues/447#issuecomment-568559394), and [this](https://github.com/grpc/grpc-web/issues/447#issuecomment-586668982).
17+
18+
The issue also mentions the Pull Request [_Disable static checkers on generated js files #752_](https://github.com/grpc/grpc-web/pull/752). But note that this PR is for `grpc-web` so it only fixes the output of `--grpc-web_out` but not `--js_out`.
19+
20+
But [1] gave me the hint to try to disable `eslint` in the React.js app and that did work around the issue.
21+
22+
## How to use
23+
24+
## Environment
25+
26+
My environment:
27+
- Ubuntu 18.04 Desktop
28+
- `npm`: 6.14.15
29+
- `yarn`: 1.22.15
30+
- `node` (or `nodejs`): 14.18.2
31+
- `google-protobuf`: 3.19.4
32+
33+
### `nodejs`
34+
35+
`cd` into the sub-directory `nodejs` and run `run.sh`. This should print `good` at the end and doesn't report any error.
36+
37+
### `react-app`
38+
39+
There are two shell scripts:
40+
- `run-npm.sh`
41+
- `run-yarn.sh`
42+
43+
Running `run-npm.sh` produced the following output (which suggests `eslint` might be the cause):
44+
45+
```
46+
Failed to compile.
47+
48+
[eslint]
49+
src/foo_pb.js
50+
Line 26:1: 'proto' is not defined no-undef
51+
Line 29:15: 'proto' is not defined no-undef
52+
Line 30:20: 'COMPILED' is not defined no-undef
53+
Line 31:3: 'proto' is not defined no-undef
54+
Line 46:1: 'proto' is not defined no-undef
55+
Line 47:10: 'proto' is not defined no-undef
56+
Line 60:1: 'proto' is not defined no-undef
57+
Line 78:1: 'proto' is not defined no-undef
58+
Line 80:17: 'proto' is not defined no-undef
59+
Line 81:10: 'proto' is not defined no-undef
60+
Line 92:1: 'proto' is not defined no-undef
61+
Line 116:1: 'proto' is not defined no-undef
62+
Line 118:3: 'proto' is not defined no-undef
63+
Line 130:1: 'proto' is not defined no-undef
64+
Line 146:1: 'proto' is not defined no-undef
65+
Line 152:1: 'proto' is not defined no-undef
66+
Line 157:29: 'proto' is not defined no-undef
67+
68+
Search for the keywords to learn more about each error.
69+
WARNING in [eslint]
70+
src/App.js
71+
Line 4:7: 'proj' is assigned a value but never used no-unused-vars
72+
73+
src/foo_pb.js
74+
Line 12:14: The Function constructor is eval no-new-func
75+
Line 61:7: 'f' is defined but never used no-unused-vars
76+
Line 80:13: Missing '()' invoking a constructor new-parens
77+
78+
ERROR in [eslint]
79+
src/foo_pb.js
80+
Line 26:1: 'proto' is not defined no-undef
81+
Line 29:15: 'proto' is not defined no-undef
82+
Line 30:20: 'COMPILED' is not defined no-undef
83+
Line 31:3: 'proto' is not defined no-undef
84+
Line 46:1: 'proto' is not defined no-undef
85+
Line 47:10: 'proto' is not defined no-undef
86+
Line 60:1: 'proto' is not defined no-undef
87+
Line 78:1: 'proto' is not defined no-undef
88+
Line 80:17: 'proto' is not defined no-undef
89+
Line 81:10: 'proto' is not defined no-undef
90+
Line 92:1: 'proto' is not defined no-undef
91+
Line 116:1: 'proto' is not defined no-undef
92+
Line 118:3: 'proto' is not defined no-undef
93+
Line 130:1: 'proto' is not defined no-undef
94+
Line 146:1: 'proto' is not defined no-undef
95+
Line 152:1: 'proto' is not defined no-undef
96+
Line 157:29: 'proto' is not defined no-undef
97+
98+
Search for the keywords to learn more about each error.
99+
100+
webpack compiled with 1 error and 1 warning
101+
```
102+
103+
Running `run-yarn.sh` produced the same output as `run-npm.sh`.

‎nodejs/.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# protobuf generated files
7+
*_pb.js

‎nodejs/package-lock.json

+13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nodejs/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "protobuf-js-issue",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"google-protobuf": "^3.19.4"
7+
},
8+
"scripts": {
9+
"start": "nodejs ./tests/test.js",
10+
"proto": "protoc --proto_path=./protos/ --js_out=import_style=commonjs,binary:./protos/ protos/*.proto"
11+
}
12+
}

‎nodejs/protos/bar.proto

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
syntax = "proto3";
2+
3+
package example;
4+
5+
message Bar {
6+
/// Some variable.
7+
string bar_name = 1;
8+
}

‎nodejs/protos/foo.proto

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
syntax = "proto3";
2+
3+
package example;
4+
5+
message Foo {
6+
/// Some variable.
7+
string foo_name = 1;
8+
}

‎nodejs/protos/proj.proto

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
syntax = "proto3";
2+
3+
package example;
4+
5+
import "foo.proto";
6+
import "bar.proto";
7+
8+
message project {
9+
Foo foo = 1;
10+
Bar bar = 2;
11+
}

‎nodejs/run.sh

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#!/bin/sh
2+
3+
npm install || exit
4+
5+
npm run proto || exit
6+
7+
npm run start || exit

‎nodejs/tests/test.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const foopb = require('../protos/foo_pb');
2+
const barpb = require('../protos/bar_pb');
3+
const projpb = require('../protos/proj_pb');
4+
5+
console.log(foopb);
6+
console.log(barpb);
7+
console.log(projpb);
8+
9+
console.log("good!");

‎nodejs/yarn.lock

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
google-protobuf@^3.19.4:
6+
version "3.21.2"
7+
resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.2.tgz#4580a2bea8bbb291ee579d1fefb14d6fa3070ea4"
8+
integrity sha512-3MSOYFO5U9mPGikIYCzK0SaThypfGgS6bHqrUGXG3DPHCrb+txNqeEcns1W0lkGfk0rCyNXm7xB9rMxnCiZOoA==

‎react-app/.gitignore

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# protobuf generated files
15+
*_pb.js
16+
17+
# misc
18+
.DS_Store
19+
.env.local
20+
.env.development.local
21+
.env.test.local
22+
.env.production.local
23+
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*

‎react-app/README.md

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Getting Started with Create React App
2+
3+
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4+
5+
## Available Scripts
6+
7+
In the project directory, you can run:
8+
9+
### `npm start`
10+
11+
Runs the app in the development mode.\
12+
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13+
14+
The page will reload when you make changes.\
15+
You may also see any lint errors in the console.
16+
17+
### `npm test`
18+
19+
Launches the test runner in the interactive watch mode.\
20+
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21+
22+
### `npm run build`
23+
24+
Builds the app for production to the `build` folder.\
25+
It correctly bundles React in production mode and optimizes the build for the best performance.
26+
27+
The build is minified and the filenames include the hashes.\
28+
Your app is ready to be deployed!
29+
30+
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31+
32+
### `npm run eject`
33+
34+
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
35+
36+
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37+
38+
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39+
40+
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41+
42+
## Learn More
43+
44+
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45+
46+
To learn React, check out the [React documentation](https://reactjs.org/).
47+
48+
### Code Splitting
49+
50+
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51+
52+
### Analyzing the Bundle Size
53+
54+
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55+
56+
### Making a Progressive Web App
57+
58+
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59+
60+
### Advanced Configuration
61+
62+
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63+
64+
### Deployment
65+
66+
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67+
68+
### `npm run build` fails to minify
69+
70+
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

0 commit comments

Comments
 (0)