<p dir="auto">Wanted to create another issue for this, as this is a very import bug that is occurring; which hopefully can be fixed soon :(</p>
<p dir="auto">Same issue/behavior as <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="296330860" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/3775" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/3775/hovercard" href="https://github.com/vercel/next.js/issues/3775">#3775</a>.</p>
<p dir="auto">Example code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const LoadProfile = dynamic(import('../components/Profile/LoadProfile'), {
  loading: () =&gt; &lt;div&gt;Loading Profile...&lt;/div&gt;
})

const Profile = ({ username }) =&gt; (
  &lt;App title=&quot;Profile&quot;&gt;
    &lt;article&gt;
      &lt;h1&gt;Profile ({username})&lt;/h1&gt;
      &lt;LoadProfile username={username} /&gt;
    &lt;/article&gt;
  &lt;/App&gt;
)"><pre class="notranslate"><code class="notranslate">const LoadProfile = dynamic(import('../components/Profile/LoadProfile'), {
  loading: () =&gt; &lt;div&gt;Loading Profile...&lt;/div&gt;
})

const Profile = ({ username }) =&gt; (
  &lt;App title="Profile"&gt;
    &lt;article&gt;
      &lt;h1&gt;Profile ({username})&lt;/h1&gt;
      &lt;LoadProfile username={username} /&gt;
    &lt;/article&gt;
  &lt;/App&gt;
)
</code></pre></div>
<p dir="auto">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.</p>
<p dir="auto">Thanks for any support/help!</p>
<p dir="auto">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:</p>
<p dir="auto"><code class="notranslate">const DynamicChart = dynamic( import('../components/LineChart/LineChart'), { loading: () =&gt; &lt;SectionPlaceholder&gt;&lt;Loader /&gt;&lt;/SectionPlaceholder&gt;, ssr: false, }, );</code></p>
<p dir="auto">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.</p>
<p dir="auto">This is the error I get:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9268745/36093000-8e62f87e-0fe9-11e8-9023-cc8f1f391b59.png"><img src="https://user-images.githubusercontent.com/9268745/36093000-8e62f87e-0fe9-11e8-9023-cc8f1f391b59.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">I tried <code class="notranslate">import(...).then(...).catch(...)</code> but none of chains were triggered.</p>
<p dir="auto">The problem is that I can't reproduce it always.</p>
<p dir="auto">I'm also using <a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-routes">next-routes</a> if that matters</p>
<p dir="auto">I assume that problem occurs because of <code class="notranslate">undefined</code> part in webpack. Any ideas how to debug the cause?</p>
<p dir="auto">My package dependencies:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" &quot;dependencies&quot;: {
    &quot;babel-plugin-styled-components&quot;: &quot;^1.5.0&quot;,
    &quot;dotenv&quot;: &quot;^5.0.0&quot;,
    &quot;dotenv-webpack&quot;: &quot;^1.5.4&quot;,
    &quot;enzyme&quot;: &quot;^3.3.0&quot;,
    &quot;eslint-plugin-jest&quot;: &quot;^21.7.0&quot;,
    &quot;express&quot;: &quot;^4.16.2&quot;,
    &quot;glamor&quot;: &quot;^2.20.40&quot;,
    &quot;glamorous&quot;: &quot;^4.11.4&quot;,
    &quot;htmlescape&quot;: &quot;^1.1.1&quot;,
    &quot;isomorphic-fetch&quot;: &quot;^2.2.1&quot;,
    &quot;lodash&quot;: &quot;^4.17.5&quot;,
    &quot;next&quot;: &quot;^5.0.0&quot;,
    &quot;next-redux-wrapper&quot;: &quot;^1.3.5&quot;,
    &quot;next-routes&quot;: &quot;^1.3.0&quot;,
    &quot;polished&quot;: &quot;^1.9.2&quot;,
    &quot;react&quot;: &quot;^16.2.0&quot;,
    &quot;react-dom&quot;: &quot;^16.2.0&quot;,
    &quot;react-extras&quot;: &quot;^0.5.0&quot;,
    &quot;react-icons&quot;: &quot;^2.2.7&quot;,
    &quot;react-markdown&quot;: &quot;^3.2.0&quot;,
    &quot;react-modal&quot;: &quot;^3.1.12&quot;,
    &quot;react-no-ssr&quot;: &quot;^1.1.0&quot;,
    &quot;react-redux&quot;: &quot;^5.0.6&quot;,
    &quot;react-sizeme&quot;: &quot;^2.3.6&quot;,
    &quot;recharts&quot;: &quot;^1.0.0-beta.10&quot;,
    &quot;redux&quot;: &quot;^3.7.2&quot;,
    &quot;redux-logger&quot;: &quot;^3.0.6&quot;,
    &quot;redux-thunk&quot;: &quot;^2.2.0&quot;,
    &quot;reselect&quot;: &quot;^3.0.1&quot;,
    &quot;socket.io&quot;: &quot;^2.0.4&quot;,
    &quot;socket.io-client&quot;: &quot;^2.0.4&quot;,
    &quot;yargs&quot;: &quot;^11.0.0&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@storybook/addon-actions&quot;: &quot;^3.3.12&quot;,
    &quot;@storybook/addon-info&quot;: &quot;^3.3.12&quot;,
    &quot;@storybook/addon-links&quot;: &quot;^3.3.12&quot;,
    &quot;@storybook/addons&quot;: &quot;^3.3.12&quot;,
    &quot;@storybook/react&quot;: &quot;^3.3.12&quot;,
    &quot;@types/enzyme&quot;: &quot;^3.1.8&quot;,
    &quot;@types/jest&quot;: &quot;^22.1.1&quot;,
    &quot;@types/next&quot;: &quot;^2.4.7&quot;,
    &quot;@types/node&quot;: &quot;^9.4.1&quot;,
    &quot;@types/react&quot;: &quot;^16.0.36&quot;,
    &quot;@types/recharts&quot;: &quot;^1.0.13&quot;,
    &quot;@types/reselect&quot;: &quot;^2.2.0&quot;,
    &quot;@types/socket.io&quot;: &quot;^1.4.31&quot;,
    &quot;@types/storybook__react&quot;: &quot;^3.0.6&quot;,
    &quot;babel-core&quot;: &quot;^6.26.0&quot;,
    &quot;babel-eslint&quot;: &quot;^7.2.3&quot;,
    &quot;babel-plugin-recharts&quot;: &quot;^1.1.1&quot;,
    &quot;babel-plugin-transform-decorators-legacy&quot;: &quot;^1.3.4&quot;,
    &quot;babel-preset-env&quot;: &quot;^1.6.1&quot;,
    &quot;babel-preset-es2015&quot;: &quot;^6.24.1&quot;,
    &quot;babel-preset-stage-0&quot;: &quot;^6.24.1&quot;,
    &quot;babili-webpack-plugin&quot;: &quot;^0.1.2&quot;,
    &quot;console-probe&quot;: &quot;^2.0.4&quot;,
    &quot;create-component-app&quot;: &quot;^1.6.2&quot;,
    &quot;eslint&quot;: &quot;^4.17.0&quot;,
    &quot;eslint-config-airbnb&quot;: &quot;^16.1.0&quot;,
    &quot;eslint-plugin-babel&quot;: &quot;^4.1.2&quot;,
    &quot;eslint-plugin-import&quot;: &quot;^2.8.0&quot;,
    &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.0.3&quot;,
    &quot;eslint-plugin-react&quot;: &quot;^7.6.1&quot;,
    &quot;eslint-plugin-styled-components-config&quot;: &quot;0.0.2&quot;,
    &quot;jest&quot;: &quot;^22.1.4&quot;,
    &quot;prop-types&quot;: &quot;^15.6.0&quot;,
    &quot;redux-devtools-extension&quot;: &quot;^2.13.2&quot;,
    &quot;webpack-bundle-analyzer&quot;: &quot;^2.10.0&quot;
  }"><pre class="notranslate"><code class="notranslate"> "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"
  }
</code></pre></div>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Component gets loaded every time</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Sometimes component is not loaded and webpack tries to load something with <code class="notranslate">undefined</code> in name</p>