Unable to launch example app about studio

[AEstrella87]

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/[email protected] dev
> npm-run-all --parallel watch start-dev


> @mathigon/[email protected] start-dev
> nodemon --watch 'server/**/*.ts' --exec 'ts-node -s server/app.ts'


> @mathigon/[email protected] 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!

[polygonart6777]

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

[aednichols]

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]

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

[AEstrella87]

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]

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 [email protected]: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/[email protected] /Users/helix/code/example
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]


helix ~/code/example  $ npm install @mathigon/studio
npm WARN deprecated [email protected]: 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 [email protected]: 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/[email protected] 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/[email protected] 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]

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/[email protected] 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]

Thanks for reporting these issues! Should be fixed in 366d08e and 4724c9c (published as v0.1.23 on NPM). Please let us know if you run into any more issues starting the development server!