![Cover image for [Gatsby, Storyblok] "Can't resolve 'fs' in x"](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzcxqu98g4r5171l7o1d0.png)
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👇
"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.
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.
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!
Top comments (2)
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
did you solve it ?? im using react js and have the same problem.