MaTSlab - issues compiling

Question

MaTSlab - issues compiling

Closed this issue 3 years ago · 5 comments

Hi,
thanks again for sharing the code.
This is my very first encounter with js and TypeScipt, so please bear with me.

installed node v16.12.0 after error message to use <17
changed to run npm run build instead of npm build as in instruction
ran npm install json after compile error
ran npm run build, compilation finished
ran app.js, got runtime error
ReferenceError: self is not defined
at C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\dist\app.js:1:1922
at Object. (C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\dist\app.js:1:2054)
←[90m at Module._compile (node:internal/modules/cjs/loader:1101:14)←[39m
←[90m at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)←[39m
←[90m at Module.load (node:internal/modules/cjs/loader:981:32)←[39m
←[90m at Function.Module._load (node:internal/modules/cjs/loader:822:12)←[39m
←[90m at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)←[39m
←[90m at node:internal/main/run_main_module:17:47←[39m

Answer 1 · 2022-01-15T18:13:23.000Z

To run the app, you need to serve the app.js bundle from a local server, then load it in a web browser. Try running

npm start

or

node ./server.js

then navigate to http://localhost:3000 in your web browser.

Answer 2 · 2022-01-16T15:13:17.000Z

Thanks Jason,

next error is then
Error: ENOENT: no such file or directory, open 'C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\dist\index.html'

###############################################################

PS C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab> npm run build

maTSlab@1.0.0 build
yarn build-defs && webpack

yarn run v1.22.17
warning package.json: License should be a valid SPDX license expression
$ node build-defs.js
Done in 0.23s.
Hash: a96944e89e19a6148a71
Version: webpack 4.46.0
Time: 35357ms
Built at: 16.01.2022 16:09:49
Asset Size Chunks Chunk Names
0.js 5.21 KiB 0 [emitted]
1.js 7.23 KiB 1 [emitted]
10.js 3.88 KiB 10 [emitted]
11.js 851 bytes 11 [emitted]
12.js 1.8 KiB 12 [emitted]
13.js 1.99 KiB 13 [emitted]
14.js 9.42 KiB 14 [emitted]
15.js 3.51 KiB 15 [emitted]
16.js 4.42 KiB 16 [emitted]
17.js 1.39 KiB 17 [emitted]
18.js 4.39 KiB 18 [emitted]
19.js 4.15 KiB 19 [emitted]
20.js 1.83 KiB 20 [emitted]
21.js 5.22 KiB 21 [emitted]
22.js 2.92 KiB 22 [emitted]
23.js 2.6 KiB 23 [emitted]
24.js 2.21 KiB 24 [emitted]
25.js 6.28 KiB 25 [emitted]
26.js 3.51 KiB 26 [emitted]
27.js 4.4 KiB 27 [emitted]
28.js 1.08 KiB 28 [emitted]
29.js 2.9 KiB 29 [emitted]
30.js 6.98 KiB 30 [emitted]
31.js 3.36 KiB 31 [emitted]
32.js 3.81 KiB 32 [emitted]
33.js 2.38 KiB 33 [emitted]
34.js 2.08 KiB 34 [emitted]
35.js 2.75 KiB 35 [emitted]
36.js 3.71 KiB 36 [emitted]
37.js 2.52 KiB 37 [emitted]
38.js 4.8 KiB 38 [emitted]
39.js 14.2 KiB 39 [emitted]
40.js 2.35 KiB 40 [emitted]
41.js 2.92 KiB 41 [emitted]
42.js 1.96 KiB 42 [emitted]
43.js 8.06 KiB 43 [emitted]
44.js 17.2 KiB 44 [emitted]
45.js 7.84 KiB 45 [emitted]
46.js 7.67 KiB 46 [emitted]
47.js 16.5 KiB 47 [emitted]
48.js 3.2 KiB 48 [emitted]
49.js 4.72 KiB 49 [emitted]
5.js 5.77 KiB 5, 70 [emitted]
50.js 3.16 KiB 50 [emitted]
51.js 3.04 KiB 51 [emitted]
52.js 8.22 KiB 52 [emitted]
53.js 3.48 KiB 53 [emitted]
54.js 11.5 KiB 54 [emitted]
55.js 3.86 KiB 55 [emitted]
56.js 8.31 KiB 56 [emitted]
57.js 3.86 KiB 57 [emitted]
58.js 1.79 KiB 58 [emitted]
59.js 7.15 KiB 59 [emitted]
6.js 727 KiB 6 [emitted] [big]
60.js 1.73 KiB 60 [emitted]
61.js 6.26 KiB 61 [emitted]
62.js 2.86 KiB 62 [emitted]
63.js 18.2 KiB 63 [emitted]
64.js 2.7 KiB 64 [emitted]
65.js 17.8 KiB 65 [emitted]
66.js 7.22 KiB 66 [emitted]
67.js 4.22 KiB 67 [emitted]
68.js 3.49 KiB 68 [emitted]
69.js 5.84 KiB 69 [emitted]
7.js 423 KiB 7 [emitted] [big]
70.js 4.9 KiB 70 [emitted]
71.js 5.66 KiB 71 [emitted]
72.js 2.02 KiB 72 [emitted]
73.js 3.46 KiB 73 [emitted]
74.js 26.6 KiB 74 [emitted]
74d8acf8740a672d680194959e476053.ttf 63.6 KiB [emitted] [immutable]
8.js 119 KiB 8 [emitted]
9.js 11.4 KiB 9 [emitted]
app.js 6.23 MiB 2 [emitted] [big] app
css.worker.js 844 KiB [emitted] [big]
editor.worker.js 140 KiB 3 [emitted] editor.worker
html.worker.js 546 KiB [emitted] [big]
json.worker.js 241 KiB [emitted]
ts.worker.js 4.32 MiB 4, 3 [emitted] [big] ts.worker
Entrypoint app [big] = app.js
Entrypoint editor.worker = editor.worker.js
Entrypoint ts.worker [big] = ts.worker.js
[2] ./node_modules/monaco-editor/esm/vs/base/common/lifecycle.js 5.74 KiB {2} {3} {4} [built]
[3] ./node_modules/monaco-editor/esm/vs/editor/common/core/range.js 13.8 KiB {2} {3} {4} [built]
[10] ./node_modules/monaco-editor/esm/vs/editor/common/core/position.js 3.93 KiB {2} {3} {4} [built]
[12] ./node_modules/monaco-editor/esm/vs/base/common/platform.js 5.88 KiB {2} {3} {4} [built]
[13] ./node_modules/monaco-editor/esm/vs/base/common/types.js 4.28 KiB {2} {3} {4} [built]
[14] ./node_modules/monaco-editor/esm/vs/base/common/errors.js 2.39 KiB {2} {3} {4} [built]
[17] ./node_modules/react/index.js 190 bytes {2} [built]
[19] ./node_modules/monaco-editor/esm/vs/base/common/arrays.js 7.38 KiB {2} {3} {4} [built]
[144] ./node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js 10.4 KiB {2} {3} {4} [built]
[160] ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js + 4 modules 60.3 KiB {2} {3} {4} [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js 19.7 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/diff/diffComputer.js 20.5 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/model/mirrorTextModel.js 4.95 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/modes/linkComputer.js 12.2 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/modes/supports/inplaceReplaceSupport.js 2.96 KiB [built]
[223] ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js 1.04 KiB {3} {4} [built]
[443] ./src/index.tsx 273 bytes {2} [built]
[445] ./node_modules/react-dom/index.js 1.33 KiB {2} [built]
[449] ./src/app.tsx 16 KiB {2} [built]
[489] ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js + 2 modules 1.52 MiB {4} [built]
| ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js 669 bytes [built]
| ./node_modules/monaco-editor/esm/vs/language/typescript/tsWorker.js 20.2 KiB [built]
| ./node_modules/monaco-editor/esm/vs/language/typescript/lib/lib.js 1.5 MiB [built]
+ 549 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

WARNING in Conflict: Multiple assets emit different content to the same filename editor.worker.js

WARNING in Conflict: Multiple assets emit different content to the same filename ts.worker.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
ts.worker.js (4.32 MiB)
css.worker.js (844 KiB)
html.worker.js (546 KiB)
app.js (6.23 MiB)
6.js (727 KiB)
7.js (423 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (6.23 MiB)
app.js
ts.worker (4.32 MiB)
ts.worker.js

Child vs/editor/editor:
Asset Size Chunks Chunk Names
editor.worker.js 118 KiB 0 main
Entrypoint main = editor.worker.js
[0] ./node_modules/monaco-editor/esm/vs/base/common/platform.js 5.88 KiB {0} [built]
[1] ./node_modules/monaco-editor/esm/vs/base/common/process.js 1.55 KiB {0} [built]
[2] ./node_modules/process/browser.js 5.29 KiB {0} [built]
[3] (webpack)/buildin/global.js 472 bytes {0} [built]
[4] ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js + 32 modules 396 KiB {0} [built]
| ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js 1.04 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js 10.4 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js 19.7 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/errors.js 2.39 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/lifecycle.js 5.74 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/types.js 4.28 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/arrays.js 7.38 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/diff/diff.js 49 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/uri.js 21.2 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/core/position.js 3.93 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/core/range.js 13.8 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/diff/diffComputer.js 20.5 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/model/mirrorTextModel.js 4.95 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/model/wordHelper.js 4.15 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/modes/linkComputer.js 12.2 KiB [built]
| + 18 hidden modules
Child vs/language/css/cssWorker:
Asset Size Chunks Chunk Names
css.worker.js 844 KiB 0 [emitted] [big] main
Entrypoint main = css.worker.js
[0] ./node_modules/monaco-editor/esm/vs/base/common/platform.js 5.88 KiB {0} [built]
[1] ./node_modules/monaco-editor/esm/vs/base/common/process.js 1.55 KiB {0} [built]
[2] ./node_modules/monaco-editor/esm/vs/language/css/_deps/vscode-uri/index.js 11.3 KiB {0} [built]
[3] ./node_modules/process/browser.js 5.29 KiB {0} [built]
[4] (webpack)/buildin/global.js 472 bytes {0} [built]
[5] ./node_modules/monaco-editor/esm/vs/language/css/css.worker.js + 75 modules 1.76 MiB {0} [built]
| ./node_modules/monaco-editor/esm/vs/language/css/css.worker.js 637 bytes [built]
| ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js 1.04 KiB [built]
| ./node_modules/monaco-editor/esm/vs/language/css/cssWorker.js 11.6 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js 10.4 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js 19.7 KiB [built]
| ./node_modules/monaco-editor/esm/vs/language/css/_deps/vscode-css-languageservice/cssLanguageService.js 4.68 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/errors.js 2.39 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/lifecycle.js 5.74 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/types.js 4.28 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/arrays.js 7.38 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/diff/diff.js 49 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/uri.js 21.2 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/core/position.js 3.93 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/core/range.js 13.8 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/diff/diffComputer.js 20.5 KiB [built]
| + 61 hidden modules
Child vs/language/html/htmlWorker:
Asset Size Chunks Chunk Names
html.worker.js 546 KiB 0 [emitted] [big] main
Entrypoint main = html.worker.js
[0] ./node_modules/monaco-editor/esm/vs/base/common/platform.js 5.88 KiB {0} [built]
[1] ./node_modules/monaco-editor/esm/vs/base/common/process.js 1.55 KiB {0} [built]
[2] ./node_modules/process/browser.js 5.29 KiB {0} [built]
[3] ./node_modules/monaco-editor/esm/vs/language/html/_deps/vscode-uri/index.js 11.3 KiB {0} [built]
[4] (webpack)/buildin/global.js 472 bytes {0} [built]
[5] ./node_modules/monaco-editor/esm/vs/language/html/html.worker.js + 65 modules 1.16 MiB {0} [built]
| ./node_modules/monaco-editor/esm/vs/language/html/html.worker.js 640 bytes [built]
| ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js 1.04 KiB [built]
| ./node_modules/monaco-editor/esm/vs/language/html/htmlWorker.js 9.22 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js 10.4 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js 19.7 KiB [built]
| ./node_modules/monaco-editor/esm/vs/language/html/_deps/vscode-html-languageservice/htmlLanguageService.js 2.94 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/errors.js 2.39 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/lifecycle.js 5.74 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/types.js 4.28 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/arrays.js 7.38 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/diff/diff.js 49 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/uri.js 21.2 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/core/position.js 3.93 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/core/range.js 13.8 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/diff/diffComputer.js 20.5 KiB [built]
| + 51 hidden modules
Child vs/language/json/jsonWorker:
Asset Size Chunks Chunk Names
json.worker.js 241 KiB 0 [emitted] main
Entrypoint main = json.worker.js
[0] ./node_modules/monaco-editor/esm/vs/base/common/platform.js 5.88 KiB {0} [built]
[1] ./node_modules/monaco-editor/esm/vs/base/common/process.js 1.55 KiB {0} [built]
[2] ./node_modules/monaco-editor/esm/vs/language/json/_deps/vscode-uri/index.js 11.3 KiB {0} [built]
[3] ./node_modules/process/browser.js 5.29 KiB {0} [built]
[4] (webpack)/buildin/global.js 472 bytes {0} [built]
[5] ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js + 58 modules 740 KiB {0} [built]
| ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js 640 bytes [built]
| ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js 1.04 KiB [built]
| ./node_modules/monaco-editor/esm/vs/language/json/jsonWorker.js 11.5 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js 10.4 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js 19.7 KiB [built]
| ./node_modules/monaco-editor/esm/vs/language/json/_deps/vscode-json-languageservice/jsonLanguageService.js 4.1 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/errors.js 2.39 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/lifecycle.js 5.74 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/types.js 4.28 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/arrays.js 7.38 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/diff/diff.js 49 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/uri.js 21.2 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/core/position.js 3.93 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/core/range.js 13.8 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/diff/diffComputer.js 20.5 KiB [built]
| + 44 hidden modules
Child vs/language/typescript/tsWorker:
Asset Size Chunks Chunk Names
ts.worker.js 4.3 MiB 0 main
Entrypoint main = ts.worker.js
[0] ./node_modules/monaco-editor/esm/vs/base/common/platform.js 5.88 KiB {0} [built]
[1] ./node_modules/monaco-editor/esm/vs/base/common/process.js 1.55 KiB {0} [built]
[2] ./node_modules/monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js 8.74 MiB {0} [built]
[3] ./node_modules/process/browser.js 5.29 KiB {0} [built]
[4] (webpack)/buildin/global.js 472 bytes {0} [built]
[5] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
[6] ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js + 35 modules 1.91 MiB {0} [built]
| ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js 669 bytes [built]
| ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js 1.04 KiB [built]
| ./node_modules/monaco-editor/esm/vs/language/typescript/tsWorker.js 20.2 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js 10.4 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js 19.7 KiB [built]
| ./node_modules/monaco-editor/esm/vs/language/typescript/lib/lib.js 1.5 MiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/errors.js 2.39 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/lifecycle.js 5.74 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/types.js 4.28 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/arrays.js 7.38 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/diff/diff.js 49 KiB [built]
| ./node_modules/monaco-editor/esm/vs/base/common/uri.js 21.2 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/core/position.js 3.93 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/core/range.js 13.8 KiB [built]
| ./node_modules/monaco-editor/esm/vs/editor/common/diff/diffComputer.js 20.5 KiB [built]
| + 21 hidden modules
PS C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab> npm start

maTSlab@1.0.0 start
node ./server

Error: ENOENT: no such file or directory, open 'C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\dist\index.html'
at Object.openSync (node:fs:585:3)
at Object.readFileSync (node:fs:453:35)
at C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\server.js:17:22
at Layer.handle [as handle_request] (C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\bardo\OneDrive\Dokumente\GitHub\Blog\MaTSlab\node_modules\express\lib\router\index.js:275:10)

Answer 3 · 2022-01-16T15:32:30.000Z

Try copying index.html from the public folder to the dist folder

Answer 4 · 2022-01-16T15:35:42.000Z

working now, thanks a lot!

Answer 5 · 2022-12-13T17:45:04.000Z

Hi Jason,
another idea.
I would like to create a mix of MaTSlab and Ocelot / nuprl/Ocelot#167
So MaTSlab with plain Javascript/Typescript mode and nice panes.
Not to reinvent the wheel, are you aware of similar GUIs?
Not sure if this qualifies as an IDE, the goal is to keep editor, plotting, console and REPL together in a flexible way - like Matlab.
Thx, Bardo