[Gatsby, Storyblok] "Can't resolve 'fs' in x"

Hi there!

I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪

I'm developing Lilac, an online school with hands-on Frontend e-books and tutoring👩‍💻

Who is this article for?

• Anyone who got the error says "Can't resolve 'fs' in x" from your Gatsby projects
• Anyone who is trying out to arrange things from Storyblok's Gatsby multilingual blog hands-on tutorial

What was the error?

Here's the bossy one you'll need to deal with👇

Oh, sorry.

Not this.

This one :)

 ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'fs' in
'/Users/.../node_modules/dotenv/lib'

If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local
 file make sure that the path is correct.

File: node_modules/dotenv/lib/main.js

And here's my environment👇

• gatsby-shopify-starter
• Storyblok

  "dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.1.1",
    "@emotion/styled": "^11.0.0",
    "gatsby": "^2.32.3",
    "gatsby-image": "^2.11.0",
    "gatsby-plugin-google-analytics": "^2.0.13",
    "gatsby-plugin-layout": "^1.0.11",
    "gatsby-plugin-manifest": "^2.2.23",
    "gatsby-plugin-offline": "^3.0.16",
    "gatsby-plugin-react-helmet": "^3.1.13",
    "gatsby-plugin-root-import": "^2.0.6",
    "gatsby-plugin-sharp": "^2.14.1",
    "gatsby-source-filesystem": "^2.11.0",
    "gatsby-source-shopify": "^3.10.0",
    "gatsby-source-storyblok": "^2.0.0",
    "gatsby-transformer-sharp": "^2.12.0",
    "isomorphic-fetch": "^3.0.0",
    "js-yaml": "^3.13.1",
    "lodash": "^4.17.19",
    "prop-types": "^15.7.2",
    "querystringify": "^2.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "set-value": "^3.0.2",
    "shopify-buy": "^2.11.0",
    "storyblok-react": "^0.1.2"
  },
  "devDependencies": {
    "prettier": "^2.2.1"
  },

If I say my wish, I'm hoping that soon Gatsby team will update this starter to v3🙏

How this error occurred?

Well, I was at the section of "Add the Storyblok Bridge and Cache Version" in Storyblok's hands-on tutorial.

https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial#add-the-storyblok-bridge-and-cache-version

I built a blog once as this tutorial blog post describes.

And this time is to play around to build Gatsby x Shopify e-commerce.

I was in the layouts/index.js file.

And adding Helmet components as Storyblok described linking Storyblok visual editor with my gatsby-shopify-starter.

Then this error popped up.

Here's what I added.

import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import styled from '@emotion/styled'

import ContextProvider from '~/provider/ContextProvider'

import { GlobalStyle } from '~/utils/styles'
import Navigation from '~/components/Navigation'

import { Helmet } from 'react-helmet'
import StoryblokService from '../utils/storyblok-service'

const Wrapper = styled.div`
  margin: 0 auto;
  max-width: 960px;
  padding: 0px 1.0875rem 1.45rem;
`

const Layout = ({ children }) => {
  return (
    <ContextProvider>
      {/* 👇 added Helmet components */}
      <Helmet
        script={[
          {"src": `//app.storyblok.com/f/storyblok-latest.js?t=${StoryblokService.token}`,
          "type": "text/javascript"}
        ]}
      />
      <Helmet
          script={[
            {
            "innerHTML": `var StoryblokCacheVersion = '${StoryblokService.getCacheVersion()}';`,
            "type": "text/javascript"
            }
          ]}
      />
      <GlobalStyle />
      <StaticQuery
        query={graphql`
          query SiteTitleQuery {
            site {
              siteMetadata {
                title
              }
            }
          }
        `}
        render={data => (
          <>
            <Navigation siteTitle={data.site.siteMetadata.title} />
            <Wrapper>
              {children}
              <footer>
                © {new Date().getFullYear()}, Built with
                {` `}
                <a href="https://www.gatsbyjs.org">Gatsby</a>
              </footer>
            </Wrapper>
          </>
        )}
      />
    </ContextProvider>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Basically, if we're attempting to use fs inside a React component, then it shows.

When you face to this error, it's most likely the problem is in a top level Cannot resolve module 'fs', or just part of a webpack error.

A solution

It wasn't that complicated, so chill, my friends☕️

You'll see the cases from Angler to React etc.

But luckily, Gatsby already prepared a solution even in their documentation.

Issues with 'fs' resolution: Gatsby

All you need to do is just follow what it's written.

Simply, add this code into gatsby-node.js

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    node: {
      fs: "empty",
    },
  })
}

After that, you're all good to go👍

Hope you found some relevant info from what you're looking for!

Comments

[Jorge Arbeláez]

Hi, I have the same problem
I am importing a component that uses another component called XLSX to export excel files.
When I import this component it is giving me the following error:
Module not found: Error: Can't resolve 'fs' in 'D: \ Project \ node_modules \ react-data-export \ node_modules \ tempa-xlsx'
I've been looking for a solution for 2 days and I don't know what to do.
Thanks for your help

[Sharif Al-Hayek]

did you solve it ?? im using react js and have the same problem.