[karma-esm] Could not resolve module imports in '.mjs' file

I’m trying to use karma-esm to test my libraries monorepo, writing typescript tests.

A simple test that does not import anything else than the testing works fine, but a second test that imports ApolloClient fails with:

Could not resolve module imports in /packages/lenses/node_modules/graphql/type/definition.mjs?08bad0e2a63e9ae2b6a670f55d590ce1a753555f: Unable to parse the module, this can be due to experimental syntax or a bug in the parser.
Error: Parse error at 24322.
    at parse (/home/guillem/projects/uprtcl/js-uprtcl/packages/common/node_modules/es-module-lexer/dist/lexer.cjs:1:401)
    at resolveModuleImports (/home/guillem/projects/uprtcl/js-uprtcl/packages/common/node_modules/es-dev-server/dist/utils/resolve-module-imports.js:203:48)
    at compileMiddleware (/home/guillem/projects/uprtcl/js-uprtcl/packages/common/node_modules/es-dev-server/dist/middleware/compile-middleware.js:137:69)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at watchServedFilesMiddleware (/home/guillem/projects/uprtcl/js-uprtcl/packages/common/node_modules/es-dev-server/dist/middleware/watch-served-files.js:40:5)
    at messageChannelMiddleware (/home/guillem/projects/uprtcl/js-uprtcl/packages/common/node_modules/es-dev-server/dist/middleware/message-channel.js:51:5)
    at responseCacheMiddleware (/home/guillem/projects/uprtcl/js-uprtcl/packages/common/node_modules/es-dev-server/dist/middleware/response-cache-middleware.js:107:5)
    at etagCacheMiddleware (/home/guillem/projects/uprtcl/js-uprtcl/packages/common/node_modules/es-dev-server/dist/middleware/etag-cache-middleware.js:14:5)
    at log404 (/home/guillem/projects/uprtcl/js-uprtcl/packages/common/node_modules/@open-wc/karma-esm/src/esm-config.js:62:7)
    at /home/guillem/projects/uprtcl/js-uprtcl/packages/common/node_modules/koa-compress/index.js:38:5 {
  idx: 24322
}

Could not resolve module imports in /packages/common/node_modules/graphql/type/definition.mjs: Unable to parse the module, this can be due to experimental syntax or a bug in the parser.
HeadlessChrome 79.0.3945 (Linux 0.0.0) ERROR

Here is the first test (passing):

import { html, fixture, expect } from '@open-wc/testing';

describe('<uprtcl-common>', () => {
  it('has a default property title', async () => {
    expect(true).to.equal(true);
  });
});

Here is the second test (failing):

import { ApolloClient, InMemoryCache } from 'apollo-boost';

describe('basic GraphQl getEntity', () => {
  beforeEach(async () => {
    // Fails directly in this line
    const client  = new ApolloClient({
      cache: new InMemoryCache()
    });
  });

Here is my karma.conf.js:

/* eslint-disable import/no-extraneous-dependencies */
const cjsTransformer = require('es-dev-commonjs-transformer');
const { createDefaultConfig } = require('@open-wc/testing-karma');
const deepmerge = require('deepmerge');

module.exports = config => {
  const defaultConfig = createDefaultConfig(config);
  config.set(
    deepmerge(defaultConfig, {
      // see the karma-esm docs for all options
      esm: {
        babel: true,
        nodeResolve: true,
        fileExtensions: ['.ts', '.mjs'],
        responseTransformers: [
          cjsTransformer(
            ...defaultConfig.esm.babelModernExclude,
            '**/node_modules/@open-wc/**/*',
            '**/node_modules/chai-dom/**/*',
            '**/node_modules/sinon-chai/**/*'
          )
        ]
      },

      basePath: '../../',

      files: [
        { pattern: './tools/global-test-variables.js', type: 'module' },
        { pattern: 'packages/*/node_modules/graphql/**/*.mjs', type: 'module' },
        {
          pattern: config.grep ? config.grep : './packages/common/test/**/*.test.ts',
          type: 'module'
        }
      ]
    })
  );

  return config;
};

I need es-dev-commonjs-transformer to deal with commonjs dependencies.

And here is my .babelrc:

{
  "presets": ["@babel/preset-typescript"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
    "@babel/plugin-proposal-class-properties"
  ]
}

PD: Sorry I was typing the title of the issue and hit create before filling the description 😃

[LarsDenBakker]

In theory it should be possible to make it work, mostly the commonjs transform is what makes it complicated because there are so many assumptions in existing codebases that can’t always map properly. Webpack is a good bet for these things, though it makes things slower.

My suggestion is to try and create the most minimal reproduction and observe what’s served in the browser. If you can push the setup somewhere, I can take a look.

[guillemcordoba]

Created https://github.com/open-wc/open-wc/issues/1156, closing this one.