<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>


<p dir="auto"><strong>What is the current behavior?</strong><br>
When I upgraded Webpack from 3 to 4 I'v got strange output in dev mode:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="vue__WEBPACK_IMPORTED_MODULE_0__[&quot;default&quot;]vue__WEBPACK_IMPORTED_MODULE_1__[&quot;default&quot;].config.performance = &quot;development&quot;&quot;development&quot; !== 'production'
                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier"><pre class="notranslate"><code class="notranslate">vue__WEBPACK_IMPORTED_MODULE_0__["default"]vue__WEBPACK_IMPORTED_MODULE_1__["default"].config.performance = "development""development" !== 'production'
                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Here is config:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const path = require('path'),
      webpack = require('webpack'),
      VueSSRServerPlugin = require('vue-server-renderer/server-plugin'),
      CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  mode: 'development',

  entry: path.resolve(__dirname, './js/entry-server.js'),

  output: {
    path: path.resolve(__dirname, '../dist/server'),
    libraryTarget: 'commonjs2',
    filename: 'ssr-bundle.js'
  },

  target: 'node',

  module: {
    rules: [
      {
        test: /\.vue?$/,
        loader: 'vue-loader'
      }
    ]
  },

  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DefinePlugin({
      'API_PATH': '&quot;http://192.168.1.8:3001/api/&quot;'
    }),
    new VueSSRServerPlugin(),
    new CopyWebpackPlugin([{from: './js/server'}])
  ],

  performance: {
    maxEntrypointSize: 400000,
    assetFilter: assetFilename =&gt; assetFilename.endsWith('.js')
  },

  devtool: false
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-s1">webpack</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'webpack'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-v">VueSSRServerPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'vue-server-renderer/server-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-v">CopyWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'copy-webpack-plugin'</span><span class="pl-kos">)</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</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-c1">entry</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'./js/entry-server.js'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>

  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../dist/server'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">libraryTarget</span>: <span class="pl-s">'commonjs2'</span><span class="pl-kos">,</span>
    <span class="pl-c1">filename</span>: <span class="pl-s">'ssr-bundle.js'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c1">target</span>: <span class="pl-s">'node'</span><span class="pl-kos">,</span>

  <span class="pl-c1">module</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">rules</span>: <span class="pl-kos">[</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>vue?<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">loader</span>: <span class="pl-s">'vue-loader'</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">]</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">IgnorePlugin</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">^</span><span class="pl-cce">\.</span><span class="pl-cce">\/</span>locale<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span>moment<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">DefinePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-s">'API_PATH'</span>: <span class="pl-s">'"http://192.168.1.8:3001/api/"'</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-k">new</span> <span class="pl-v">VueSSRServerPlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-k">new</span> <span class="pl-v">CopyWebpackPlugin</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-kos">{</span><span class="pl-c1">from</span>: <span class="pl-s">'./js/server'</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>

  <span class="pl-c1">performance</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">maxEntrypointSize</span>: <span class="pl-c1">400000</span><span class="pl-kos">,</span>
    <span class="pl-en">assetFilter</span>: <span class="pl-s1">assetFilename</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">assetFilename</span><span class="pl-kos">.</span><span class="pl-en">endsWith</span><span class="pl-kos">(</span><span class="pl-s">'.js'</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c1">devtool</span>: <span class="pl-c1">false</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Here is part of code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Vue from 'vue'
Vue.config.performance = process.env.NODE_ENV !== 'production'"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Vue</span> <span class="pl-k">from</span> <span class="pl-s">'vue'</span>
<span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-c1">config</span><span class="pl-kos">.</span><span class="pl-c1">performance</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">!==</span> <span class="pl-s">'production'</span></pre></div>



<p dir="auto"><strong>What is the expected behavior?</strong><br>
Output must be correсt without strange duplication.</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong><br>
N/A<br>
<strong>Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.</strong><br>
Win 7 x64<br>
Node 9.7.1<br>
Webpack 4.1</p>
<p dir="auto">I am working on a loader for <a href="https://github.com/musictheory/oj">OJ</a> that compiles <code class="notranslate">.oj</code> files to JS. So far, this works very nicely especially since the compiler doesn't mind an async loader.</p>
<p dir="auto">There is one catch that I came across that is making things a bit complicated_</p>
<p dir="auto">When I inject the runtime via the following header:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    var header = [
        &quot;var oj = require('!!ojc/src/runtime');&quot;,
        &quot;global.oj = global['$oj_oj'] = oj;&quot;
    ].join(&quot;\n&quot;);"><pre class="notranslate">    <span class="pl-k">var</span> <span class="pl-s1">header</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
        <span class="pl-s">"var oj = require('!!ojc/src/runtime');"</span><span class="pl-kos">,</span>
        <span class="pl-s">"global.oj = global['$oj_oj'] = oj;"</span>
    <span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">"\n"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I get back a snippet in my output file that looks like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/***/ function(module, exports, __webpack_require__) {
    /* WEBPACK VAR INJECTION */(function(global) {
            // Within here we have the runtime. Runtime calls itself like:
            ;(function(){ /* snip */ }).call(this);
    /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
/***/ }"><pre class="notranslate"><span class="pl-c">/***/</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">/* WEBPACK VAR INJECTION */</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">global</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-c">// Within here we have the runtime. Runtime calls itself like:</span>
            <span class="pl-kos">;</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span> <span class="pl-c">/* snip */</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">call</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-c">/* WEBPACK VAR INJECTION */</span><span class="pl-kos">}</span><span class="pl-kos">.</span><span class="pl-en">call</span><span class="pl-kos">(</span><span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</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><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-c">/***/</span> <span class="pl-kos">}</span></pre></div>
<p dir="auto">The problem with this injection is, that <code class="notranslate">exports</code> is transformed  into the <code class="notranslate">this</code> of the function - and further, that internal function calls its first argument <code class="notranslate">global</code>, effectively shaddowing the real global (<code class="notranslate">window</code> in a browser). And I can't quite recognize what <code class="notranslate">(function() { return this; }())</code> will return... and I doubt it's the real global, which is <strong>mandatory</strong>.</p>
<p dir="auto">My questions are:</p>
<ul dir="auto">
<li>How do I properly inject this runtime?</li>
<li>Is there a way to only inject my header once into the global space? As in, reducing the duplication of code. <code class="notranslate">$oj_oj</code> is expected to keep its state, so I only want to assign it once, and only once.</li>
</ul>
<p dir="auto">Kind regards, Ingwie!</p>