Client side routing / JS chunk loading not working on deploy

Support
1

Hi Netlify team,

On my development server, my website works fine! However, when trying to deploy it to Netlify, the main page content is not loaded. Please see the following screenshots:

I am using client-side routing together with code splitting. Upon further investigations of this issue with the Chrome dev tools, I can see the following errors:

image
image953Ă—240 25 KB

As you can see there is a weird CORS error and I am not sure why the content is being hosted on cloudfront and not on the netlify application itself.

Also, the landing JS chunk which contains the code for the app main content is not being loaded (again from Cloudfront, maybe because of the CORS config…), see the following screenshot:

image
image955Ă—268 22 KB

This is the content of my netlify.toml file if that can help:

# Settings in the [build] context are global and are applied to all contexts
# unless otherwise overridden by more specific contexts.
[build]
  # Directory to change to before starting a build.
  # This is where we will look for package.json/.nvmrc/etc.
  base = "/"

  # Directory that contains the deploy-ready HTML files and assets generated by
  # the build. This is relative to the base directory if one has been set, or the
  # root directory if a base has not been set. This sample publishes the
  # directory located at the absolute path "root/project/build-output"
  publish = "build/"

  # Default build command.
  command = "yarn build"

[build.environment]
  NODE_VERSION = "13.12.0"
  YARN_VERSION = "1.22.4"

# If skip_processing = true, all other settings are ignored
[build.processing]
  skip_processing = false
[build.processing.css]
  bundle = true
  minify = true
[build.processing.js]
  bundle = true
  minify = true
[build.processing.html]
  pretty_urls = true
[build.processing.images]
  compress = true

# Redirects and headers are GLOBAL for all builds – they do not get scoped to
# contexts no matter where you define them in the file.
# For context-specific rules, use _headers or _redirects files, which are
# PER-DEPLOY.

# The following redirect is intended for use with most SPAs that handle
# routing internally.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"

  [headers.values]
    # Access-Control-Allow-Origin = "https://www.googletagmanager.com"
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    # Content-Security-Policy = "frame-ancestors https://www.facebook.com"

    # Multi-value headers are expressed with multi-line strings.
      # cache-control = '''
      # max-age=0,
      # no-cache,
      # no-store,
      # must-revalidate'''

Looking forward to hearing from you as I am unable to deploy the website right now.

EDIT: Looking at the response “Content-Type”, it seems that there is a problem since it is set to “text/html”, hope this helps troubleshoting the issue:

image
image945Ă—589 32.4 KB

Kind regards,
Alex

2

hi there,

could you try something for me? could you try turning off asset optimization and see if that helps?

3

Hi @perry,

I tried turning off assets’ optimisation from the dashboard settings and then browsing to the website in incognito mode but the issue is still present.

EDIT: After turning off assets’ optimisation in the netlify.toml rather than on the dashboard settings by setting skip_processing = true, the website works as it should!

Could you please advise on the steps to take to fix my configuration and still keep Netlify assets’ optimisation on?

EDIT 1: I have noticed a weird behaviour, when turning off assets’ optimisation on previews only with:
# Skip all post processing in deploy previews,
# ignoring any other settings
[context.deploy-preview.processing]
skip_processing = true

The issue is still present although I am browsing the deploy preview in an incognito window.

Kind regards,
Alex

4

Hi, @aress31, the asset optimization is not disabled for this site:

screenshot
screenshot935Ă—496 46.6 KB

The highlighted checkbox above must be disabled in the UI to disabled asset optimization.

The netlify.toml setting should also work though. If it isn’t working, would you please send us a link to the deploy preview where that is not working?

5

Hi @luke,

I edited my previous post to add more information. I think that my netlify.toml overwrote the dashboard configuration, therefore, I turned back on assets’ optimisation on the dashboard level but turned it off in my netlify.toml.

As mentioned in the previous post however, the context (for branch-deploy and my dev branch does not seem to have any effect in my netlify.toml), also I would like to keep optimisation of assets on, could you please advise on what is the issue there and how to solve it in a way that I keep the Netlify post-process optimisations?

6

Hi @aress31,

One of the things I noticed is that your site assets use hashes in the filename. Per [Support Guide] How does Netlify’s CDN handle caching files?, one of the ways your browser will know when a new version of your assets exists is by filename. However, if the filenames changes all the time, browser will keep looking for the old files that would not exist on newer deploys.

That said, can you try disabling any sort of filename hashing and see if that helps?

7

I also had this problem.

If assets are immutable, it makes a lot of sense to keep them around for a few days to prevent failure on lazy asset retrieval.

I ended up putting together a plugin to keep those files around. Hope it helps you/others with this problem - GitHub - andyrichardson/netlify-plugin-ttl-cache: A Netlify plugin for persisting immutable build assets across releases.

1 Like
8

Thanks so much for sharing this, @andyrichardson! We appreciate it.