<p dir="auto">I'm behind a corporate firewall and have to have a .npmrc setup with a proxy and https-proxy.</p>
<p dir="auto">There appears to be something in next@6.0.0 that tries to connect to npm on launch and seems to ignore my .npmrc proxy settings as I'm seeing what look like proxy problems when I start my next app in dev mode.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">running <code class="notranslate">yarn dev</code> or <code class="notranslate">npm run dev</code> should bring up the server.</p>
<h2 dir="auto">Current Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="λ yarn dev
yarn run v1.3.2
$ next
{ Error: connect ECONNREFUSED 151.101.0.162:443
    at Object._errnoException (util.js:1024:11)
    at _exceptionWithHostPort (util.js:1046:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1182:14)
  code: 'ECONNREFUSED',
  errno: 'ECONNREFUSED',
  syscall: 'connect',
  address: '151.101.0.162',
  port: 443 }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command."><pre class="notranslate"><code class="notranslate">λ yarn dev
yarn run v1.3.2
$ next
{ Error: connect ECONNREFUSED 151.101.0.162:443
    at Object._errnoException (util.js:1024:11)
    at _exceptionWithHostPort (util.js:1046:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1182:14)
  code: 'ECONNREFUSED',
  errno: 'ECONNREFUSED',
  syscall: 'connect',
  address: '151.101.0.162',
  port: 443 }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
</code></pre></div>
<p dir="auto">n.b. this does not occur when using <code class="notranslate">yarn build</code> &amp; <code class="notranslate">yarn start</code>.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">This appears to affect all projects, but I used this one:</p>
<p dir="auto"><a href="https://github.com/zeit/next.js/tree/canary/examples/hello-world">https://github.com/zeit/next.js/tree/canary/examples/hello-world</a></p>
<p dir="auto">You need to be relying on a custom .npmrc with a proxy - everything is fine if you don't have a proxy.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">This has only broken since upgrading to next@6.0.0 - maybe related to <code class="notranslate">update-check</code>?</p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>6.0.0</td>
</tr>
<tr>
<td>node</td>
<td>8.9.1</td>
</tr>
<tr>
<td>OS</td>
<td>Windows 7 x64</td>
</tr>
</tbody>
</table>
<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>
<p dir="auto">When defining a variable with css outside of React class components there are no problems:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const backgroundImageStyle = css`
  div {
    background-color: red;
  }
`;

class Dropdown extends Component {
  render() {
    return (
      &lt;div&gt;
        &lt;style jsx&gt;{backgroundImageStyle}&lt;/style&gt;
      &lt;/div&gt;
    );
  }
}

export default Dropdown;
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">backgroundImageStyle</span> <span class="pl-c1">=</span> <span class="pl-en">css</span><span class="pl-s">`</span>
<span class="pl-s">  <span class="pl-ent">div</span> {</span>
<span class="pl-s">    <span class="pl-c1">background-color</span><span class="pl-kos">:</span> red;</span>
<span class="pl-s">  }</span>
<span class="pl-s">`</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">Dropdown</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</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-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">backgroundImageStyle</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</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-v">Dropdown</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">But when moving the style definition into <code class="notranslate">render()</code> like this, it doesn't work:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="render() {
  const backgroundImageStyle = css`
    div {
      background-color: red;
    }
  `;

  return (
    &lt;div&gt;
      &lt;style jsx&gt;{backgroundImageStyle}&lt;/style&gt;
    &lt;/div&gt;
  );
}"><pre class="notranslate"><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">backgroundImageStyle</span> <span class="pl-c1">=</span> <span class="pl-en">css</span><span class="pl-s">`</span>
<span class="pl-s">    <span class="pl-ent">div</span> {</span>
<span class="pl-s">      <span class="pl-c1">background-color</span><span class="pl-kos">:</span> red;</span>
<span class="pl-s">    }</span>
<span class="pl-s">  `</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">backgroundImageStyle</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">It gives me this error message:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="StyleSheet: `insertRule` accepts only strings.
Error: StyleSheet: `insertRule` accepts only strings.
    at invariant (node_modules/styled-jsx/dist/lib/stylesheet.js:274:11)
    at StyleSheet.insertRule (node_modules/styled-jsx/dist/lib/stylesheet.js:125:7)
    at node_modules/styled-jsx/dist/stylesheet-registry.js:88:29
    at Array.map (native)
    at StyleSheetRegistry.add (node_modules/styled-jsx/dist/stylesheet-registry.js:87:27)
    at JSXStyle.componentWillMount (node_modules/styled-jsx/dist/style.js:58:26)
    at resolve (node_modules/react-dom/cjs/react-dom-server.node.development.js:2119:12)
    at ReactDOMServerRenderer.render (node_modules/react-dom/cjs/react-dom-server.node.development.js:2260:22)
    at ReactDOMServerRenderer.read (node_modules/react-dom/cjs/react-dom-server.node.development.js:2234:19)
    at renderToString (node_modules/react-dom/cjs/react-dom-server.node.development.js:2501:25)"><pre class="notranslate"><code class="notranslate">StyleSheet: `insertRule` accepts only strings.
Error: StyleSheet: `insertRule` accepts only strings.
    at invariant (node_modules/styled-jsx/dist/lib/stylesheet.js:274:11)
    at StyleSheet.insertRule (node_modules/styled-jsx/dist/lib/stylesheet.js:125:7)
    at node_modules/styled-jsx/dist/stylesheet-registry.js:88:29
    at Array.map (native)
    at StyleSheetRegistry.add (node_modules/styled-jsx/dist/stylesheet-registry.js:87:27)
    at JSXStyle.componentWillMount (node_modules/styled-jsx/dist/style.js:58:26)
    at resolve (node_modules/react-dom/cjs/react-dom-server.node.development.js:2119:12)
    at ReactDOMServerRenderer.render (node_modules/react-dom/cjs/react-dom-server.node.development.js:2260:22)
    at ReactDOMServerRenderer.read (node_modules/react-dom/cjs/react-dom-server.node.development.js:2234:19)
    at renderToString (node_modules/react-dom/cjs/react-dom-server.node.development.js:2501:25)
</code></pre></div>
<p dir="auto">Why is that so and is there a way to fix this? The reason why I want to define the style within <code class="notranslate">render()</code> is because I want to modify it based on props coming in:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="render() {
  let backgroundImageStyle;
  if (this.props.bgcolor) {
    backgroundImageStyle = css`
      div {
        background-color: ${this.props.bgcolor};
      }
    `;
  } else {
    backgroundImageStyle = css`
      div {
        background-color: red;
      }
    `;
  }

  return (
    &lt;div&gt;
      &lt;style jsx&gt;{backgroundImageStyle}&lt;/style&gt;
    &lt;/div&gt;
  );
}"><pre class="notranslate"><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">let</span> <span class="pl-s1">backgroundImageStyle</span><span class="pl-kos">;</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">bgcolor</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">backgroundImageStyle</span> <span class="pl-c1">=</span> <span class="pl-en">css</span><span class="pl-s">`</span>
<span class="pl-s">      <span class="pl-ent">div</span> {</span>
<span class="pl-s">        <span class="pl-c1">background-color</span><span class="pl-kos">:</span><span class="pl-c1"></span> <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">bgcolor</span><span class="pl-kos">}</span></span>;</span>
<span class="pl-s">      }</span>
<span class="pl-s">    `</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
    <span class="pl-s1">backgroundImageStyle</span> <span class="pl-c1">=</span> <span class="pl-en">css</span><span class="pl-s">`</span>
<span class="pl-s">      <span class="pl-ent">div</span> {</span>
<span class="pl-s">        <span class="pl-c1">background-color</span><span class="pl-kos">:</span> red;</span>
<span class="pl-s">      }</span>
<span class="pl-s">    `</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">backgroundImageStyle</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>