Issue 1:
Wanted to create another issue for this, as this is a very import bug that is occurring; which hopefully can be fixed soon :(

Same issue/behavior as #3775.

Example code:

const LoadProfile = dynamic(import('../components/Profile/LoadProfile'), {
loading: () => <div>Loading Profile...</div>
})

const Profile = ({ username }) => (
<App title="Profile">
<article>
<h1>Profile ({username})</h1>
<LoadProfile username={username} />
</article>
</App>
)

Any updates on when this can be fixed? I'm kinda in a standstill rn and without using dynamic imports it will severely hurt the performance of my application.

Thanks for any support/help!

Issue 2:
I have been using this piece of code to asynchronously load one of heavy component on my client side. It was working like a charm:

const DynamicChart = dynamic( import('../components/LineChart/LineChart'), { loading: () => <SectionPlaceholder><Loader /></SectionPlaceholder>, ssr: false, }, );

Since update to v5.0.0 I get webpack error, but only when I open the parent page from frontend route. When I directly load from server, it get's loaded. When I get it once (from first load) and go back to this page on frontend, it works too.

This is the error I get:

I tried import(...).then(...).catch(...) but none of chains were triggered.

The problem is that I can't reproduce it always.

I'm also using next-routes if that matters

I assume that problem occurs because of undefined part in webpack. Any ideas how to debug the cause?

My package dependencies:

"dependencies": {
"babel-plugin-styled-components": "^1.5.0",
"dotenv": "^5.0.0",
"dotenv-webpack": "^1.5.4",
"enzyme": "^3.3.0",
"eslint-plugin-jest": "^21.7.0",
"express": "^4.16.2",
"glamor": "^2.20.40",
"glamorous": "^4.11.4",
"htmlescape": "^1.1.1",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.17.5",
"next": "^5.0.0",
"next-redux-wrapper": "^1.3.5",
"next-routes": "^1.3.0",
"polished": "^1.9.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-extras": "^0.5.0",
"react-icons": "^2.2.7",
"react-markdown": "^3.2.0",
"react-modal": "^3.1.12",
"react-no-ssr": "^1.1.0",
"react-redux": "^5.0.6",
"react-sizeme": "^2.3.6",
"recharts": "^1.0.0-beta.10",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"socket.io": "^2.0.4",
"socket.io-client": "^2.0.4",
"yargs": "^11.0.0"
},
"devDependencies": {
"@storybook/addon-actions": "^3.3.12",
"@storybook/addon-info": "^3.3.12",
"@storybook/addon-links": "^3.3.12",
"@storybook/addons": "^3.3.12",
"@storybook/react": "^3.3.12",
"@types/enzyme": "^3.1.8",
"@types/jest": "^22.1.1",
"@types/next": "^2.4.7",
"@types/node": "^9.4.1",
"@types/react": "^16.0.36",
"@types/recharts": "^1.0.13",
"@types/reselect": "^2.2.0",
"@types/socket.io": "^1.4.31",
"@types/storybook__react": "^3.0.6",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-plugin-recharts": "^1.1.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babili-webpack-plugin": "^0.1.2",
"console-probe": "^2.0.4",
"create-component-app": "^1.6.2",
"eslint": "^4.17.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.6.1",
"eslint-plugin-styled-components-config": "0.0.2",
"jest": "^22.1.4",
"prop-types": "^15.6.0",
"redux-devtools-extension": "^2.13.2",
"webpack-bundle-analyzer": "^2.10.0"
}

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Component gets loaded every time

Current Behavior

Sometimes component is not loaded and webpack tries to load something with undefined in name