search

mathigon / studio

A customisable NodeJS server for creating and hosting highly interactive online courses.
https://mathigon.io
Other
38 stars 20 forks source link

Unable to launch example app #176

Closed nileshtrivedi closed 2 years ago

nileshtrivedi commented 2 years ago

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)

aednichols commented 2 years ago

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

aednichols commented 2 years ago

I have unblocked myself on a custom branch https://github.com/mathigon/studio/pull/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.

[0] https://stackoverflow.com/a/44764064

polygonart6777 commented 2 years ago

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

AEstrella87 commented 2 years ago

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.

[0] https://stackoverflow.com/a/44764064

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.

nileshtrivedi commented 2 years ago

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
...
nileshtrivedi commented 2 years ago

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 ]
}
plegner commented 2 years ago

Thanks for reporting these issues! Should be fixed in https://github.com/mathigon/studio/commit/366d08e7f60ddf0439dc92ad20b67e93addb6294 and https://github.com/mathigon/studio/commit/4724c9cd5b9fd2a0d6b7e85d9f3e31692b65b172 (published as v0.1.23 on NPM). Please let us know if you run into any more issues starting the development server!

AEstrella87 commented 2 years ago

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!