After Deployment there are errors like build isn't propagated and errors are thrown in browser's console

I’m trying to upload my project to Moovweb, I’ve uploaded the project and URL created doesn’t load anything and throws some errors like unexpected token ‘<’ and when I hit ‘xdn deploy’ command my terminal says the ‘Build has not yet propagated’. I’m attaching my routes.js file as well.!

TerminalMessageAfterDeploying|690x372

Hi Ali. I see that when your site loads /static/js/8.325d7cb1.chunk.js it gets a 302 redirecting it to homepage which serves HTML while browser is expecting JS. Hence the unexpected token error.

In your router I see that you don’t serve the chunks but rather go to origin for anything else other than the homepage. Router needs to know that these chunks need to be uploaded and served. If you are using a framework (e.g. Nuxt or Next) then I recommend that you use our respective package for that framework (e.g. if Nuxt then @xdn/nuxt, etc.)

Assuming Next you would do this:

const { nextRoutes } = require('@xdn/next')

module.exports = new Router()
  // your custom routes specifying caching keys, TTL, other routing rules
  .get('/', ({ serveStatic }) => { serveStatic("build/index.html") })
  .use(nextRoutes)
  .fallback(({ proxy }) => proxy('origin')

The complete guide for Next can be found here. We also support Nuxt, barebones React, Sapper, Gatsby, etc.

Let me know if this helps.

okay can you let me the syntax of custom routes?
i’m using react js and i’ve modified my routes.js file but it is showing alot more errors


Your router syntax is fine and I see that the chunks are now correctly served. I’m unsure re exceptions of your JavaScript client code which is what I believe you are getting there on the screen. Do you have reason to believe that those exceptions are being issued by XDN client code?

Regarding 404s, you could write the serve static rule more generally:

module.exports = new Router()
  .get('/static/:splat*', ({ serveStatic }) => { serveStatic('build/static/:splat*') })
  .get('/', ({ serveStatic }) => { serveStatic("build/index.html") })
  .fallback(({ proxy }) => proxy('origin')

You can read more about React integration here and more about the router itself here and here

works perfectly fine, loading and everything.
but the browser is throwing me the this error after few hours of successful and tested deployment.
URL :- https://muhammad-ali-ph-applicant-q7-default.moovweb-edge.io/account/login

Thank you so much, If you could help me in this i’ll be thankfull

It looks like none of your routes match that URL. Can you share your XDN router configuration?

which file do you want me to share? which file contains XDN router config. ?

this is my routes.js

this is my xdn.config.js file

these are the errors I’m facing and upon reload I get this ( None of the specified routes in “default” destination have matched the request (edge receive). )

this is the routes.js files from src folder

routes.js that imports the @xdn/core/router is what controls the routes that get defined on the XDN. Have there been more routes added to that compared to the screenshot you shared a couple days ago? I’d like to see that full file if you could paste it here as plain text instead of an image, that would make it easier to read.

Also, looks like you have some paths/chunks hardcoded, which I suspect is going to change between builds. Take a look at this example to make the route more dynamic. Following this pattern will likely resolve the issue of /manifest.json not being found since you don’t appear to have a route defined for it.

Thanks,
Tristan

const { Router } = require(’@xdn/core/router’)

module.exports = new Router()

.prerender([{ path: ‘/’ }])

.get(’/static/:splat*’, ({ serveStatic }) => { serveStatic(‘build/static/:splat*’) })

.get(’/assets/:splat*’, ({ serveStatic }) => { serveStatic(‘build/assets/:splat*’) })

.get(’/static/js/8.325d7cb1.chunk.js’, ({serveStatic }) => {serveStatic(‘build/static/js/8.325d7cb1.chunk.js’)})

.get(’/static/js/main.93c108ab.chunk.js’, ({serveStatic }) => {serveStatic(‘build/static/js/main.93c108ab.chunk.js’)})

.get(’/’, ({serveStatic }) => {serveStatic(‘build/index.html’)})

@ali,

Did you try to define your routes like in the doc example I provided above? You are still hardcoding your paths which I do not recommend. Plus, I do not see a route still for manifest.json. That would be resolved using this convention:

module.exports = new Router()
  .prerender([{ path: '/' }])
  // js and css assets are hashed and can be far-future cached in the browser
  .get('/static/:path*', ({ cache, serveStatic }) => {
    cache(edgeAndBrowser)
    serveStatic('build/static/:path*')
  })
  // all paths that do not have a "." as well as "/"" should serve the app shell (index.html)
  .get('/:path*/:file([^\\.]+|)', ({ cache, appShell }) => {
    cache(edgeOnly)
    appShell('build/index.html')
  })
  // all other paths should be served from the build directory
  .get('/:path*', ({ cache, serveStatic }) => {
    cache(edgeOnly)
    serveStatic('build/:path*')
  })

If you are still having issues and are comfortable sharing your repo, reach out to me via private message and I will look through the code and make adjustments to get a successful deploy to go forward with.

2 Likes

@tristan.lee thank you so much for the help, the above code you sent works fine

1 Like