Gatsby: Wordpress / Netlify build failure due to relative path issue.

[giovannif23]

Description

Gatsby with Worpdress works locally but will not deploy on Netlify due to a relative path issue.

Environment

Gatsby version: 1.9.153
Node.js version: 6.10.1
Yarn version: 1.3.2
Operating System: macOS Sierra 10.12.6

File contents (if changed):

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Grayt Nutrition',
  },
  pathPrefix: '/',
  plugins: [
    'gatsby-plugin-netlify',
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        baseUrl: 'api.graytnutrition.com',
        protocol: 'http',
        hostingWPCOM: false,
        useACF: true,
      },
    },
    'gatsby-plugin-netlify'
  ]
};

exports.modifyWebpackConfig = ({config, env}) => {
  config.merge({
    resolve: {
      root: [
        path.resolve(__dirname, './src'),
        path.resolve(__dirname, 'node_modules')
      ],
      extensions: ['', '.js', '.jsx', '.json'],
    }
  });
  return config;
};

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "animejs": "^2.2.0",
    "bluebird": "^3.5.1",
    "gatsby": "^1.9.153",
    "gatsby-link": "^1.6.34",
    "gatsby-plugin-netlify": "^1.0.17",
    "gatsby-plugin-react-helmet": "^2.0.3",
    "gatsby-plugin-sharp": "^1.6.27",
    "gatsby-source-wordpress": "^2.0.44",
    "gatsby-transformer-sharp": "^1.6.17",
    "lodash": "^4.17.4",
    "moment": "^2.20.1",
    "normalize.css": "^7.0.0",
    "polished": "^1.9.0",
    "prop-types": "^15.6.0",
    "react-helmet": "^5.2.0",
    "react-icons": "^2.2.7",
    "styled-components": "^3.1.6"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.10.2"
  }
}

gatsby-node.js:

const _ = require(`lodash`)
const Promise = require(`bluebird`)
const path = require(`path`)
const slash = require(`slash`)

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators
  return new Promise((resolve, reject) => {
    graphql(
      `
        {
          allWordpressWpArticulos {
            edges {
              node {
                id
                slug
                title
                content
              }
            }
          }
        }
      `
    ).then(result => {
      if (result.errors) {
        console.log(result.errors)
        reject(result.errors)
      }
      const articleTemplate = path.resolve(`./src/pages/articulo.js`)
      // We want to create a detailed page for each
      // post node. We'll just use the Wordpress Slug for the slug.
      // The Post ID is prefixed with 'POST_'
      _.each(result.data.allWordpressWpArticulos.edges, edge => {
        createPage({
          path: `/articulos/${edge.node.slug}`,
          component: slash(articleTemplate),
          context: {
            id: edge.node.id,
          },
        })
      })
      resolve()
    })
  })
  // ==== END POSTS ====
}

gatsby-browser.js:
gatsby-ssr.js:

Actual result

Build is successful while running locally but it fails on Netlify with the error below.

11:05:19 PM: error Generating JavaScript bundles failed
11:05:19 PM: 
11:05:19 PM:   Error: ./~/babel-loader/lib?{"presets":["/opt/build/repo/~/babel-preset-react/  lib/index.js","/opt/build/repo/~/babel-preset-es2015/lib/index.js","/opt/build  /repo/~/babel-preset-stage-1/lib/index.js",["/opt/build/repo/~/babel-preset-en  v/lib/index.js",{"loose":true,"uglify":true,"modules":"commonjs","targets":{"b  rowsers":["> 1%","last 2 versions","IE >= 9"]},"exclude":["transform-regenerat  or","transform-es2015-typeof-symbol"]}],"/opt/build/repo/~/babel-preset-stage-  0/lib/index.js","/opt/build/repo/~/babel-preset-react/lib/index.js"],"plugins"  :["/opt/build/repo/~/gatsby/dist/utils/babel-plugin-extract-graphql.js","/opt/  build/repo/~/babel-plugin-add-module-exports/lib/index.js","/opt/build/repo/~/  babel-plugin-add-module-exports/lib/index.js","/opt/build/repo/~/babel-plugin-  transform-object-assign/lib/index.js"],"cacheDirectory":true}!./src/pages/arti  culo.js
11:05:19 PM:   Module not found: Error: Cannot resolve 'file' or 'directory' ../components/or  ganisms/header in /opt/build/repo/src/pages
11:05:19 PM:   resolve file
11:05:19 PM:     /opt/build/repo/src/components/organisms/header doesn't exist
11:05:19 PM:     /opt/build/repo/src/components/organisms/header.js doesn't exist
11:05:19 PM:     /opt/build/repo/src/components/organisms/header.jsx doesn't exist
11:05:19 PM:   resolve directory
11:05:19 PM:     /opt/build/repo/src/components/organisms/header doesn't exist (directory def  ault file)
11:05:19 PM:     /opt/build/repo/src/components/organisms/header/package.json doesn't exist (  directory description file)
11:05:19 PM:   [/opt/build/repo/src/components/organisms/header]
11:05:19 PM:   [/opt/build/repo/src/components/organisms/header.js]
11:05:19 PM:   [/opt/build/repo/src/components/organisms/header.jsx]
11:05:19 PM:    @ ./~/babel-loader/lib?{"presets":["/opt/build/repo/~/babel-preset-react/lib/  index.js","/opt/build/repo/~/babel-preset-es2015/lib/index.js","/opt/build/rep  o/~/babel-preset-stage-1/lib/index.js",["/opt/build/repo/~/babel-preset-env/li  b/index.js",{"loose":true,"uglify":true,"modules":"commonjs","targets":{"brows  ers":["> 1%","last 2 versions","IE >= 9"]},"exclude":["transform-regenerator",  "transform-es2015-typeof-symbol"]}],"/opt/build/repo/~/babel-preset-stage-0/li  b/index.js","/opt/build/repo/~/babel-preset-react/lib/index.js"],"plugins":["/  opt/build/repo/~/gatsby/dist/utils/babel-plugin-extract-graphql.js","/opt/buil  d/repo/~/babel-plugin-add-module-exports/lib/index.js","/opt/build/repo/~/babe  l-plugin-add-module-exports/lib/index.js","/opt/build/repo/~/babel-plugin-tran  sform-object-assign/lib/index.js"],"cacheDirectory":true}!./src/pages/articulo  .js 26:14-55

Expected behavior

I am expecting for the ES6 modules to resolve correctly to their relative paths.

Steps to reproduce

You can build using Netlify's docker image for testing.

docker pull netlify/build
git clone https://github.com/netlify/build-image
cd build-image
./test-tools/start-image.sh /path/to/your/checked/out/repository
build gatsby

I was unable to have a successful build even when using other Wordpress examples/starters. I've also tried to extend the Webpack build to suppor the ./src path and the node_modules path.

Any help is greatly appreciated.

exports.modifyWebpackConfig = ({config, env}) => {
  config.merge({
    resolve: {
      root: [
        path.resolve(__dirname, './src'),
        path.resolve(__dirname, 'node_modules')
      ],
      extensions: ['', '.js', '.jsx', '.json'],
    }
  });
  return config;
};

[KyleAMathews]

It's probably a case problem e.g. you named your file Header.js yet you tried requiring header. It works on your mac but doesn't on Linux which has a case-sensitive file system.

[giovannif23]

@KyleAMathews that's what Netlify mentioned and it also states it in there docs. I have updated all of my filenames and I'm still seeing the same issue. Do you think that it could be caused by something else?

[giovannif23]

@KyleAMathews I originally update the file in my IDE. I just updated them using git mv Name.js name.js and it finally accepted the build. Thanks for your quick response!

[farskid]

@giovannif23 This happened to me too! I could see my files named as capitalized but yet on the github repo, they were named lowercase! I used git mv as you mentioned and finally Netlify is building!
Thanks.

[codingimages]

So the issue is to change from capitalized to lower case letters in component names? Sorry I couldn’t understand.