Flow Playground on localhost is blank

ayy345 commented 2 years ago

Describe the bug Launched the playground on localhost as per instructions here https://github.com/onflow/flow-playground http://localhost:3000 is just blank

Desktop (please complete the following information):

OS: macOS Big Sur
Browser Chrome Version 96.0.4664.110 (Official Build) (x86_64)
Docker Version: v20.10.8
- npm Version : 8.3.0
- node Version : 17.3.0

Here is the output of running npm run start

 1 [~/flow-playground](master)$ npm run start
  2 
  3 > start
  4 > webpack-dev-server -d --config webpack.config.js --inline
  5 
  6 ℹ ｢wds｣: Project is running at http://localhost:3000/
  7 ℹ ｢wds｣: webpack output is served from /
  8 ℹ ｢wds｣: Content not from webpack is served from /Users/sivers/flow-playground/dist
  9 ℹ ｢wds｣: 404s will fallback to /index.html
 10 ✖ ｢wdm｣: Hash: 10fcdcfe87dd967d14a0
 11 Version: webpack 4.46.0
 12 Time: 14253ms
 13 Built at: 01/12/2022 9:24:50 AM
 14                                Asset       Size  Chunks                         Chunk Names
 15 4168b9c11e5075e9cfe634a513b438f2.ttf   61.3 KiB          [emitted] [immutable]
 16         cadence-language-server.wasm   13.8 MiB          [emitted]
 17                     editor.worker.js   1.12 MiB          [emitted]
 18                          favicon.png  442 bytes          [emitted]
 19                        flow_logo.jpg   16.3 KiB          [emitted]
 20                 fonts/interstate.ttf   39.9 KiB          [emitted]
 21                           index.html   1.56 KiB          [emitted]
 22                              main.js   36.1 MiB    main  [emitted]              main
 23                           robots.txt   15 bytes          [emitted]
 24 Entrypoint main = main.js
 25 [1] multi (webpack)-dev-server/client?http://localhost:3000 ./src/index.tsx ./src/wasm_exec.js 52 bytes {main} [built]
 26 [./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
 27 [./node_modules/react/index.js] 190 bytes {main} [built]
 28 [./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
 29 [./node_modules/webpack-dev-server/client/index.js?http://localhost:3000] (webpack)-dev-server/client?http://localhost:3000 4.29 KiB {main} [built]
 30 [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
 31 [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
 32 [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
 33 [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
 34 [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
 35 [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
 36 [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
 37 [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
 38 [./src/index.tsx] 197 bytes {main} [built]
 39 [./src/wasm_exec.js] 15.4 KiB {main} [built]
 40     + 1027 hidden modules
 41 
 42 WARNING in EnvironmentPlugin - AVATAAR_URL environment variable is undefined.
 43 
 44 You can pass an object with default values to suppress this warning.
 45 See https://webpack.js.org/plugins/environment-plugin for example.
 46 
 47 WARNING in EnvironmentPlugin - DEFAULT_SEO_IMAGE environment variable is undefined.
 48 
 49 You can pass an object with default values to suppress this warning.
 50 See https://webpack.js.org/plugins/environment-plugin for example.
 51 
 52 WARNING in EnvironmentPlugin - GA_TRACKING_CODE environment variable is undefined.
 53 
 54 You can pass an object with default values to suppress this warning.
 55 See https://webpack.js.org/plugins/environment-plugin for example.

 57 WARNING in EnvironmentPlugin - MIXPANEL_TOKEN environment variable is undefined.
 58 
 59 You can pass an object with default values to suppress this warning.
 60 See https://webpack.js.org/plugins/environment-plugin for example.
 61 
 62 WARNING in EnvironmentPlugin - PLAYGROUND_API environment variable is undefined.
 63 
 64 You can pass an object with default values to suppress this warning.
 65 See https://webpack.js.org/plugins/environment-plugin for example.
 66 
 67 ERROR in ./src/providers/Project/index.tsx 43:11
 68 Module parse failed: Identifier 'active' has already been declared (43:11)
 69 File was processed with these loaders:
 70  * ./node_modules/ts-loader/index.js
 71 You may need an additional loader to handle the result of these loaders.
 72 |     const [isSavingCode, setIsSaving] = useState(false);
 73 |     const [lastSigners, setLastSigners] = useState(null);
 74 >     const [active, setActive] = useState({
 75 |         type: EntityType.Account,
 76 |         index: 0,
 77  @ ./src/containers/Editor/index.tsx 3:0-52 7:0-47 23:14-24 40:34-44 46:34-44 53:34-44 66:38-48 72:38-48 82:38-48 88:38-48 99:38-48 105:38-48 116:28-43
 78  @ ./src/App.tsx
 79  @ ./src/index.tsx
 80  @ multi ./src/index.tsx ./src/wasm_exec.js
 81 
 82 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
 83 ./src/providers/Project/index.tsx
 84 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(77,3)
 85       TS2300: Duplicate identifier 'active'.
 86 
 87 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
 88 ./src/providers/Project/index.tsx
 89 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(108,10)
 90       TS2300: Duplicate identifier 'active'.
 91 
 92 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
 93 ./src/providers/Project/index.tsx
 94 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(78,3)
 95       TS2300: Duplicate identifier 'setActive'.
 96 
 97 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
 98 ./src/providers/Project/index.tsx
 99 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(108,18)
100       TS2300: Duplicate identifier 'setActive'.
101 
102 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
103 ./src/providers/Project/index.tsx
104 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(312,20)
105       TS2552: Cannot find name 'useLocation'. Did you mean 'Selection'?
106 
107 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
108 ./src/providers/Project/index.tsx
109 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(328,8)
110       TS2304: Cannot find name 'Redirect'.
111 
112 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
113 ./src/providers/Project/index.tsx
114 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(360,13)
115       TS2304: Cannot find name 'Redirect'.
116 
117 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
118 ./src/providers/Project/index.tsx
119 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(380,38)
120       TS2304: Cannot find name 'initialLoad'.
121 
122 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
123 ./src/providers/Project/index.tsx
124 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(381,9)
125       TS2304: Cannot find name 'setInitialLoad'.
126 
127 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
128 ./src/providers/Project/index.tsx
129 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(387,17)
130       TS2304: Cannot find name 'Redirect'.
131 
132 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
133 ./src/providers/Project/index.tsx
133 ./src/providers/Project/index.tsx
134 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(403,38)
135       TS2304: Cannot find name 'initialLoad'.
136 
137 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
138 ./src/providers/Project/index.tsx
139 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(404,9)
140       TS2304: Cannot find name 'setInitialLoad'.
141 
142 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
143 ./src/providers/Project/index.tsx
144 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(410,17)
145       TS2304: Cannot find name 'Redirect'.
146 
147 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
148 ./src/providers/Project/index.tsx
149 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(427,38)
150       TS2304: Cannot find name 'initialLoad'.
151 
152 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
153 ./src/providers/Project/index.tsx
154 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(428,9)
155       TS2304: Cannot find name 'setInitialLoad'.
156 
157 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
158 ./src/providers/Project/index.tsx
159 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(434,17)
160       TS2304: Cannot find name 'Redirect'.
161 Child HtmlWebpackCompiler:
162      1 asset
163     Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
164     [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 1.8 KiB {HtmlWebpackPlugin_0} [built]
165 Child vs/editor/editor:
166                Asset      Size  Chunks             Chunk Names
167     editor.worker.js  1.12 MiB    main  [emitted]  main
168     Entrypoint main = editor.worker.js
169     [./node_modules/monaco-editor/esm/vs/base/common/arrays.js] 7.38 KiB {main} [built]
170     [./node_modules/monaco-editor/esm/vs/base/common/diff/diff.js] 49 KiB {main} [built]
171     [./node_modules/monaco-editor/esm/vs/base/common/errors.js] 2.74 KiB {main} [built]
172     [./node_modules/monaco-editor/esm/vs/base/common/lifecycle.js] 5.7 KiB {main} [built]
173     [./node_modules/monaco-editor/esm/vs/base/common/platform.js] 5.88 KiB {main} [built]
174     [./node_modules/monaco-editor/esm/vs/base/common/stopwatch.js] 1.11 KiB {main} [built]
175     [./node_modules/monaco-editor/esm/vs/base/common/types.js] 4.28 KiB {main} [built]
176     [./node_modules/monaco-editor/esm/vs/base/common/uri.js] 21.2 KiB {main} [built]
177     [./node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js] 10.4 KiB {main} [built]
178     [./node_modules/monaco-editor/esm/vs/editor/common/core/position.js] 3.93 KiB {main} [built]
179     [./node_modules/monaco-editor/esm/vs/editor/common/core/range.js] 13.8 KiB {main} [built]
180     [./node_modules/monaco-editor/esm/vs/editor/common/diff/diffComputer.js] 20.5 KiB {main} [built]
181     [./node_modules/monaco-editor/esm/vs/editor/common/model/mirrorTextModel.js] 4.95 KiB {main} [built]
182     [./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js] 19.7 KiB {main} [built]
183     [./node_modules/monaco-editor/esm/vs/editor/editor.worker.js] 1.04 KiB {main} [built]
184         + 22 hidden modules
185 ℹ ｢wdm｣: Failed to compile.

ObjectPlayer commented 2 years ago

Hi @ayy345, I am also running playground at my local machine and it is running fine, from you terminal logs that you shared above are showing so many errors e.g:

 67 ERROR in ./src/providers/Project/index.tsx 43:11
 68 Module parse failed: Identifier 'active' has already been declared (43:11)
 69 File was processed with these loaders:
 70  * ./node_modules/ts-loader/index.js
 71 You may need an additional loader to handle the result of these loaders.
 72 |     const [isSavingCode, setIsSaving] = useState(false);
 73 |     const [lastSigners, setLastSigners] = useState(null);
 74 >     const [active, setActive] = useState({
 75 |         type: EntityType.Account,
 76 |         index: 0,
 77  @ ./src/containers/Editor/index.tsx 3:0-52 7:0-47 23:14-24 40:34-44 46:34-44 53:34-44 66:38-48 72:38-48 82:38-48 88:38-48 99:38-48 105:38-48 116:28-43
 78  @ ./src/App.tsx
 79  @ ./src/index.tsx
 80  @ multi ./src/index.tsx ./src/wasm_exec.js
 81 
 82 ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx
 83 ./src/providers/Project/index.tsx
 84 [tsl] ERROR in /Users/sivers/flow-playground/src/providers/Project/index.tsx(77,3)
 85       TS2300: Duplicate identifier 'active'.

I think you have any old version of code, can you update your code with master branch and try to run your application again.

alse commented 2 years ago

I can't reproduce either, closing

onflow / flow-playground

Flow Playground on localhost is blank #196