Hydration stop working when target: static and url contain non-ascii char

[ddio]

Versions

• nuxt: v2.15.8
• node: v12.19.0

Reproduction

Check this repo for example code & detail reproduce procedure.

Hydration stop working when:

1. target = static
2. user visit the url contains non-ascii character, such as http://localhost:3000/%E3%84%A9%E3%84%87/id0/ from a clean browser session

This issue only happened in the static site generated by nuxt generate. It works as expected in dev mode, by running nuxt

Steps to reproduce

1. Check the above repo

   git clone git@github.com:ddio/nuxt-hydration-bug.git
   cd nuxt-hydration-bug
   

2. Generate static assets and start server

   npm install
   npm run generate
   npm run start
   

3. Visit root page, expect no error, pass

   http://localhost:3000
   

4. Click first link (id0) from root page, expect no error, pass

   http://localhost:3000/%E3%84%A9%E3%84%87/id0/
   

5. Reload id0 page by pressing F5 or browser reload button, expect no error in console, failed

   http://localhost:3000/%E3%84%A9%E3%84%87/id0/
   

What is Expected?

The page load without error in console

What is actually happening?

The console report

TypeError: t.payload is undefined

Payload is generated in asyncData in _id.vue, which will always return an object, if asyncData is executed.

const SOME_DATA = {
  id0: { title: 'Title of id0' },
  id1: { title: 'Title of id1' }
}

export default {
  asyncData ({ params }) {
    const payload = SOME_DATA[params.id] || { title: 'ID not found' }
    return { payload }
  }
}

All javascript, except the one triggered from layout/ directly, are not executed.

For example, please edit content in the input box at bottom of id0 page, although there's a v-model, the data attributes is not reactive.

[cellargalaxy]

I had a similar problem too, but i am not js coder, can't analyze reason of the question
我也遇到了类似的问题，但我并不是前端开发，分析不出问题所在
#10428

[nahcnuj]

I found out the cause.

A payload is loaded by __NUXT_IMPORT__ defined by importChunk function.
The function tries to find the payload by a chunkId in chunks, failedChunks and chunksInstalling, or fails.
The chunkId is the first parameter of the function and is passed a decoded path.

On the other hand, payload.js is a script that calls __NUXT_JSONP__ function, which accepts chunkId as the first parameter and sets a payload to chunks[chunkId].
In payload.js the first argument is an encoded path.

That is, because chunkId used for setting and getting are different, the payload cannot be loaded.

[nahcnuj]

I created a patch to fix it:
https://github.com/nahcnuj/nuxt-multibyte-url-demo/blob/aced58b90777422ac48cf70157d63273114e47be/patches/@nuxt+vue-app+2.15.8.patch

I confirmed it fixed the bug, but I don't know how to create its test...

[cellargalaxy]

I created a patch to fix it: https://github.com/nahcnuj/nuxt-multibyte-url-demo/blob/aced58b90777422ac48cf70157d63273114e47be/patches/@nuxt+vue-app+2.15.8.patch

I confirmed it fixed the bug, but I don't know how to create its test...

great, it is work, thank you

[nahcnuj]

This bug is not reproduced in dev branch because it has been fixed already in the PR #9494

I can't wait for the next release! XD

[manniL]

Resolved via #9494