Help with First Time Frontity Quick Start Not Working

Hi @floydhartford

I donā€™t have a Windows machine to try to reproduce this. Anyone else with Windows getting this error?

Itā€™s strange that a fresh install is failing. You shouldnā€™t need to at this stage but try these steps to see if it resolves the issue.

Ok, tried that ā€“ same results.

  1. Deleted /my-app/node_modules
  2. Deleted /my-app/package-lock.json
  3. Ran npm install (seemed to work fine)
  4. Ran npm update (did nothing)
  5. Ran npx frontity dev

Again, it opened my browser (Chrome) to localhost:3000 with a message of ā€œInternal Server Errorā€

I donā€™t have any other local servers or anything running and there are no other files inside of my project folder except what gets installed from npx frontity create my-app.

1 Like

Hi @floydhartford,
Iā€™m new to Frontity also but am on a Mac. I have some questions after reading your issues.

In your initial post you mentioned you were on Windows and from your npx frontity info you were using IE. In your latest post you mention using the Chrome browser. Just to clarify, which browser are you using? Secondly, regardless of browser, Internal Server Error appears on the web page itself. Can you open Developer Tools for the page running at localhost:3000 and then look in the Console tab, this tab can possibly give us a more specific error to help debug.

@sattley yes, it opens in Chrome - Iā€™m definitely using Chrome. Thereā€™s no custom configuration or anything like that, so I assume IE is a Windows default setting from Frontity, but I have a Chrome browser open and itā€™s using that.

The console message isnā€™t much help.

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

Hi @floydhartford,
Yep not much help. I hate when Iā€™m trying a new Framework and it doesnā€™t work so Iā€™m interested to help as much as possible, though Iā€™m really just troubleshooting here.

Iā€™ve spent the last few hours doing the following:

  • I built the frontity app from scratch using the Quickstart guide and it ran with no issues at localhost:3000. (I changed zero code)

  • I then built the frontity app again using the latest version of node v15.5.1 and I got this error:

  • I then switched to the exact version of Node and npm that you were using, Node v14.15.0 and npm v6.14.8. Rebuilt the app from scratch again and it worked fine.

Some thoughts on this, have you tried switching to an earlier version of Node and npm and then trying to build the app? Until today all of my development on Frontity was done using Node v10.9.0 and npm v6.7.0

Again I use a MacBook and use something called Node Version Manager to easily switch between versions of Node, maybe try that on your PC . . .

Hopefully something here is helpful or makes someone else think of something as the issue. Good luck!

2 Likes

I appreciate you trying to help. For real.

Iā€™ve been doing a similar thing today except going forward instead of backwards with both Node and npm.

  • First, I updated Node to v15 - (no change w/ my errors)
  • Next, I updated npm to the latest minor version (7.4.0)
  • Now, Iā€™ve deleted the ā€œmy-appā€ folder and ran npx frontity create my-app

Still getting the same error and results.

Is it normal to get a bazillion terminal warnings about ā€œThere are multiple modules with names that only differe in casing.ā€? Before it errors out with the message about React hooks, I get a bunch of those and then it says ā€œcompiled with warningsā€

And, to answer your question - No, I havenā€™t tried reverting to earlier versions of Node and npm.

If thatā€™s the solutionā€¦ Iā€™ll pass on frontity for now. I donā€™t need to use it for anything - just thought it seemed like a cool way to WordPress with React and I was looking forward to trying it out. And, in the back of my mind, thereā€™s always the chance itā€™s because Iā€™m on Windows 8.1 (=

Hey @floydhartford,
Sorry to hear that. So a few last things you may want to look into, in no particular order:

  • I came across another thread on this site where people where having ā€˜npxā€™ issues on
    Windows due to the user folder containing a space. See here -> Error running npx

  • Furthermore because of you mentioning the error about having mismatched versions of React . . . There is this link from Reactā€™s site -> https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react. I guess itā€™s possible to have conflicting versions of React. You can run this check on the cmd line from within your project:

npm ls react

The output should only show one React in the dependency tree.

  • Lastly, I did some Googling around and it seems that Windows 8.1 is pretty old. I saw a few things here and there about the support for newer versions of Node being spotty. Iā€™m not a Windows person but from reading around sounds like very few people are running Windows 8.1 these days. Maybe time to update the OS :wink:

Anyway Iā€™ll be working starting tomorrow so my responses may become spottier, either way keep us updated!

2 Likes

Hi @floydhartford

Sorry to hear that youā€™re still having problems. Are you using GitBash as your command prompt, instead of the Windows console? I found this thread which indicates that this could cause problems similar to the one youā€™re experiencing.

Otherwise it might be that Windows is at least part of the problem. Does the name of your home directory have a space and/or capitalisation in it? Try creating the project outside of your home directory, e.g. create a dev folder in the root of C: and install the Frontity project in there.

I hope that the above helps and that you get to resolve the issue and persevere with Frontity.

Thanks also to @sattley for helping out so assiduously. :ok_hand:

1 Like

@sattley
There are no spaces in my path (c:\wamp\www\frontity)
Itā€™s in the wamp folder, but Iā€™m not actively running wamp, so no conflict there.

npm ls react returns:

c:\wamp\www
'-- (empty)

@mburridge
Iā€™m using Node.js command prompt (not Git bash)

There are no spaces or capital letters in my home directory. c:\wamp\www\frontity

I want to say itā€™s Windos 8.1 too, but then I canā€™t think of any other package Iā€™ve ever had this sort of problem with, soā€¦ I mean, maybe?

@floydhartford

Try creating the Frontity project in a separate folder from wamp. Iā€™m guessing you have your local WordPress installation in the wamp folder and wamp will be serving content from that folder, albeit on a separate port from npx frontity dev, but it might be causing some kind of issue for some reason. I donā€™t know, worth a try! :man_shrugging:t2:

The only reason Windows might be affecting this is because of the file/folder naming convention, but this doesnā€™t seem to be an issue in your case.

TBH Iā€™m running out of options here. Iā€™m going to refer this to a member of the dev team to see if they can suggest anything. @luisherranz do you have any ideas on this?

@mburridge
Iā€™ve just tried a fresh run at c:\workspace\frontity

Same errors.

I donā€™t know what may be going on in your computer, weā€™ve never seen this.

Can you start the server, clean the console, try to do a new request (open localhost:3000 or refresh) and send a capture or a log of what the Frontity server outputs in the console?

Hi @luisherranz - welcome to the thread.

GET http://localhost:3000/ 500 (Internal Server Error)

Before refreshing the page, the original console error message is:

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

Sorry, I meant the terminal, not the console.

@luisherranz if you scroll up a couple comments, thereā€™s a screenshot of my terminal (cmd)

Oh, thanks. Did you solve the error that React is showing in the console?: http://fb.me/react-invalid-hook-call

Regarding the Webpack warning, it seems like you have more than one folder in node_modules with the same name but different casing. Have you checked that error? Did you find the offending modules?

@floydhartford Did you get this working?
Iā€™m having exactly the same issue.
Following quick start, or cloning a project that works on mac both have exactly the same result.
npm ls react:
-- @frontity/core@1.14.3 ā€“ react@17.0.2

Node.js v14.15.1

It seems like a problem with npm 7 and how it handles the peerDependencies, which differs from npm 6. Do you have a React package installed with a peerDependency of React 16 or lower?

No, itā€™s a straight up clone of the repo and following the getting started steps that causes this - I didnt get to the point where I could do anywork!

Also, sorry for the late reply, work directed my attention elsewhere!