Unable to launch example app #176

nileshtrivedi · 2022-03-08T12:14:31Z

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)

The text was updated successfully, but these errors were encountered:

aednichols · 2022-03-19T19:33:46Z

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 · 2022-03-19T20:12:35Z

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

polygonart6777 · 2022-05-03T19:24:45Z

@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 · 2022-05-06T21:00:00Z

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 · 2022-06-25T06:03:51Z

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 · 2022-06-25T06:09:09Z

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 · 2022-06-26T20:56:25Z

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!

AEstrella87 · 2022-07-17T20:10:42Z

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!

plegner closed this as completed Jun 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to launch example app #176

Unable to launch example app #176

nileshtrivedi commented Mar 8, 2022 •

edited

aednichols commented Mar 19, 2022

aednichols commented Mar 19, 2022

polygonart6777 commented May 3, 2022

AEstrella87 commented May 6, 2022 •

edited

nileshtrivedi commented Jun 25, 2022 •

edited

nileshtrivedi commented Jun 25, 2022 •

edited

plegner commented Jun 26, 2022

AEstrella87 commented Jul 17, 2022 •

edited

Unable to launch example app #176

Unable to launch example app #176

Comments

nileshtrivedi commented Mar 8, 2022 • edited

aednichols commented Mar 19, 2022

aednichols commented Mar 19, 2022

polygonart6777 commented May 3, 2022

AEstrella87 commented May 6, 2022 • edited

nileshtrivedi commented Jun 25, 2022 • edited

nileshtrivedi commented Jun 25, 2022 • edited

plegner commented Jun 26, 2022

AEstrella87 commented Jul 17, 2022 • edited

nileshtrivedi commented Mar 8, 2022 •

edited

AEstrella87 commented May 6, 2022 •

edited

nileshtrivedi commented Jun 25, 2022 •

edited

nileshtrivedi commented Jun 25, 2022 •

edited

AEstrella87 commented Jul 17, 2022 •

edited