Fresh development installation

Hi all. I have trouble loading the front built from git.

I cloned the repo; did ‘npm install’ in the front and server folders. Both front and server started successfully on ports 1444 and 1443 respectively. However, when I access front I get an JS error:

    TypeError: Cannot read property 'default' of undefined
    at rankChild (preact-router.es.js?f128:82)
    at prepareVNodeForRanking (preact-router.es.js?f128:65)
    at Array.filter (<anonymous>)
    at Router.getMatchingChildren (preact-router.es.js?f128:303)
    at Router.canRoute (preact-router.es.js?f128:258)
    at canRoute (preact-router.es.js?f128:145)
    at route (preact-router.es.js?f128:134)
    at eval (main.js?5c4e:49)

Front correctly requires the latest version of preact-router (v3.2.1). However, dev dependency preact-cli 2.x requires preact-router version 2.x which in turn creates this problem.

Error line:

  function rankChild(vnode) {
    vnode.attributes.default ? 0 : rank(vnode.attributes.path); // <- error here
  }

Newer preact-router version is:

    function rankChild(vnode) {
	return vnode.props.default ? 0 : rank(vnode.props.path);
    }

I resolved this by updating preact-cli to v3 and some other minor updates (removal of preact-cli-plugin-fast-async - it’s not compatible with latest webpack).

Now I can’t complete the signup form: it doesn’t like {’ '} code here https://github.com/GladysAssistant/Gladys/blob/a8f98aeccac48255a3b794695b972d2c0e7ab1b8/front/src/routes/signup/4-configure-house/ConfigureHouseTab.jsx#L71

If I remove it issue disappears.

Hi @siburny

I did a fresh test and I’ve not reproduced.

Which version of nodejs are you using ?

node -v:
v14.15.1

npm -v:
6.14.8

I deleted everything, redownloaded the code, and then “npm install” in server and front.

I started server:
npm start

I started front:
npm run start:development

We are using node 12 for now.

I will try v14 ASAP

It worked fine on my work computer with the following versions:

node -v:
v12.20.0

npm -v:
6.14.8

Interesting thing is on a freshly installed NodeJS 14, I didn’t experience any issues. I think I had mismatch in dependencies or something. I will keep digging :slight_smile:

Ok thank you for feedback

Related Issue https://github.com/GladysAssistant/Gladys/issues/982

1 Like

I can replicated this problem consistently on my main development computer. I was able to adjust “webpack” configuration to resolve “preact-router” module correctly.

Hi @siburny,
did you keep your changes somewhere?
I try to look for upgrading preact-cli too, but…
Well it will be nice to see what you did, and maybe continue this way :wink:

Upgrading preact-cli certainly fixed the development startup, but it broke some other parts of Gladys that I am not familiar with yet. Namely, preact-cli v3 doesn’t have preact serve any more. Based on package.json I inferred that it’s needed for serving pages in the “production” mode.

Since the original problem affected only one of my PCs it was easier to track down and fix just this issue.

As for changes, I only had to make one change in preact.config.js: I had to remove preact-cli-plugin-fast-async plugin completely since it doesn’t support preact-cli v3 for now.

Thanks, I did it too, but now I have some “errors” on startup:

ERROR in /home/alex/Gladys/front/node_modules/vis-data/declarations/data-interface.d.ts(1,28):
TS2307: Cannot find module 'vis-util/esnext' or its corresponding type declarations.
ERROR in /home/alex/Gladys/front/node_modules/vis-data/declarations/entry-esnext.d.ts(3,24):
TS2307: Cannot find module 'vis-util/esnext' or its corresponding type declarations.
ERROR in /home/alex/Gladys/front/node_modules/vis-network/declarations/index-legacy.d.ts(13,23):
TS2307: Cannot find module 'vis-util/esnext' or its corresponding type declarations.
ERROR in /home/alex/Gladys/front/node_modules/vis-network/declarations/index-legacy.d.ts(18,25):
TS2497: This module can only be referenced with ECMAScript imports/exports by turning on the 'esModuleInterop' flag and referencing its default export.
ERROR in /home/alex/Gladys/front/node_modules/vis-network/declarations/index-legacy.d.ts(20,27):
TS2307: Cannot find module 'keycharm' or its corresponding type declarations.
ERROR in /home/alex/Gladys/front/node_modules/vis-network/declarations/module/hammer.d.ts(1,20):
TS2307: Cannot find module '@egjs/hammerjs' or its corresponding type declarations.

I updated preact-cli via npm install preact-cli@3. When I start front I don’t get errors liked that. I do get a whole bunch of other warnings though. That’s why I decided not to go this route: I have too little knowledge about the whole structure of the project.