Import error using Typescript + web-dev-server to resolve bare imports

[SantosR]

I just updated to v6.2.0 and I am now trying to get bare imports working with web-dev-server.  I'm sorry if it's a bit out of PIXI scope, but I believe others using this library might run or have ran into the same problem. 

I'm running into this error coming from @pixi/polyfill package as it tries to import the object-assign dependency:

polyfill.js:9 Uncaught SyntaxError: The requested module './../../../../object-assign/index.js' does not provide an export named 'default'

Apparently the problem is with the "export ="  syntax being used in that dependency. Any guidance on how to deal with this issue?

Thanks in advance,

[Shukant Pal]

You need to set `esModuleInterop` to true in your TypeScript configuration. See https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file#56348146

[SantosR]

25 minutes ago, Shukant Pal said:

You need to set `esModuleInterop` to true in your TypeScript configuration. See https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file#56348146

It's already set to true. I saw documentation on typescriptlang.org specifying that esModuleInterop is required for export default to work. The problem here seems to be that the dependency is using export = instead of export default.

Edited November 12, 2021 by SantosR

[SantosR]

I fixed it with a web-dev-server rollup plugin to convert CommonJS to es6, using these settings:

 

import { fromRollup } from '@web/dev-server-rollup';
import rollupCommonjs from '@rollup/plugin-commonjs';

const commonjs = fromRollup(rollupCommonjs);

export default {
  plugins: [
    commonjs({
      include: [
        // the commonjs plugin is slow, list the required packages explicitly:
        '**/node_modules/object-assign/**/*',
        '**/node_modules/url/**/*',
        '**/node_modules/eventemitter3/**/*',
        '**/node_modules/earcut/**/*',
        '**/node_modules/punycode/**/*',
        '**/node_modules/querystring/**/*',
      ],
    }),
  ],
};