DEV Community

Cover image for [Gatsby, Storyblok] "Can't resolve 'fs' in x"
Arisa Fukuzaki
Arisa Fukuzaki

Posted on • Edited on

4 3

[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?

What was the error?

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

gif

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
Enter fullscreen mode Exit fullscreen mode

And here's my environment👇

  "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"
  },
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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☕️

gif

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",
    },
  })
}
Enter fullscreen mode Exit fullscreen mode

After that, you're all good to go👍

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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (2)

Collapse
 
jorgearman profile image
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

Collapse
 
sharifhayek profile image
Sharif Al-Hayek

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs