<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/webpack</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tkqubo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tkqubo">@tkqubo</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bumbleblym/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bumbleblym">@bumbleblym</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bcherny/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bcherny">@bcherny</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tommytroylin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tommytroylin">@tommytroylin</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mohsen1/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mohsen1">@mohsen1</a></li>
</ul>
</li>
</ul>
<p dir="auto">I'm using <code class="notranslate">webpack-dev-server</code> and before upgrading from v4.4.4 of <code class="notranslate">@types/webpack</code>, everything worked fine.<br>
But now that I upgraded to v4.4.8, following warning is printed:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="WARNING in [at-loader] ./webpack/development.ts:12:3 
    TS2322: Type '{ mode: &quot;development&quot;; devtool: &quot;source-map&quot;; devServer: { host: string; clientLogLevel: string; ...' is not assignable to type 'Configuration'.
  Object literal may only specify known properties, and 'devServer' does not exist in type 'Configuration'."><pre class="notranslate"><code class="notranslate">WARNING in [at-loader] ./webpack/development.ts:12:3 
    TS2322: Type '{ mode: "development"; devtool: "source-map"; devServer: { host: string; clientLogLevel: string; ...' is not assignable to type 'Configuration'.
  Object literal may only specify known properties, and 'devServer' does not exist in type 'Configuration'.
</code></pre></div>
<p dir="auto">Config in question looks like this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as webpack from &quot;webpack&quot;;

import { commonConfig } from &quot;./common&quot;;

const config: webpack.Configuration = {
  ...commonConfig,

  mode: &quot;development&quot;,

  // Enable sourcemaps for debugging webpack's output.
  devtool: &quot;source-map&quot;,
  devServer: {
    host: &quot;0.0.0.0&quot;,
    clientLogLevel: &quot;none&quot;,
    port: 3000
  }
};

export default config;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-s1">webpack</span> <span class="pl-k">from</span> <span class="pl-s">"webpack"</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">commonConfig</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./common"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">config</span>: <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-smi">Configuration</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  ...<span class="pl-s1">commonConfig</span><span class="pl-kos">,</span>

  <span class="pl-c1">mode</span>: <span class="pl-s">"development"</span><span class="pl-kos">,</span>

  <span class="pl-c">// Enable sourcemaps for debugging webpack's output.</span>
  <span class="pl-c1">devtool</span>: <span class="pl-s">"source-map"</span><span class="pl-kos">,</span>
  <span class="pl-c1">devServer</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">host</span>: <span class="pl-s">"0.0.0.0"</span><span class="pl-kos">,</span>
    <span class="pl-c1">clientLogLevel</span>: <span class="pl-s">"none"</span><span class="pl-kos">,</span>
    <span class="pl-c1">port</span>: <span class="pl-c1">3000</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">config</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Could be a result from <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="336414322" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/26895" data-hovercard-type="pull_request" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/pull/26895/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/26895">#26895</a>.</p>
<p dir="auto">I would like to suggest an update to the best practices document, namely that we establish and document some sort of pattern, similar to <a href="https://github.com/borisyankov/DefinitelyTyped/tree/master/react">React</a>, for modules vs. global ambient declarations. The gist is very similar to my comments in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="109624232" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/6112" data-hovercard-type="pull_request" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/pull/6112/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/6112">#6112</a>.</p>
<p dir="auto">Idea being that hopefully:</p>
<ul dir="auto">
<li>a greater percentage of new definitions will be ES6 module 'ready' right out of the box</li>
<li>updates to existing definitions can easily cite the best practices on the motivation/style for the change being proposed in a PR that seeks to make a definition ES6 module 'ready', e.g. like <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="109624232" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/6112" data-hovercard-type="pull_request" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/pull/6112/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/6112">#6112</a></li>
</ul>
<p dir="auto">I've cited the React pattern in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="109624232" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/6112" data-hovercard-type="pull_request" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/pull/6112/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/6112">#6112</a> on the basis it seems like the right approach to follow. <code class="notranslate">lodash</code> I believe requires a slightly different pattern because we are effectively exporting a variable and a namespace (hence can't use <code class="notranslate">export =</code>).</p>
<p dir="auto">The one question I would add is whether we can improve the test file situation with this pattern: in the React package, the only difference between <a href="https://github.com/borisyankov/DefinitelyTyped/blob/master/react/react-tests.ts"><code class="notranslate">react-tests.ts</code></a> and <a href="https://github.com/borisyankov/DefinitelyTyped/blob/master/react/react-tests.ts"><code class="notranslate">react-global-tests.ts</code></a> is as follows:</p>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$ diff -wu react-tests.ts react-global-tests.ts
--- react-tests.ts      2015-09-09 15:29:36.595420049 +0100
+++ react-global-tests.ts       2015-09-09 15:29:36.595420049 +0100
@@ -1,5 +1,4 @@
-/// &lt;reference path=&quot;react.d.ts&quot; /&gt;
-import React = require(&quot;react&quot;);
+/// &lt;reference path=&quot;react-global.d.ts&quot; /&gt;

 interface Props extends React.Props&lt;MyComponent&gt; {
     hello: string;"><pre class="notranslate">$ diff -wu react-tests.ts react-global-tests.ts
<span class="pl-md">--- react-tests.ts      2015-09-09 15:29:36.595420049 +0100</span>
<span class="pl-mi1">+++ react-global-tests.ts       2015-09-09 15:29:36.595420049 +0100</span>
<span class="pl-mdr">@@ -1,5 +1,4 @@</span>
<span class="pl-md"><span class="pl-md">-</span>/// &lt;reference path="react.d.ts" /&gt;</span>
<span class="pl-md"><span class="pl-md">-</span>import React = require("react");</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>/// &lt;reference path="react-global.d.ts" /&gt;</span>

 interface Props extends React.Props&lt;MyComponent&gt; {
     hello: string;</pre></div>
<p dir="auto">It seems a burden to have to maintain both, with the difference being a single reference and a single import.</p>
<p dir="auto">Would welcome your thoughts <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/borisyankov/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/borisyankov">@borisyankov</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vvakame/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vvakame">@vvakame</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/johnnyreilly/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/johnnyreilly">@johnnyreilly</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/basarat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/basarat">@basarat</a></p>