Gatsby: docs(tutorial): tutorial/part-three -> walkthrough failing if yarn is selected as packageManager

[muescha]

Summary

when the packageManager in ~/.config/gatsby/config.json set to yarn then the walkthrough failing (see related issues)

Basic example

Possible changes and enhancements:

• warning, when yarn is selected as packageManager but a package-lock.json exists and is newer than the yarn.lock
• allow to set the packageManager per project folder
• add a hint to the tutorial to try yarn?

... other ideas?

Motivation

no error while walkthrough

related Issues

• #6834 gatsby develop is not working after npm install
• #20225 Failed to 'gatsby develop' after installing typography plugin
• #21989 chore(cli): gatsby info and gatsby --version should print which packageManager used
• #19827 Ambiguous "StoreStateProvider" error for all gatsby commands

[jonniebigodes]

@muescha i was going over this and it seems that the middle one could be the way to go.

When the user installs the cli globally he has the option to set the package manager. When he uses the cli it will default to the one set at the time of installation. But like other CLI's that exist something like CRA and the vue cli they allow you to initialize the project with package manager of choice through a flag or option-

More even that there's probably some users that installed yarn at some point but never get around it, or haven't shifted to their mental model, also after doing a quick check on the documentation, more specifically the tutorial tends to use npm instead of yarn.

[jordanlesich]

Interesting, my walkthrough failed in tutorial three when I was npm installing the typography kit. Not sure if it relates to this. NPM was my main install however. Were you running windows by ay chance?

[muescha]

i am on macos

i can reproduce always it while running all the tutorial:

• with npm no error
• with yarn error

[nicopresto]

Interesting, my walkthrough failed in tutorial three when I was npm installing the typography kit. Not sure if it relates to this. NPM was my main install however. Were you running windows by ay chance?

My walkthrough also failed in tutorial three when using npm install for typography, but was successful with yarn:
yarn add gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

[franjorub]

I have the same issue, in part three when I copy the typography command from the docs the project doesn't run again

> gatsby develop

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

deleting node_modules and package-lock.json and installing everything with yarn works again

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[LekoArts]

Hey, thanks for the issue!

But I don't think anything is wrong with yarn and our tutorial. It works fine for me and in the past the only problems occurred due to npm.

The starters come with both a package-lock.json and yarn.lock as npm requires the lock file. If your global config uses yarn and you run gatsby new the package-lock.json file will be deleted. A subsequent run of npm install now deletes everything but the new package hence screwing up the local node_modules folder.

We'll see to solve this somehow in a better way 👍 (A follow-up issue will be created most likely)

[JuanDavid31]

My walkthrough also failed in tutorial three when using npm install for typography, but was successful with yarn:
yarn add gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

Thanks. Tutorial is still broken, and if it wasn't for you I would be stuck on this.