Continuous Deployment breaks subfolder pages

[timbrandin]

Hi, love this project, and yeah you might recognise me from last years graphql conference in SF where we talked for a long time on the roof. Sorry for taking so long to test this out, but wow what an amazing thing you've built! Wow! 👍 💯

Anyhow, I'm using gatsby build and deploying the public folder to s3 for http://savedalsloppet.se and it works great from my mac, but somehow when testing out automatic deployment through bitbucket pipelines it breaks my subfolder pages. Specifically all pages below /om-loppet i.e.:

• /om-loppet/10km
• /om-loppet/5km
• /om-loppet/5km
• /om-loppet/5km

And the error I get is not making sense to me at all:

bootstrap ac88a123be1a2f9f10d3:52 Uncaught TypeError: Cannot read property 'call' of undefined
    at t (bootstrap ac88a123be1a2f9f10d3:52)
    at race-page.js?76ce:11
    at loader.js:93
    at loader.js:78
    at race-page.js?76ce:11
    at handler (patch.js:18)
    at patch.js:39
    at window.webpackJsonp (bootstrap ac88a123be1a2f9f10d3:20)
    at component---src-templates-race-page-js-c44dcf4c1258b1065af0.js:1

I've tried changing node versions (node:lastest, node:boron) and it doesn't make any difference.
I tested with "prefixPath": "/" in my config without any difference.
And I've searched for a couple hours now on google without result, this is my last resort. :/

Do you have any ideas on what else I can test?
Otherwise I will have to stick deploying manually.

[KyleAMathews]

Hard to say… have you figured out what the code is there? Don't think I've seen that error before.

Really sweet looking site btw :-) once we get the showcase up on gatsbyjs.org it'd be great to have this site there.

[timbrandin]

Wow! that was fast!

thx, yeah sure, it needs some more polishing first (need to reduce the size of the images and fix some responsive issues).

Where do you mean with there in "have you figured out what the code is there?"?

[KyleAMathews]

Where do you mean with there in "have you figured out what the code is there?"?

Like what is the source for the code error? E.g. is that the webpack bootstrap? Or something else?

[timbrandin]

I'm confused I guess, if you go to that page /om-loppet/5km and open the console you will see it immediately. But from my best guess it looks to be an issue with webpack when being built in bitbucket.

[timbrandin]

Don't know if this helps, but this script is what I use to build and deploy both locally and on bitbucket: ./node_modules/.bin/gatsby build --prefix-paths && ./node_modules/.bin/s3-website deploy ./public

[KyleAMathews]

Only thing I can guess is this is a linux vs. mac issue w/ filesystem name diffs. Try replicating the problem on a Linux machine?

[timbrandin]

yeah, that could be an issue. I can see if I can reproduce this locally in a linux docker container.

[timbrandin]

Yep, you are completely correct, this is related to linux.

I created a docker-compose.yml file to test this out.

docker-compose.yml

version: '2'
services:
  node:
    image: node:boron
    volumes:
      - ./:/var/www
    working_dir: /var/www
    command: bash -c "npm install && npm run publish"

You run it with:
docker-compose up

[piotrfonte]

So how do I get around fixing this? I’m having the exact same issue it seems: #2399

[KyleAMathews]

@PiotrF try getting a dev environment setup on Linux either in Node.js or on a VM and then build your site and look for errors? There's some subtle differences between linux and macs that can cause troubles.

[KyleAMathews]

Closing out old issues. Open up a new issue please if you need more help!