Unable to launch example app
nileshtrivedi opened this issue · 8 comments
I copied docs/example
to a new directory, modified the version of @mathigon/studio in package.json
to 0.1.18
, ran npm install
and then ran npm run dev
. I expected some sort of webapp to open but the logs showed this:
helix ~/code/example $ npm run dev
> @mathigon/studio-example@0.1.0 dev
> npm-run-all --parallel watch start-dev
> @mathigon/studio-example@0.1.0 watch
> mgon-build --assets --watch
> @mathigon/studio-example@0.1.0 start-dev
> nodemon --watch 'server/**/*.ts' --exec 'ts-node' -s server/app.ts
[nodemon] 2.0.15
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): server/**/*.ts
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `ts-node`
✔ Built icons.svg in 23ms
✖ [ERROR] Building /Users/helix/code/example/node_modules/@mathigon/studio/frontend/accounts.scss:
Error: Can't find stylesheet to import.
╷
9 │ @import "../../node_modules/@mathigon/boost/src/components/mixins";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@mathigon/studio/frontend/styles/variables.scss 9:9 @import
node_modules/@mathigon/studio/frontend/main.scss 7:9 @import
node_modules/@mathigon/studio/frontend/accounts.scss 7:9 root stylesheet
...
✖ [ERROR] Building /Users/helix/code/example/node_modules/@mathigon/studio/frontend/dashboard.scss:
Error: Can't find stylesheet to import.
╷
9 │ @import "../../node_modules/@mathigon/boost/src/components/mixins";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
...
✔ Built /Users/helix/code/example/content/science/styles.scss in 49ms
✔ Built /Users/helix/code/example/content/geography/styles.scss in 70ms
✔ Built /Users/helix/code/example/node_modules/@mathigon/studio/frontend/accounts.ts in 194ms
✔ Built /Users/helix/code/example/node_modules/@mathigon/studio/frontend/main.ts in 188ms
✔ Built /Users/helix/code/example/frontend/custom.ts in 188ms
✔ Built /Users/helix/code/example/node_modules/@mathigon/studio/frontend/dashboard.ts in 192ms
✔ Built /Users/helix/code/example/content/geography/functions.ts in 82ms
✔ Built /Users/helix/code/example/content/science/functions.ts in 82ms
✔ Built /Users/helix/code/example/frontend/course.ts in 193ms
DONE!
The logs didn't print any port number, so I tried ports like 3000, 4000, 5000, 6000, 8000, 8080, 9000. But no app was accessible anywhere (npm run dev
terminal did not show any logs for incoming requests either).
I have tried manually running npm install @mathigon/studio
as well. Is there a build step for @mathigon/studio that I need to run explicitly, even when referencing the npm version before starting the example app? Or is there something broken in the setup here?
My setup:
NodeJS: 16.13.1 (installed via asdf but I made sure to reshim after npm install)
OS: Mac OS M1 (Apple Silicon)
I have found that running npm run dev
from within studio/docs/example/server
instead of copying it somewhere else exits without error.
That said, I do not see any indication that a server is running – for example, my Mac does not list anything running on port 8080 as one would expect with the example app: https://github.com/mathigon/studio/blob/main/docs/example/server/app.ts#L20
I have unblocked myself on a custom branch #179 and now have npm run build && npm run start
working, pages are serving at http://localhost:8080
.
The command ts-node server/app.ts
from the documentation also works, if I specially install ts-node
with npm install -g ts-node
[0].
That said npm run dev
still just sits there and doesn't start a server; it is entirely possible I am misunderstanding what it's supposed to be doing.
@nileshtrivedi Have you tried running npm install @mathigon/studio
within the studio/example/server
directory before running npm run build && npm run start
? This helped me with the .scss import errors.
I have unblocked myself on a custom branch #179 and now have
npm run build && npm run start
working, pages are serving athttp://localhost:8080
.The command
ts-node server/app.ts
from the documentation also works, if I specially installts-node
withnpm install -g ts-node
[0].That said
npm run dev
still just sits there and doesn't start a server; it is entirely possible I am misunderstanding what it's supposed to be doing.
I am able to start the dev server w/ npm run dev if I change the -s
(serial) to -p
(parallel) in the definition of start-dev
found in studio/docs/example/package.json
. However, I'm not sure if this is safe/wise.
Update: I can't get any new courses to be served though, even using npm run start
.
A fresh attempt. Recording all my steps here:
helix ~/code $ node -v
v16.15.1
helix ~/code $ npm -v
8.11.0
helix ~/code $ git clone git@github.com:mathigon/studio.git
helix ~/code $ cp -r studio/docs/example .
helix ~/code $ cd example
Here, I manually removed `@mathigon/studio` from dependencies in package.json because it specifies the version as `file:../..`
helix ~/code/example $ npm install
added 217 packages, and audited 218 packages in 9s
51 packages are looking for funding
run `npm fund` for details
5 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
helix ~/code/example $ npm list
@mathigon/studio-example@0.1.0 /Users/helix/code/example
├── nodemon@2.0.16
├── npm-run-all@4.1.5
├── ts-node@10.8.0
└── typescript@4.7.2
helix ~/code/example $ npm install @mathigon/studio
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated rollup-plugin-node-resolve@3.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-node-resolve.
added 518 packages, and audited 736 packages in 59s
92 packages are looking for funding
run `npm fund` for details
7 vulnerabilities (5 moderate, 2 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
helix ~/code/example $ asdf reshim nodejs 16.15.1
helix ~/code/example $ npm run build
> @mathigon/studio-example@0.1.0 build
> mgon-build --assets --minify --search
✔ Built icons.svg in 50ms
✔ Built /Users/helix/code/example/node_modules/@mathigon/studio/frontend/accounts.scss in 1896ms
✔ Built /Users/helix/code/example/node_modules/@mathigon/studio/frontend/dashboard.scss in 1561ms
✔ Built /Users/helix/code/example/node_modules/@mathigon/studio/frontend/main.scss in 1482ms
✔ Built /Users/helix/code/example/frontend/course.scss in 1423ms
✔ Built /Users/helix/code/example/frontend/custom.scss in 1280ms
✔ Built /Users/helix/code/example/frontend/custom.ts in 1977ms
✔ Built /Users/helix/code/example/content/geography/styles.scss in 1224ms
✔ Built /Users/helix/code/example/content/science/styles.scss in 1222ms
✔ Built /Users/helix/code/example/node_modules/@mathigon/studio/frontend/dashboard.ts in 1978ms
✔ Built /Users/helix/code/example/node_modules/@mathigon/studio/frontend/accounts.ts in 1986ms
✔ Built /Users/helix/code/example/node_modules/@mathigon/studio/frontend/main.ts in 1980ms
✔ Built /Users/helix/code/example/content/geography/functions.ts in 1229ms
✔ Built /Users/helix/code/example/frontend/course.ts in 1981ms
✔ Built /Users/helix/code/example/content/science/functions.ts in 1229ms
✔ Built course geography [en] in 170ms
✔ Built course geography [de] in 19ms
✔ Built course science [en] in 28ms
✔ Built search-index.json and search-docs.json in 2ms
DONE!
helix ~/code/example $ npm run start
> @mathigon/studio-example@0.1.0 start
> ts-node -s server/app.ts
/Users/helix/code/example/node_modules/@mathigon/studio/server/app.ts:7
import crypto from 'crypto';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Object.require.extensions.<computed> [as .ts] (/Users/helix/code/example/node_modules/ts-node/src/index.ts:1587:43)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/helix/code/example/server/app.ts:7:1)
helix ~/code/example $ ts-node -s server/app.ts
/Users/helix/code/example/node_modules/@mathigon/studio/server/app.ts:7
import crypto from 'crypto';
^^^^^^
SyntaxError: Cannot use import statement outside a module
...
If I attempt starting this without copying example/
out of the studio/
directory, I get a different error which was apparently fixed in #178 :
helix ~/code/studio/docs/example [main] $ npm run start
> @mathigon/studio-example@0.1.0 start
> ts-node -s server/app.ts
/Users/helix/code/studio/docs/example/node_modules/ts-node/src/index.ts:843
return new TSError(diagnosticText, diagnosticCodes, diagnostics);
^
TSError: ⨯ Unable to compile TypeScript:
../../server/utilities/utilities.ts:79:67 - error TS2769: No overload matches this call.
Overload 1 of 4, '(target: {}, source: unknown): {}', gave the following error.
Argument of type 'unknown' is not assignable to parameter of type '{}'.
Overload 2 of 4, '(target: object, ...sources: any[]): any', gave the following error.
Argument of type 'unknown' is not assignable to parameter of type 'object'.
79 deep ? deepExtend(studio, project, (a, b) => b) : Object.assign(studio, project);
~~~~~~
at createTSError (/Users/helix/code/studio/docs/example/node_modules/ts-node/src/index.ts:843:12)
at reportTSError (/Users/helix/code/studio/docs/example/node_modules/ts-node/src/index.ts:847:19)
at getOutput (/Users/helix/code/studio/docs/example/node_modules/ts-node/src/index.ts:1057:36)
at Object.compile (/Users/helix/code/studio/docs/example/node_modules/ts-node/src/index.ts:1411:41)
at Module.m._compile (/Users/helix/code/studio/docs/example/node_modules/ts-node/src/index.ts:1596:30)
at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Object.require.extensions.<computed> [as .ts] (/Users/helix/code/studio/docs/example/node_modules/ts-node/src/index.ts:1600:12)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
diagnosticCodes: [ 2769 ]
}
Thanks for looking into this, @plegner. Unfortunately, after installing v0.1.23 in a local copy of the example folder, and attempting to fire up the dev server with npm run dev
I still receive the dreaded SyntaxError: Cannot use import statement outside a module
. It seems to dislike the import statements in node_modules/@mathigon/studio/server/app.ts
.
I'd love to get this resolved, I'm excited to explore this awesome tool.
Thank you,
Andrew
What I did and what I see:
andrewstar@Andrews-MBP example % npm run dev
> @mathigon/studio-example@0.1.0 dev
> npm-run-all --parallel watch start-dev
> @mathigon/studio-example@0.1.0 start-dev
> nodemon --watch 'server/**/*.ts' --exec 'ts-node -s server/app.ts'
> @mathigon/studio-example@0.1.0 watch
> mgon-build --assets --watch
[nodemon] 2.0.18
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): server/**/*.ts
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `ts-node -s server/app.ts`
✔ Built icons.svg in 27ms
/Users/andrewstar/Projects/example/node_modules/@mathigon/studio/server/app.ts:7
import crypto from 'crypto';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1026:15)
at Module._compile (node:internal/modules/cjs/loader:1061:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
at Object.require.extensions.<computed> [as .ts] (/Users/andrewstar/Projects/example/node_modules/ts-node/src/index.ts:1587:43)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/andrewstar/Projects/example/server/app.ts:8:1)
[nodemon] app crashed - waiting for file changes before starting...
✔ Built /Users/andrewstar/Projects/example/frontend/course.scss in 488ms
✔ Built /Users/andrewstar/Projects/example/node_modules/@mathigon/studio/frontend/main.scss in 536ms
✔ Built /Users/andrewstar/Projects/example/node_modules/@mathigon/studio/frontend/dashboard.scss in 597ms
✔ Built /Users/andrewstar/Projects/example/content/geography/styles.scss in 313ms
✔ Built /Users/andrewstar/Projects/example/node_modules/@mathigon/studio/frontend/accounts.scss in 789ms
✔ Built /Users/andrewstar/Projects/example/frontend/custom.scss in 357ms
✔ Built /Users/andrewstar/Projects/example/content/science/styles.scss in 308ms
✔ Built /Users/andrewstar/Projects/example/node_modules/@mathigon/studio/frontend/accounts.ts in 817ms
✔ Built /Users/andrewstar/Projects/example/node_modules/@mathigon/studio/frontend/dashboard.ts in 812ms
✔ Built /Users/andrewstar/Projects/example/node_modules/@mathigon/studio/frontend/main.ts in 815ms
✔ Built /Users/andrewstar/Projects/example/frontend/custom.ts in 815ms
✔ Built /Users/andrewstar/Projects/example/content/geography/functions.ts in 336ms
✔ Built /Users/andrewstar/Projects/example/content/science/functions.ts in 336ms
✔ Built /Users/andrewstar/Projects/example/frontend/course.ts in 818ms
DONE!