Plugins & Gatsby Source Filesystem

Gatsby plugins sure grew, 499 plugins at the time of this video but now there are 2142!! (7/3/2020)

And... were back.. Had to use n to upgrade to the latest node, then uninstall and re-install sharp (after deleting the node_modules/sharp directory, and were working again.

Getting some warnings about missing packages and about insecurities that need to be manually fixed (audit fix didn't do it automatically it seems) as well as a warning about a deprecated core.js, but there things for later.

Wow.. this went boom. I think its npm installed a bunch of incompatible packages. When I installed source-filesystem (which I think now was probably already there) it suggested running audit fix, which I did, but had to run npm install first.

Now I get

ERROR

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

React will try to recreate this component tree from scratch using the error boundary you provided, App.

ERROR

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

ERROR

UNHANDLED REJECTION 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem. etc etc... and its a total no go.

I noticed the new gatsby starter already included 'gatsby-source-filesystem' plugin. So when you add the posts plugin and run a query in graphql you get images as well as post1.md . I was able to just grab the posts using a filter like so:

{ allFile(filter: {sourceInstanceName: {eq: "posts"}}) { edges { node { extension name } } } }

Same issue as Jason. Following the video and installing gatsby-source-filesystem broke everything. I was getting errors like React wasn't found, then errors in the when I npm install everything.

My fix was to make a new project. Gatsby version 2.18.12 already has gatsby-source-filesystem... so stick with that.

Then, add the posts in the plugins.

Example: https://pastebin.com/raw/6k6TFH2S

Edit: using a pastebin since the commas are breaking the code in this comment box.

@Engineering Thanks!

getting a crazy error " TypeError: Cannot read property 'filter' of undefined" when installing "gatsby-source-filesystem" on windows :(

I resolved this by removing gatsby from package.json and then running "yarn add gatsby" (npm i gatsby). I copied in the source code as I had a previous error so I would guess that gatsby-source-filesystem didn't work with the gastby version in the package.json file

@Joyce I ran into the same issue, I haven't got a huge amount of time to troubleshoot but it seems that gatsby-source-filesystem uninstalls react? Something about that plugin breaks gatsby.

@Jason I having the same problem :( It maybe a npm thing and there’s an issue posted but closed without a walk around... I wonder if people found a solution yet too.

@Jason What does the error say?

Every time I install gatsby-source-filesystems, everything breaks. When I try to restart the dev server, I get an error that react cannot be found. Is it just me?