<h1 dir="auto">Bug report</h1>
<p dir="auto">Using the <code class="notranslate">React.StrictMode</code> wrapper, and inside this wrapper using some dynamic import. Is throwing this warning:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13313058/55733713-9a8d9700-5a1e-11e9-95ef-07206329b895.png"><img src="https://user-images.githubusercontent.com/13313058/55733713-9a8d9700-5a1e-11e9-95ef-07206329b895.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Is not a "Bug",  everything works. However I reported as a bug because IMO this should be fixed to work perfectly under the strict mode.</p>
<h2 dir="auto">To Reproduce</h2>
<ol dir="auto">
<li>Wrap your app with <code class="notranslate">&lt;StrictMode&gt;&lt;App /&gt;&lt;/StrictMode&gt;</code></li>
<li>Use some <code class="notranslate">dynamic(import('...'))</code> inside the app</li>
<li>Open the dev tools console and see the warning</li>
</ol>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Starting in React 16.9.0 using 'componentWillMount' issues a deprecation warning because it has been renamed to UNSAFE_componentWillMount. Instead it is suggested to use componentDidMount.</p>
<p dir="auto">This was discovered by using dynamic imports with react 16.9.0 (Released yesterday) and nextjs 9.0.3</p>
<p dir="auto">Full error is</p>
<blockquote>
<p dir="auto">Warning: componentWillMount has been renamed, and is not recommended for use. See <a href="https://fb.me/react-async-component-lifecycle-hooks" rel="nofollow">https://fb.me/react-async-component-lifecycle-hooks</a> for details.</p>
<ul dir="auto">
<li>Move code with side effects to componentDidMount, and set initial state in the constructor.</li>
<li>Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run <code class="notranslate">npx react-codemod rename-unsafe-lifecycles</code> in your project source folder.</li>
</ul>
<p dir="auto">Please update the following components: LoadableComponent</p>
</blockquote>
<p dir="auto">Code Reference:<br>
<a href="https://github.com/zeit/next.js/blob/master/packages/next-server/lib/loadable.js#L174">https://github.com/zeit/next.js/blob/master/packages/next-server/lib/loadable.js#L174</a></p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto"><code class="notranslate">npm install react react-dom next</code></p>
<p dir="auto">Then just add a dynamic import</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
const DynamicComponent = dynamic(() =&gt; import(`./file`), {
	loading: () =&gt; '&lt;div&gt;Loading Component&lt;/div&gt;',
});
function TestComponent() {
	return &lt;DynamicComponent /&gt;
}
export default TestComponent;"><pre class="notranslate"><code class="notranslate">import React from 'react';
const DynamicComponent = dynamic(() =&gt; import(`./file`), {
	loading: () =&gt; '&lt;div&gt;Loading Component&lt;/div&gt;',
});
function TestComponent() {
	return &lt;DynamicComponent /&gt;
}
export default TestComponent;
</code></pre></div>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">loadable.js should be fixed to either work with componentDidMount (See comment below) or UNSAFE_componentWillMount</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/564256/62801893-9096a600-ba9b-11e9-86da-2705d0f9bc9d.png"><img src="https://user-images.githubusercontent.com/564256/62801893-9096a600-ba9b-11e9-86da-2705d0f9bc9d.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>Version of Next.js: 9.0.3</li>
</ul>