Next.js errors in Glitch

Glitch Help
1

I’m trying to run a Next.js application in Glitch. It’s compiling the API routes correctly but I get an Error: Invalid hook call. Hooks can only be called inside of the body of a function component. when it compiles the pages. If I download the project and run it locally, it works fine without error. I’m not sure what’s going on.

2

Hi aydrian,

My best guess would be something to do with environment versions of node and react/react-dom. There seems to be a lot of helpful chatter about this issue (specifically with next.js) here: https://github.com/vercel/next.js/issues/7626

Apart from that, I’d recommend opening the Glitch Terminal and checking node -v. Sometimes remixed projects have a very old node version. You can usually fix it by starting with a fresh remix from a git repo or using hello-express and importing all your code.

Let us know how it goes :slight_smile:

3 Likes
3

Thank you for the reply. I was looking at that issue. I did a check and I am running node.js v12.0.0 in my Glitch app. I also started this project from hello-express. I can try creating another project. It does the same.

1 Like
4

What is the best way to wipe out my node_modules and have it all reinstalled?

5 
rm -rf node_modules
npm install
refresh

That should do the trick.

1 Like
6

Thanks. I didn’t know you could use npm in the terminal. I did that and still the same issue. It doesn’t look like I have multiple react versions installed

1 Like
7

It’s a bit of a mystery. A real pain.

I tried remixing your project and throwing a few things at it…

  1. Running next instead of node server.js… same error
  2. Running enable-npm to force npm instead of pnpm… same error
  3. Removing and reinstalling node-modules… same
  4. Upgrading all versions of react, react-dom, and next to latest… same
  5. Running enable-pnpm in case it cleaned up some erroneous packages as in this case… same error.

The only thing I think is suspicious is that Glitch node packages are at e.g.
/rbd/pnpm-volume/d5772895-b0ac-48a6-88a9-7e3d4afce4a4/node_modules/next/dist/next-server/server/render.js:50:72

And two of the commenters on the GH issue said “I had a node_modules folder in a parent directory up the tree that was causing issues. I deleted that and it started working as expected,”

…which was why I tried disabling pnpm. But it still seems to keep the modules in that dir.

Wish I could help more…

1 Like
8

I appreciate you looking into it. I did basically the same thing. Both of my Next.js Glitch projects are now broken. I was using this as a demo but I’m going to instead having to deploy my app to Heroku so it will work.

9

Sad :cry: but seems to be your best option. I even tried a brand new Glitch site, npx create-next-app and extracted my-app into the main directory. Eventually got to the same error you’ve been seeing.

Something’s fundamentally not happy in the Glitch container with running next. A shame!

Don’t know whether someone like @Gareth or @cori can help.

1 Like
10

@aydrian @SteGriff I’ll see if I can figure out what’s going on, sorry it won’t be in time for your stream!

(btw Gareth doesn’t work at Glitch anymore and Cori is on a different team than Support :D)

2 Likes
11

@aydrian Showed this to @dluxemburg and he locked all the package versions and it worked. I replicated in a remix just setting react-dom to 16.13.0 vs. ^16.13.0 and it worked (and I have pnpm enabled). We don’t yet know why yet but that’s a quick fix - for some reason the app is tripping on the react dependencies.

4 Likes
12

Thanks, @jenn. Another weird thing, when you search for nextjs in Add Package, it shows 9.3.3 but 9.5.3 is the latest.

I’m not sure if I’ll have time to sync my code back up and test it before the stream. I would definitely want to move things back onto this because it’s easier for my sample apps.

13

The Add Package uses the libraries.io API, so that may be the latest they are showing to us, but I’ll look into that.

14

@jenn, libraries.io has some known issues where the latest versions of packages are not updated. In some cases, newly created packages are also not updated. Or probably it’s been cached for some time.

15

Yeah. It’s trying to install a version 4.6.0 for the Twilio library and npm says the latest is 3.49.0. This is in another app, I just set the package.json to 3.49.0.

16

I guess it’s being cached, I think you should try after some time.

17

Oh btw - I tried my remix with Next 9.5.3 and got the same error and got it to work again locking with 9.3.5. We love modularity!!

1 Like
18

Great shout Jenn, should have pinged you! Thanks for the solve!! :saxophone: