Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Chunk names are not saved properly #4603

Closed
fatfisz opened this issue Jun 14, 2018 · 0 comments · Fixed by #4604
Closed

Chunk names are not saved properly #4603

fatfisz opened this issue Jun 14, 2018 · 0 comments · Fixed by #4604

Comments

@fatfisz
Copy link
Contributor

fatfisz commented Jun 14, 2018

Bug report

Describe the bug

Chunk names are not processed properly which causes problems with SSR.

To Reproduce

  1. Create a new project, install next@canary, react, react-dom.
  2. Add Pages and a page that uses dynamic(import('...')).
  3. Add a component used by the page.
  4. Launch yarn next
  5. The component renders on the server.
  6. "Loading..." appears for a brief moment, there are complaints in the console because of the failed hydration.

Expected behavior

Component's chunk should be properly marked and loaded on the client side before the page is hydrated.

System information

  • Version of Next.js: 6.0.4-canary.6 (bug introduced in 6.0.4-canary.0)

Additional context

The problem was introduced in #4436 - in development mode chunk names don't include hash anymore. Since "available" chunk names are processed by removing the last hyphen and the part that comes after it (e.g. file-0123456789.js -> file) and the only hyphen is now gone, chunk names are not changed anymore: file.js -> file.js.

I've prepared a fix for that, will submit a PR soon.
@fatfisz fatfisz mentioned this issue Jun 14, 2018
Merged
timneutkens pushed a commit that referenced this issue Jun 14, 2018
@fatfisz @timneutkens
Process available chunk names properly in dev mode (#4604)
7333dd6 
Fixes #4603.

Tests explain it the best:

```js
    describe('development mode (no chunkhash)', () => {
      it('should strip the extension from the filename', () => {
        const filename = 'foo_bar_0123456789abcdef.js'
        expect(getChunkNameFromFilename(filename, true)).toBe('foo_bar_0123456789abcdef')
      })

      it('should only strip the extension even if there\'s a hyphen in the name', () => {
        const filename = 'foo-bar-0123456789abcdef.js'
        expect(getChunkNameFromFilename(filename, true)).toBe('foo-bar-0123456789abcdef')
      })
    })

    describe('production mode (with chunkhash)', () => {
      it('should strip the hash from the filename', () => {
        const filename = 'foo_bar_0123456789abcdef-0123456789abcdef.js'
        expect(getChunkNameFromFilename(filename, false)).toBe('foo_bar_0123456789abcdef')
      })

      it('should only strip the part after the last hyphen in the filename', () => {
        const filename = 'foo-bar-0123456789abcdef-0123456789abcdef.js'
        expect(getChunkNameFromFilename(filename, false)).toBe('foo-bar-0123456789abcdef')
      })
    })
```
lependu pushed a commit to lependu/next.js that referenced this issue Jun 19, 2018
@fatfisz @lependu
Process available chunk names properly in dev mode (vercel#4604)
e7132db 
Fixes vercel#4603.

Tests explain it the best:

```js
    describe('development mode (no chunkhash)', () => {
      it('should strip the extension from the filename', () => {
        const filename = 'foo_bar_0123456789abcdef.js'
        expect(getChunkNameFromFilename(filename, true)).toBe('foo_bar_0123456789abcdef')
      })

      it('should only strip the extension even if there\'s a hyphen in the name', () => {
        const filename = 'foo-bar-0123456789abcdef.js'
        expect(getChunkNameFromFilename(filename, true)).toBe('foo-bar-0123456789abcdef')
      })
    })

    describe('production mode (with chunkhash)', () => {
      it('should strip the hash from the filename', () => {
        const filename = 'foo_bar_0123456789abcdef-0123456789abcdef.js'
        expect(getChunkNameFromFilename(filename, false)).toBe('foo_bar_0123456789abcdef')
      })

      it('should only strip the part after the last hyphen in the filename', () => {
        const filename = 'foo-bar-0123456789abcdef-0123456789abcdef.js'
        expect(getChunkNameFromFilename(filename, false)).toBe('foo-bar-0123456789abcdef')
      })
    })
```
@lock lock bot locked as resolved and limited conversation to collaborators Jun 14, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Process available chunk names properly in dev mode fatfisz/next.js
1 participant
@fatfisz