title: Webpack 5 Error: Should not import the named export 'foo' (imported as 'bar') from default-exporting module
body: <p>After upgrading to Webpack 5, I'm now encountering this error:</p>
  <blockquote>
  <p>./node-modules/@fizz/my-library/components/MyComponent/MyComponent.js:97:19-39 - Error: Should not import the named export 'foo' (imported as 'bar')
  from default-exporting module (only default export is available soon)</p>
  </blockquote>
  <p>The issue occurs in an imported library that I cannot modify. The problematic import is this:</p>
  <pre><code>import { foo as bar } from '../ParentComponent.css.json';
  </code></pre>
  <p>ParentComponent.css.json looks like this:</p>
  <pre><code>{
      &quot;foo&quot;: { 
          &quot;a&quot;: 1,
          &quot;b&quot;: 2,
          &quot;c&quot;: 3
      },
      ...
  }
  </code></pre>
  <p>I have the following in tsconfig.json:</p>
  <pre><code>&quot;compilerOptions&quot;: {
      &quot;module&quot;: &quot;commonjs&quot;,
      &quot;moduleResolution&quot;: 'node&quot;,
      &quot;target&quot;: &quot;es2015&quot;,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;resolveJsonModule&quot;: true,
      &quot;esModuleInterop&quot;: true,
      ...
  }
  </code></pre>
  <p>Any ideas on how I can resolve this error? I have tried deleting node_modules and package-lock.json but have had no success.</p>