DEV Community

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

Posted on • Updated on


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


Oh, sorry.

Not this.

This one :)


Generating development JavaScript bundle failed

Can't resolve 'fs' in

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.

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 (
      {/* 👇 added Helmet components */}
          {"src": `//${StoryblokService.token}`,
          "type": "text/javascript"}
            "innerHTML": `var StoryblokCacheVersion = '${StoryblokService.getCacheVersion()}';`,
            "type": "text/javascript"
      <GlobalStyle />
          query SiteTitleQuery {
            site {
              siteMetadata {
        render={data => (
            <Navigation siteTitle={} />
                © {new Date().getFullYear()}, Built with
                {` `}
                <a href="">Gatsby</a>

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


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 }) => {
    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!

Top comments (2)

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

sharifhayek profile image
Sharif Al-Hayek

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