Help first time following Frontity Quick Start and it's not working

🙋Get Help
1

Hi everyone, recently found out about Frontity and was interested to try it. I started following the Quick Start guide and can’t get it to work…
Didn’t find a solution when searching the forums for it so here I am.

I’ve updated to the latest version of things:

  • Node: v16.7.0
  • Npm v7.20.3

From this folder on my laptop operating Windows 10 “c:\Development” I ran:
npx frontity create wwd-frontity

Selected mars-theme, and moved into that folder and ran:
npx frontity dev

So a fresh install… the console threw a LOT of warnings, webpack built client a50bac5cd53e0605e3e3 in 30481ms. The warnings were all along the lines of:

WARNING in C:/Development/wwd-frontity/node_modules/simple-entity-decode/build.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

The console, and the localhost both show an error:

Console:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (webpack-internal:///./node_modules/react/cjs/react.development.js?64b0:310:1206)
    at useState (webpack-internal:///./node_modules/react/cjs/react.development.js?64b0:313:485)
    at ReactiveComp (webpack-internal:///./node_modules/@frontity/connect/src/connect.js?01cf:36:72)
    at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:443:2321)
    at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:442:122)
    at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:484:1233)
    at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:484:55)
    at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:528:132)
    at render (webpack-internal:///./node_modules/@frontity/core/src/server/middlewares/capabilities/render-method.tsx:12:318)
    at serverSideRendering (webpack-internal:///./node_modules/@frontity/core/src/server/middlewares/server-side-rendering.ts:33:15)

Browser:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

In the browser dev tools I can see this error:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

As I’ve not modified any code, I’m really not sure where to go with this… Is there an issue with using the latest Node version?
Any advice would be greatly appreciated!

2

The biggest issue is that Windows and NPM/NodeJS are not really working well together, especially when it comes to global packages or using symlinks.

So I don’t think you did anything wrong, just unlucky by using Windows as a development environment.

For personal projects on my home computer (also Win10) I use VM’s to run everything in Linux. Tools like Docker or Vagrant can do this pretty well (with some minor issues). Or I run it at my home server which is running Linux.

3

Hi Johan, thanks for responding! That’s a shame, I’d hoped it would be okay to run on Windows…

I’ve not used those tools before, though I’ve heard of Docker… do you think it’s possible to get Docker set up and to try the basic Frontity Quick Start in an hour or so? If so, I’m happy to try it.

4

So I’ve spent a few hours today figuring out how to install Docker and then found a tutorial that helped me to get Frontity working in a container. It connects to a live WordPress website of mine, though I didn’t yet manage to connect it to a locally running instance of WP.
Will try some more to get it to work locally too.

Thanks for pointing me in the right direction @Johan