Issues using babel-typescript and @types packages

[silenceisgolden]

When trying to set up a project using rollup-plugin-babel, I seem to be getting a few errors.

In my test I have import { chai } from 'chai';. I have installed @types/chai. When I run the test I get the error:

Error: 'expect' is not exported by node_modules/chai/index.js

Please see https://github.com/silenceisgolden/karma-typescript-babel for a reproduction of the issue. Thanks for your time and help!

For convenience, here are a few files

// karma.conf.js

process.env.CHROME_BIN = require('puppeteer').executablePath();

const FILE_GLOB = 'src/**/*.spec.ts';

module.exports = config => {
  config.set({
    basePath: '',
    browsers: ['ChromeHeadless'],
    frameworks: ['mocha'],
    reporters: ['mocha'],
    files: [
      {
        pattern: FILE_GLOB,
        watched: false,
        module: true
      }
    ],
    exclude: [],
    preprocessors: {
      [FILE_GLOB]: ['rollup']
    },
    plugins: [
      require('karma-mocha'),
      require('karma-mocha-reporter'),
      require('karma-chrome-launcher'),
      require('karma-rollup-preprocessor')
    ],
    rollupPreprocessor: {
      plugins: [
        require('rollup-plugin-node-resolve')({
          extensions: ['.js', '.ts']
        }),
        require('rollup-plugin-commonjs')({
          include: 'node_modules/**',
          extensions: ['.js', '.ts']
        }),
        require('rollup-plugin-babel')({
          exclude: 'node_modules/**',
          extensions: ['.js', '.ts']
        })
      ],
      output: {
        format: 'esm',
        sourcemap: 'inline'
      }
    },
    mochaReporter: {
      showDiff: true
    },
    concurrency: Infinity,
    autoWatch: false,
    singleRun: true,
    colors: true
  });
};

// .babelrc
{
  "presets": [
    "@babel/typescript",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": {
          "version": 3
        },
        "targets": "last 2 versions"
      }
    ]
  ]
}

// src/index.ts
export function test() {
  return 'something';
}

// src/index.spec.ts
import { expect } from 'chai';

import { test } from './index';

describe('testing testing', () => {
  it('should not fail', () => {
    expect(test()).to.equal('something');
  });
});

[silenceisgolden]

I am not 100% sure this is third party. I haven't had a similar issue or seen a similar issue in my research if, let's say, you would import chai in an application bundle. I can try to work on a reproduction from that standpoint tonight though.

[jlmakes]

Generally speaking, this preprocessor is mostly a thin wrapper around the Rollup API, with most of its complexity coming from the custom file watcher. I am not 100% either, just suspicious since your error appears unrelated to API churn or the watcher.

My first guess is that this has something to do with config.files[0].module === true (L15), which I believe means Karma inserts <script type="module"> tags into the test document. Perhaps there is a conflict with that expectation of native ES modules and how babel is transpiling you modules?

[silenceisgolden]

Ok, the error my issues was were caused by multiple parts:

1. Use the namedExports option to fix chai's exports.
2. Bug in this library:

On line 46 of lib/index.js, add:

const parsedPath = path.parse(file.path);
file.path = `${parsedPath.dir}/${result.fileName}`;

This is because the file path is still .ts after the bundle generation. It needs the extension to be renamed to js. This combines the new file name generated by rollup with the original directory given to karma.

I will try to put together a PR shortly!