Unmatched dynamic module ids in Loadable.preloadReady (wrong manifest)

Bug report

The code

    READY_INITIALIZERS.push(ids => {
      for (const moduleId of moduleIds) {
        if (ids.indexOf(moduleId) !== -1) {
          return init()
        }
      }
    })

fails resolving and init is not called.

For example here is the code that uses dynamic:

const HomePageLoader = dynamic(() => import('../four-nets/homepage/homepage-loader'));
const ForumLoader = dynamic(() => import('../four-nets/forum/forum-loader'));
const Two = dynamic(() => import('two'));

export default ({path}) => {
    return (
        <>
            <Two></Two>
            {path === '/' ? <HomePageLoader/> : null}
            {path === '/forum' ? <ForumLoader/> : null}
        </>
    );
};

Here is the loadable-manifest:

 {
  "../four-nets/forum/forum-loader": [
    {
      "id": "./lib/images/image-view.scss",
      "name": "./lib/images/image-view.scss",
      "file": "static/chunks/styles.js",
      "publicPath": "static/chunks/styles.js"
    },
    {
      "id": "./app/react-intl/intl-message.tsx",
      "name": "./app/react-intl/intl-message.tsx",
      "file": "static/chunks/13.js",
      "publicPath": "static/chunks/13.js"
    }
  ],
  "../four-nets/homepage/homepage-loader": [
    {
      "id": "./lib/images/image-view.scss",
      "name": "./lib/images/image-view.scss",
      "file": "static/chunks/styles.js",
      "publicPath": "static/chunks/styles.js"
    },
    {
      "id": "./app/react-intl/intl-message.tsx",
      "name": "./app/react-intl/intl-message.tsx",
      "file": "static/chunks/12.js",
      "publicPath": "static/chunks/12.js"
    }
  ],
  "./dev/noop": [
    {
      "id": "./node_modules/next/dist/client/dev/noop.js",
      "name": "./node_modules/next/dist/client/dev/noop.js",
      "file": "static/chunks/11.js",
      "publicPath": "static/chunks/11.js"
    }
  ],
  "./lib/cookieconsent": [
    {
      "id": "./four-nets/lib/cookieconsent.js",
      "name": "./four-nets/lib/cookieconsent.js",
      "file": "static/chunks/7.js",
      "publicPath": "static/chunks/7.js"
    }
  ],
  "./lib/google-analytics": [
    {
      "id": "./four-nets/lib/ga_id.js",
      "name": "./four-nets/lib/ga_id.js",
      "file": "static/chunks/3.js",
      "publicPath": "static/chunks/3.js"
    }
  ],
  "./menus/account-menu-view": [
    {
      "id": "./lib/images/image-view.scss",
      "name": "./lib/images/image-view.scss",
      "file": "static/chunks/styles.js",
      "publicPath": "static/chunks/styles.js"
    },
    {
      "id": "./four-nets/header/navigation/user-panel/menus/account-menu-view.js",
      "name": "./four-nets/header/navigation/user-panel/menus/account-menu-view.js",
      "file": "static/chunks/5.js",
      "publicPath": "static/chunks/5.js"
    }
  ],
  "./menus/mail-menu-view": [
    {
      "id": "./lib/images/image-view.scss",
      "name": "./lib/images/image-view.scss",
      "file": "static/chunks/styles.js",
      "publicPath": "static/chunks/styles.js"
    },
    {
      "id": "./four-nets/common/message/messages-list-view.js",
      "name": "./four-nets/common/message/messages-list-view.js",
      "file": "static/chunks/2.js",
      "publicPath": "static/chunks/2.js"
    }
  ],
  "./menus/notification-menu-view": [
    {
      "id": "./lib/images/image-view.scss",
      "name": "./lib/images/image-view.scss",
      "file": "static/chunks/styles.js",
      "publicPath": "static/chunks/styles.js"
    },
    {
      "id": "./four-nets/common/message/messages-list-view.js",
      "name": "./four-nets/common/message/messages-list-view.js",
      "file": "static/chunks/4.js",
      "publicPath": "static/chunks/4.js"
    }
  ],
  "blueimp-load-image": [
    {
      "id": "./node_modules/blueimp-load-image/js/index.js",
      "name": "./node_modules/blueimp-load-image/js/index.js",
      "file": "static/chunks/6.js",
      "publicPath": "static/chunks/6.js"
    }
  ],
  "emojione": [
    {
      "id": "./node_modules/emojione/lib/js/emojione.js",
      "name": "./node_modules/emojione/lib/js/emojione.js",
      "file": "static/chunks/10.js",
      "publicPath": "static/chunks/10.js"
    }
  ],
  "four-nets/mail/write-mail/write-mail-view": [
    {
      "id": "./lib/images/image-view.scss",
      "name": "./lib/images/image-view.scss",
      "file": "static/chunks/styles.js",
      "publicPath": "static/chunks/styles.js"
    },
    {
      "id": "./four-nets/icons/svg/icon_attachment.svg",
      "name": "./four-nets/icons/svg/icon_attachment.svg",
      "file": "static/chunks/1.js",
      "publicPath": "static/chunks/1.js"
    }
  ],
  "intl": [
    {
      "id": "./node_modules/intl/index.js",
      "name": "./node_modules/intl/index.js",
      "file": "static/chunks/9.js",
      "publicPath": "static/chunks/9.js"
    }
  ],
  "jquery": [
    {
      "id": "./node_modules/jquery/dist/jquery.js",
      "name": "./node_modules/jquery/dist/jquery.js",
      "file": "static/chunks/0.js",
      "publicPath": "static/chunks/0.js"
    }
  ],
  "react-apollo/getDataFromTree": [
    {
      "id": "./node_modules/react-apollo/getDataFromTree.js",
      "name": "./node_modules/react-apollo/getDataFromTree.js",
      "file": "static/chunks/8.js",
      "publicPath": "static/chunks/8.js"
    }
  ],
  "two": [
    {
      "id": "./two.js",
      "name": "./two.js",
      "file": "static/chunks/14.js",
      "publicPath": "static/chunks/14.js"
    }
  ]
}

And window dynamicIds:

window.__NEXT_DATA__.dynamicIds
(3) ["./two.js", "./lib/images/image-view.scss", "./app/react-intl/intl-message.tsx"]

So the code above resolves to

["./two.js", "./lib/images/image-view.scss", "./app/react-intl/intl-message.tsx"].indexOf('../four-nets/homepage/homepage-loader')

and the module is not preloaded , so React outputs warning: Warning: Did not expect server HTML to contain

I think the issue resides in webpack’s chunk optimization, when it merges chunks into the chunkGroup (that’s why the some modules share the same id in manifest).

I think the solution is to save the window.NEXT_DATA.dynamicIds in a Map where key is the module name and value a Set of module ids. Something like this:

{
'../four-nets/homepage/homepage-loader'': ["./lib/images/image-view.scss", "./app/react-intl/intl-message.tsx"],
' "two":  ["./two.js"]
'
}

I guess the module names will be numbers in production, but that should be ok.

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies) [e.g. chrome, safari]
• Version of Next.js: [e.g. 6.0.2]

Additional context

Add any other context about the problem here.

[pristas-peter]

It seems the bug is only present in development mode. Run it locally with npm i && npx next dev

[Timer]

How do I reproduce this with your demo? It works fine when deployed and on my local.

https://next-dynamic-bug-d77g65mm3.now.sh/