Problems starting up a new website

🙋Get Help
1

Hey I apologize ahead of time, this is probably a super simple issue. I am not a dev, I’m a designer who dabbles in code, and it’s been over a year since I’ve touched my frontity built portfolio website.

I’m following the quick start guide and so far it’s all pretty familar. I got it running on local host but when I try to change the state.source.url I get the following error:

in the browser

request to https://www.data2.jackalope.tech/wp-json/wp/v2/posts?_embed=true&page=1 failed, reason: connect ECONNREFUSED 67.205.40.58:443

in the terminal

FetchError: request to https://www.data.jackalope.tech/wp-json/wp-json/wp/v2/posts?_embed=true&page=1 failed, reason: connect ECONNREFUSED 67.205.40.58:443
      at ClientRequest.eval (webpack-internal:///./node_modules/node-fetch/lib/index.mjs:1465:11)
      at ClientRequest.emit (events.js:198:13)
      at ClientRequest.EventEmitter.emit (domain.js:448:20)
      at TLSSocket.socketErrorListener (_http_client.js:401:9)
      at TLSSocket.emit (events.js:198:13)
      at TLSSocket.EventEmitter.emit (domain.js:448:20)
      at emitErrorNT (internal/streams/destroy.js:91:8)
      at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
      at process._tickCallback (internal/process/next_tick.js:63:19)

And here is what my frontity.settings.json looks like:

const settings = {
  "name": "frontity-server",
  "state": {
    "frontity": {
      "url": "https://test.frontity.org",
      "title": "Test Frontity Blog",
      "description": "WordPress installation for Frontity development"
    }
  },
  "packages": [
    {
      "name": "@frontity/mars-theme",
      "state": {
        "theme": {
          "menu": [
            [
              "Home",
              "/"
            ],
            [
              "Nature",
              "/category/nature/"
            ],
            [
              "Travel",
              "/category/travel/"
            ],
            [
              "Japan",
              "/tag/japan/"
            ],
            [
              "About Us",
              "/about-us/"
            ]
          ],
          "featured": {
            "showOnList": false,
            "showOnPost": false
          }
        }
      }
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "url": "https://www.data2.jackalope.tech/wp-json"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
};

export default settings;

Any ideas what the problem is here?

2

Hi @thedonquixotic

When you previously used Frontity you would have set state.source.api to something like https://www.data.jackalope.tech/wp-json/wp/v2.

However, state.source.api is now deprecated and you should use state.source.url, which you are indeed using, but this setting just takes the domain of the api, not the full api address, so you would just put https://www.data.jackalope.tech here, i.e. without the /wp-json suffix.

If you examine your terminal error closely you will notice that the /wp-json part is echoed twice.

See here for more info.

3

Oh that’s interesting, since this was a fresh website created using the npx frontity commands.

Anyway I changed it, and that fixed it. Thanks!

4

New problem. It might be better for clarity of discussion and for documentation purposes to create a new thread but I don’t want to clog up the community forum with my posts so for now I’ll just make an update here:

  • Got it working with mars and my url.
  • Then I git cloned my theme desert-jackalope into the packages folder
  • Then I installed it using npm install ./packages/desert-jackalope and I added it to the frontity.settings.js file
  • then I ran npx frontity dev and got the following error:
└─➤ npx frontity dev                                                                                           master        


SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module
  - public-path: /static/


(node:678) Warning: Closing file descriptor 20 on garbage collection

Error: ./node_modules/react-spinners/MoonLoader.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/c/Users/aslan/home/work/frontity-server/node_modules/react-spinners/MoonLoader.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | "use strict";
    | ^
  2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
  3 |     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
  4 |     return cooked;
    at File.buildCodeFrameError (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/core/lib/transformation/file/file.js:244:12)
    at NodePath.buildCodeFrameError (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/path/index.js:133:21)
    at PluginPass.enter (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/plugin-transform-react-jsx/lib/create-plugin.js:164:28)
    at newFn (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/visitors.js:171:21)
    at NodePath._call (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/path/context.js:53:20)       
    at NodePath.call (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/path/context.js:40:17)        
    at NodePath.visit (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/path/context.js:90:31)       
    at TraversalContext.visitQueue (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/context.js:99:16)
    at TraversalContext.visitSingle (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/context.js:73:19)
    at TraversalContext.visit (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/context.js:127:19)   
 @ ./packages/desert-jackalope/src/components/Loading/index.js 1:331-377 2:100-106
 @ ./packages/desert-jackalope/src/components/index.js
 @ ./packages/desert-jackalope/src/index.js
 @ ./build/bundling/entry-points/frontity-server/client.ts
 @ multi webpack-hot-middleware/client ./build/bundling/entry-points/frontity-server/client.ts

The issue seems to be coming from the react spinners module?

5

The error sounds complex, but is actually very simple.
Frontity does not (fully) support packages with JSX files, which need to be “compiled” before they can be used instead of running them in runtime (aka when needed).

For the server part of Frontity this doesn’t really matter, but the client side part doesn’t like it.
And even though @emotions is installed to support JSX files, its support is not really useful.

There are some tricks to make it work by adding some comments in JS, but haven’t tried it out (never needed it).

6

How can I compile the support packages before runtime?

This theme, desert-jackalope, was forked from a a 2019 version of the mars-theme. What changed between now and then that created this problem?

It wouldn’t be too hard for me to just refork mars-theme and I re align my styles in it, but if there’s a quicker fix or way for me to update the theme that would be preferable.

Also just as a general question: is frontity still an ongoing project? I just checked the main repo and there doesn’t seem to have been a lot of updates lately.

7

I checked the repo from the theme, which is GitHub - jcklpe/desert-jackalope: minimalist theme built in React for Wordpress using Frontity and as you said it’s 2 years old and using 2 year old dependencies (which may conflict with other dependencies).

So the first step would be to update everything, and fix whatever is broken.
Looking at the error you posted the current issue is in ´./node_modules/react-spinners/MoonLoader.js´, so I would say it’s a good place to start debugging. Which is also 2 years old, and currently not using the latest version.

The frontity repo got updated 12 days ago, wp-plugins 11 days ago and the docs 9 days ago. I would say that’s pretty active, even in a time of vacations and home office. :man_shrugging:

1 Like
8

Thank you. This is my first time updating a JS/React project after several years not using it, so I’m not really familiar with the process of, espc when it comes to dependencies.

I’ve run npm update which results in me getting warnings back about not having peer dependencies.

Here is the full reading of the actions I took trying to get npm stuff all up to date:

└─➤ npm update                                                                                               master    
npm WARN react-mailchimp-subscribe@2.1.3 requires a peer of react@>=15 but none is installed. You must install peer dependencies yourself.
npm WARN frontity@1.17.0 requires a peer of @frontity/core@^1.10.1 but none is installed. You must install peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react-dom@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spring@8.0.27 requires a peer of react@>= 16.8.0 but none is installed. You must install peer dependencies 
yourself.
npm WARN react-spring@8.0.27 requires a peer of react-dom@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-intersection-observer@8.32.0 requires a peer of react@^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/styled@11.3.0 requires a peer of react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/react@11.4.1 requires a peer of react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-helmet-async@1.0.9 requires a peer of react@^16.6.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-helmet-async@1.0.9 requires a peer of react-dom@^16.6.0 || ^17.0.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN @loadable/component@5.15.0 requires a peer of react@>=16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/babel-plugin@11.3.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-jsx@7.14.5 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/core@10.1.1 requires a peer of react@>=16.3.0 but none is installed. You must install peer dependencies 
yourself.
npm WARN desert-jackalope@1.3.0 No license field.

+ react-mailchimp-subscribe@2.1.3
+ @frontity/html2react@1.7.0
+ @frontity/components@1.8.1
+ frontity@1.17.0
+ react-spinners@0.6.1
+ react-spring@8.0.27
added 247 packages from 274 contributors and audited 248 packages in 49.867s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


┌─     /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope                                       
└─➤ npm install react --save-dev                                                                          master      
npm WARN @babel/plugin-syntax-jsx@7.14.5 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/babel-plugin@11.3.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN frontity@1.17.0 requires a peer of @frontity/core@^1.10.1 but none is installed. You must install peer dependencies yourself.
npm WARN react-helmet-async@1.0.9 requires a peer of react-dom@^16.6.0 || ^17.0.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react-dom@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spring@8.0.27 requires a peer of react-dom@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN desert-jackalope@1.3.0 No license field.

+ react@17.0.2
added 1 package and audited 249 packages in 1.181s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


┌─     /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope                                       
└─➤ npm install babel --save-dev                                                                          master      
npm WARN deprecated babel@6.23.0: In 6.x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers
npm WARN @babel/plugin-syntax-jsx@7.14.5 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/babel-plugin@11.3.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN frontity@1.17.0 requires a peer of @frontity/core@^1.10.1 but none is installed. You must install peer dependencies yourself.
npm WARN react-helmet-async@1.0.9 requires a peer of react-dom@^16.6.0 || ^17.0.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react-dom@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spring@8.0.27 requires a peer of react-dom@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN desert-jackalope@1.3.0 No license field.

+ babel@6.23.0
added 1 package from 1 contributor and audited 250 packages in 0.958s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


┌─     /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope                                       
└─➤ npm install babel-cli --save-dev                                                                      master      
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

> core-js@2.6.12 postinstall /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope/node_modules/core-js  
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN @babel/plugin-syntax-jsx@7.14.5 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/babel-plugin@11.3.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN frontity@1.17.0 requires a peer of @frontity/core@^1.10.1 but none is installed. You must install peer dependencies yourself.
npm WARN react-helmet-async@1.0.9 requires a peer of react-dom@^16.6.0 || ^17.0.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react-dom@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spring@8.0.27 requires a peer of react-dom@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN desert-jackalope@1.3.0 No license field.

+ babel-cli@6.26.0
added 216 packages from 83 contributors and audited 467 packages in 16.575s

26 packages are looking for funding
  run `npm fund` for details

found 3 vulnerabilities (1 low, 2 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

┌─     /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope                                       
└─➤ npm audit fix                                                                                         master      
npm WARN @babel/plugin-syntax-jsx@7.14.5 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/babel-plugin@11.3.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN frontity@1.17.0 requires a peer of @frontity/core@^1.10.1 but none is installed. You must install peer dependencies yourself.
npm WARN react-helmet-async@1.0.9 requires a peer of react-dom@^16.6.0 || ^17.0.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react-dom@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spring@8.0.27 requires a peer of react-dom@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN desert-jackalope@1.3.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 1.29s

26 packages are looking for funding
  run `npm fund` for details

fixed 0 of 3 vulnerabilities in 467 scanned packages
  3 vulnerabilities required manual review and could not be updated

┌─     /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope                                       
└─➤ npm install emotion --save-dev                                                                        master      
npm WARN @babel/plugin-syntax-jsx@7.14.5 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/babel-plugin@11.3.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN frontity@1.17.0 requires a peer of @frontity/core@^1.10.1 but none is installed. You must install peer dependencies yourself.
npm WARN react-helmet-async@1.0.9 requires a peer of react-dom@^16.6.0 || ^17.0.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react-dom@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spring@8.0.27 requires a peer of react-dom@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN desert-jackalope@1.3.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ emotion@11.0.0
added 1 package from 1 contributor and audited 468 packages in 2.124s

26 packages are looking for funding
  run `npm fund` for details

found 3 vulnerabilities (1 low, 2 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

┌─     /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope                                       
└─➤ npm install @babel/core --save-dev                                                                    master      
npm WARN frontity@1.17.0 requires a peer of @frontity/core@^1.10.1 but none is installed. You must install peer dependencies yourself.
npm WARN react-helmet-async@1.0.9 requires a peer of react-dom@^16.6.0 || ^17.0.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react-dom@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spring@8.0.27 requires a peer of react-dom@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN desert-jackalope@1.3.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @babel/core@7.15.0
added 34 packages from 18 contributors and audited 502 packages in 7.863s

29 packages are looking for funding
  run `npm fund` for details

found 3 vulnerabilities (1 low, 2 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

┌─     /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope                                       
└─➤ npm install @frontity/core --save-dev                                                                 master      
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. 
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

> core-js@3.16.2 postinstall /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope/node_modules/@frontity/core/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js:
> https://opencollective.com/core-js 
> https://patreon.com/zloirock 
> https://paypal.me/zloirock 
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/watchpack/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN react-spinners@0.6.1 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react-dom@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN desert-jackalope@1.3.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @frontity/core@1.14.3
added 560 packages from 269 contributors and audited 1063 packages in 61.73s

53 packages are looking for funding
  run `npm fund` for details

found 4 vulnerabilities (1 low, 3 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

Is this the correct way of doing things? Do I just keep installing dev dependencies for everything that it throws a warning for? Or is that the incorrect way to approach this issue?

I am thinking it might be simpler for me to simply remake this theme over again using the latest version of the mars-theme. I made some pretty big changes in structure from the mars-theme but by and large most of the difference is in the styles I wrote. I didn’t write any new components really.

But also if this is a point where I can learn a necessary skill (updating and maintaining dependencies on projects over longer periods of time) then I want to push myself to learn the proper way to do things. But I also don’t know if I’m barking up the entirely wrong tree.

9

The first update inside the theme was correct, installing the dependencies in the theme not.
The theme package itself is already a dependency on your Frontity project, and that is where all the dependencies should be.

So:

  1. pull theme from GitHub
  2. run npm update
  3. push theme to GitHub (without node_modules and package.json.lock)
  4. run npm update in frontity project (which should get updated theme)

In short, your theme should have a package.json which is up-to-date, but no node_modules containing dependencies.

Dependency management isn’t hard with NPM, till you start developing your own packages (like themes in Frontity). Unfortunately I have never seen a good tutorial or easy guide on how to do this and it’s just trial and error, and experience, to understand how it all fits together.

So you’re not doing anything wrong, just missing a few steps which aren’t explained anywhere.

1 Like
10

Okay here is my attempts at following your instructions

  • pulled down a fresh clone from github
  • reverted to a prior commit from last week since after trying to do all the npm update stuff I committed it
┌─  /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope                                     
└─➤ git reset --hard c60be469614210b5bb6469665040f53b4c303f88                                               
master    
HEAD is now at c60be46 Merge pull request #4 from jcklpe/dependabot/npm_and_yarn/tar-4.4.15
  • deleted package-lock.json
  • added package-lock.json to the .gitignore so that it wouldn’t be committed to the repo in the future
  • ran npm update 
└─➤ npm update                                                                                         
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN react-spinners@0.6.1 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-spinners@0.6.1 requires a peer of react-dom@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-mailchimp-subscribe@2.1.3 requires a peer of react@>=15 but none is installed. You must install peer dependencies yourself.
npm WARN frontity@1.17.0 requires a peer of @frontity/core@^1.10.1 but none is installed. You must install peer dependencies yourself.
npm WARN react-spring@8.0.27 requires a peer of react@>= 16.8.0 but none is installed. You must install peer dependencies 
yourself.
npm WARN react-spring@8.0.27 requires a peer of react-dom@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-intersection-observer@8.32.0 requires a peer of react@^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/react@11.4.1 requires a peer of react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-helmet-async@1.0.9 requires a peer of react@^16.6.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-helmet-async@1.0.9 requires a peer of react-dom@^16.6.0 || ^17.0.0 but none is installed. You must install 
peer dependencies yourself.
npm WARN @loadable/component@5.15.0 requires a peer of react@>=16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/styled@11.3.0 requires a peer of react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/babel-plugin@11.3.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-jsx@7.14.5 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/core@10.1.1 requires a peer of react@>=16.3.0 but none is installed. You must install peer dependencies 
yourself.
npm WARN desert-jackalope@1.3.0 No license field.

+ react-spinners@0.6.1
+ react-mailchimp-subscribe@2.1.3
+ frontity@1.17.0
+ react-spring@8.0.27
+ @frontity/components@1.8.1
+ @frontity/html2react@1.7.0
added 247 packages from 274 contributors and audited 248 packages in 67.488s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
  • force pushed to github remote in order to overwrite the bad commit with this fresh version
└─➤ git push origin --force                                                                          master  1  1    
git: 'credential-wincred' is not a git command. See 'git --help'.
Username for 'https://github.com': jcklpe
Password for 'https://jcklpe@github.com': 
git: 'credential-wincred' is not a git command. See 'git --help'.
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 12 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 15.84 KiB | 5.28 MiB/s, done.
Total 4 (delta 3), reused 0 (delta 0)
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
remote: 
remote: GitHub found 2 vulnerabilities on jcklpe/desert-jackalope's default branch (1 high, 1 low). To find out more, visit:
remote:      https://github.com/jcklpe/desert-jackalope/security/dependabot
remote:
To https://github.com/jcklpe/desert-jackalope.git
 + 4c673f0...525b54a master -> master (forced update)
  • ran npm update in the frontity server folder and then ran npx frontity dev and received the same error as before
┌─     /mnt/c/Users/aslan/home/work/frontity-server                                                                 
└─➤ npm update                                                                                            master      

┌─     /mnt/c/Users/aslan/home/work/frontity-server                                                                 
└─➤ npx frontity dev                                                                                      master      


SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module
  - public-path: /static/


(node:560) Warning: Closing file descriptor 20 on garbage collection

Error: ./packages/desert-jackalope/node_modules/react-spinners/MoonLoader.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/c/Users/aslan/home/work/frontity-server/packages/desert-jackalope/node_modules/react-spinners/MoonLoader.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | "use strict";
    | ^
  2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
  3 |     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 
  4 |     return cooked;
    at File.buildCodeFrameError (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/core/lib/transformation/file/file.js:244:12)
    at NodePath.buildCodeFrameError (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/path/index.js:133:21)
    at PluginPass.enter (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/plugin-transform-react-jsx/lib/create-plugin.js:164:28)
    at newFn (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/visitors.js:171:21)
    at NodePath._call (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/path/context.js:40:17)    at NodePath.visit (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/context.js:99:16)
    at TraversalContext.visitSingle (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/context.js:73:19)
    at TraversalContext.visit (/mnt/c/Users/aslan/home/work/frontity-server/node_modules/@babel/traverse/lib/context.js:127:19)
 @ ./packages/desert-jackalope/src/components/Loading/index.js 1:331-377 2:100-106
 @ ./packages/desert-jackalope/src/components/index.js
 @ ./packages/desert-jackalope/src/index.js
 @ ./build/bundling/entry-points/frontity-server/client.ts
 @ multi webpack-hot-middleware/client ./build/bundling/entry-points/frontity-server/client.ts

If you need help please visit https://community.frontity.org/.

So I’m getting the same issue as before.

Is this problem perhaps caused by all the dependabot pull requests I’ve let run over the last couple of years?

Should I revert to a previous commit before I let dependabot do all it’s updates? Commits · jcklpe/desert-jackalope · GitHub

— Okay actually I went ahead and did that here: GitHub - jcklpe/desert-jackalope at dont-trust-dependabot

That’s a branch that was reverted to the last human pushed commit in early 2020. I reverted to that commit, then deleted package-lock.json, edited the .gitignore, then ran npm update, and then did the same up in the frontity server.

And still the same problem with the moonloader spinner etc.

11

Anyone else have any thoughts on this?

12

I guess not. And with the announcement that Frontity has been purchased by Automatticc I am thinking that perhaps it is best for me to abandon this pursuit.

I managed to use vscode remote to ssh in and make the changes I needed to, to my website, in order to fix the glaring issues caused by changes to the Gutenberg image block mark up. I still have to figure out how to fix some of the issues related to the wp-block-gallery mark up but this seems a more viable path than me trying to deal with all this NPM rigamarole.

I wish the very best to the Frontity team! But also next time I decide to build a website I think I’m going to go with something else haha. Maybe vue. Or maybe I’ll just go back to using Wordpress like normal. I do not like react, and while I like things like being able to do page transitions, prefetching data, etc I do not know if it’s actually worth the extra headache.

13

I managed to use vscode remote to ssh in and make the changes I needed to, to my website, in order to fix the glaring issues caused by changes to the Gutenberg image block mark up. I still have to figure out how to fix some of the issues related to the wp-block-gallery mark up binary options signals free but this seems a more viable path than me trying to deal with all this NPM rigamarole.