<h2 dir="auto">Feature Request</h2>
<p dir="auto">In contexts where Babel is running alongside a filesystem watcher, there are cases where a plugin may load an arbitrary file. Take a plugin like <a href="https://www.npmjs.com/package/babel-plugin-inline-import" rel="nofollow">https://www.npmjs.com/package/babel-plugin-inline-import</a> for example. Or some usecases of babel-plugin-macros.</p>
<p dir="auto">It would be ideal if Babel had a way for plugins to indicate that these dependencies exist, so that if callers of Babel wanted to take that into account, they could. For example, Webpack has <a href="https://webpack.js.org/api/loaders/#this-adddependency" rel="nofollow"><code class="notranslate">.addDependency</code></a>, so that changes to that file will cause the loader to re-execute when the dependency is changed. We could easily use this API in <code class="notranslate">babel-loader</code> to handle this. Implementing a similar API in <code class="notranslate">@babel/cli</code>'s watcher wouldn't be too bad either.</p>
<p dir="auto">I don't know how other Babel wrappers would fair, but if someone wanted to help investigate that, it would certainly help. Off the top off my head we'd want to check, at the very least, if the following have ways to register additional files to watch:</p>
<ul dir="auto">
<li>Meteor</li>
<li>Jest</li>
<li>Browserify</li>
<li>Gulp</li>
</ul>
<h3 dir="auto">Edit</h3>
<p dir="auto">We may also want to include in this work logic to help us take dependency file content into account for the purposes of cache invalidation. For example, <code class="notranslate">babel-loader</code>'s <code class="notranslate">cacheDirectory</code> option will not invalidate caches, if say a <code class="notranslate">.browserlistrc</code> file changes <code class="notranslate">preset-env</code>'s plugin list: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="364087522" data-permission-text="Title is private" data-url="https://github.com/babel/babel-loader/issues/690" data-hovercard-type="issue" data-hovercard-url="/babel/babel-loader/issues/690/hovercard" href="https://github.com/babel/babel-loader/issues/690">babel/babel-loader#690</a></p>
<p dir="auto">This is a bug report</p>

<h3 dir="auto">Input Code</h3>


<p dir="auto">The following code produces an error:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export class Test {
  static staticProp = {};
  constructor(props) {
    console.log(props);
  }
  log = (props) =&gt; {
    console.log(props.msg);
  };
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">Test</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-c1">staticProp</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-c1">log</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">msg</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Babel/Babylon Configuration (.babelrc, package.json, cli command)</h3>

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    [&quot;@babel/stage-1&quot;, { &quot;decoratorsLegacy&quot;: true }]
  ]
}
"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"presets"</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span><span class="pl-s">"@babel/stage-1"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-s">"decoratorsLegacy"</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">]</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Expected Behavior</h3>


<p dir="auto">Babel should successfully compile the code. Works with babel 6 in the REPL: <a href="https://babeljs.io/repl/#?babili=false&amp;browsers=&amp;build=&amp;builtIns=usage&amp;code_lz=KYDwDg9gTgLgBAYwDYEMDOa4BVhvgbwCg448UYBLBUmcqgBSgjDgF458BfAbmMQgB2eKAFcEMaAAowTMGgCUHPiQSC0EJMAB0SCAHNpshbxKc-uvWziHmCtgD4lJFWo3aLNuVoC2aPfJM4HkJOIA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=true&amp;fileSize=false&amp;lineWrap=false&amp;presets=stage-1&amp;prettier=false&amp;targets=&amp;version=6.26.0&amp;envVersion=1.6.2" rel="nofollow">https://babeljs.io/repl/#?babili=false&amp;browsers=&amp;build=&amp;builtIns=usage&amp;code_lz=KYDwDg9gTgLgBAYwDYEMDOa4BVhvgbwCg448UYBLBUmcqgBSgjDgF458BfAbmMQgB2eKAFcEMaAAowTMGgCUHPiQSC0EJMAB0SCAHNpshbxKc-uvWziHmCtgD4lJFWo3aLNuVoC2aPfJM4HkJOIA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=true&amp;fileSize=false&amp;lineWrap=false&amp;presets=stage-1&amp;prettier=false&amp;targets=&amp;version=6.26.0&amp;envVersion=1.6.2</a></p>
<h3 dir="auto">Current Behavior</h3>


<p dir="auto">Babel fails to compile with the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
    at NodePath.insertAfter (/path/to/project/node_modules/@babel/traverse/lib/path/modification.js:154:11)
    at PluginPass.Class (/path/to/project/node_modules/@babel/plugin-proposal-class-properties/lib/index.js:267:14)
    at newFn (/path/to/project/node_modules/@babel/traverse/lib/visitors.js:243:21)
    at NodePath._call (/path/to/project/node_modules/@babel/traverse/lib/path/context.js:65:18)
    at NodePath.call (/path/to/project/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/path/to/project/node_modules/@babel/traverse/lib/path/context.js:100:12)
    at TraversalContext.visitQueue (/path/to/project/node_modules/@babel/traverse/lib/context.js:144:16)
    at TraversalContext.visitSingle (/path/to/project/node_modules/@babel/traverse/lib/context.js:104:19)
    at TraversalContext.visit (/path/to/project/node_modules/@babel/traverse/lib/context.js:185:19)
    at Function.traverse.node (/path/to/project/node_modules/@babel/traverse/lib/index.js:106:17)"><pre class="notranslate"><code class="notranslate">Error: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
    at NodePath.insertAfter (/path/to/project/node_modules/@babel/traverse/lib/path/modification.js:154:11)
    at PluginPass.Class (/path/to/project/node_modules/@babel/plugin-proposal-class-properties/lib/index.js:267:14)
    at newFn (/path/to/project/node_modules/@babel/traverse/lib/visitors.js:243:21)
    at NodePath._call (/path/to/project/node_modules/@babel/traverse/lib/path/context.js:65:18)
    at NodePath.call (/path/to/project/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/path/to/project/node_modules/@babel/traverse/lib/path/context.js:100:12)
    at TraversalContext.visitQueue (/path/to/project/node_modules/@babel/traverse/lib/context.js:144:16)
    at TraversalContext.visitSingle (/path/to/project/node_modules/@babel/traverse/lib/context.js:104:19)
    at TraversalContext.visit (/path/to/project/node_modules/@babel/traverse/lib/context.js:185:19)
    at Function.traverse.node (/path/to/project/node_modules/@babel/traverse/lib/index.js:106:17)
</code></pre></div>
<h3 dir="auto">Possible Solution</h3>


<p dir="auto">Not sure, but it's interesting that either of the following adjustments can be used to work around the issue:</p>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Use different identifiers for constructor arg and `log` arg
export class Test {
  static staticProp = {};
  constructor(props) {
    console.log(props);
  }
- log = (props) =&gt; {
+ log = (p) =&gt; {
-   console.log(props.msg);
+   console.log(p.msg);
  };
}"><pre class="notranslate">// Use different identifiers for constructor arg and `log` arg
export class Test {
  static staticProp = {};
  constructor(props) {
    console.log(props);
  }
<span class="pl-md"><span class="pl-md">-</span> log = (props) =&gt; {</span>
<span class="pl-mi1"><span class="pl-mi1">+</span> log = (p) =&gt; {</span>
<span class="pl-md"><span class="pl-md">-</span>   console.log(props.msg);</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>   console.log(p.msg);</span>
  };
}</pre></div>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Export the class separate from its declaration
-export class Test {
+class Test {
  static staticProp = {};
  constructor(props) {
    console.log(props);
  }
  log = (props) =&gt; {
    console.log(props.msg);
  };
}
+
+export { Test };"><pre class="notranslate">// Export the class separate from its declaration
<span class="pl-md"><span class="pl-md">-</span>export class Test {</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>class Test {</span>
  static staticProp = {};
  constructor(props) {
    console.log(props);
  }
  log = (props) =&gt; {
    console.log(props.msg);
  };
}
<span class="pl-mi1"><span class="pl-mi1">+</span></span>
<span class="pl-mi1"><span class="pl-mi1">+</span>export { Test };</span></pre></div>
<h3 dir="auto">Context</h3>


<p dir="auto">Trying to use what I <em>think</em> is compliant with the current proposals, but have to follow one of the provided workarounds instead.</p>
<h3 dir="auto">Your Environment</h3>

<table role="table">
<thead>
<tr>
<th>software</th>
<th>version(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Babel</td>
<td>7.0.0-beta.46</td>
</tr>
<tr>
<td>Babylon</td>
<td></td>
</tr>
<tr>
<td>node</td>
<td>8.6.0</td>
</tr>
<tr>
<td>npm</td>
<td>yarn 1.5.1</td>
</tr>
<tr>
<td>Operating System</td>
<td>mac OS</td>
</tr>
</tbody>
</table>