Go Pro Sign Up Login

Buy Now and unlock this series

$

44

.99

$

34

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Plugins & Gatsby Source Filesystem

Next, we are going to begin the process of using Markdown files parsed with GraphQL inside of our Gatsby site. This process will allow us to use Gatsby’s full potential in building some excellent static sites. Before we can do this, we need to understand Gatsby’s plugin system.

Downloads

Become a pro to download code and videos

Comments

User avatar

Allan

almost 2 years ago

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

User avatar

Peter

about 2 years ago

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.

User avatar

Peter

about 2 years ago

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.
User avatar

Andrew

over 2 years ago [edited]

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 } } } }

User avatar

Rocky

over 2 years ago [edited]

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.

AJ

over 2 years ago

@Engineering Thanks!

Engineering

over 2 years ago [edited]

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

Troy

over 2 years ago

@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.

Joyce

over 2 years ago

@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.

Daniel

almost 3 years ago

@Jason What does the error say?

User avatar

Jason

almost 3 years ago

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?

Want to join the conversation?

Become a Pro member today!