Search code examples
node-modulesgatsbynetlify

Receiving a "module not found" and "field 'browser' doesn't contain a valid alias configuration" deploying my site to Netlify

My GatsbyJS site runs fine locally but does not produce a successful build when deploying to Netlify. I've researched the error I'm receiving and haven't had any luck. Changing the case of the file name or changing the file path doesn't work.

Image 1 of build fail Image 2 of build fail

Link to repository

Solution

  • On your local machine, run the command gatsby build will result in the error you show in the images.

    You will notice the error lines:

    Error: ./src/components/header.js
... Can't resolve 'components/variables.css' in ...

opt/build/repo/node_modules/components/variables.css doesn't exist

    tells you it is trying to resolve the components/variables.css as a module in your project.

    Solution

    Change the import line for variables.css in header.js:

    src/components/header.js

    import styled from 'styled-components'
import 'components/variables.css'
...

    to the following:

    src/components/header.js

    import styled from 'styled-components'
import './variables.css'
...