typescriptvue.jsjestjsrollupmodule-export

import/export of external types failing in jest unit tests (vue2)


I'm trying to create a package which exports some types, enums, consts and interfaces I use across multiple projects.

So I created a main.ts and I put all the exports there, specify it in package.json: "main": "main.ts".

One of my exports needs some mapbox-gl types. Obviously, I don't want my package to include mapbox-gl types. So I did the following:

"peerDependencies": {
  "mapbox-gl": "^1.13.0"
},
"devDependencies": {
  "@types/mapbox-gl": "^1.13.0",
}

Inside main.ts, I do:

import mapboxgl from "mapbox-gl";

export interface DataSourceOptions {
  shouldLoad?: boolean;
  name: string;
  map: mapboxgl.Map;
  layer: mapboxgl.Layer;
}

I published my package, imported it in my project and it works as expected. Until I try to test any of the components using this package.

Jest is throwing the following error:

D:\path\to\project\node_modules\some-custom-package\main.ts:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import mapboxgl from "mapbox-gl"; SyntaxError: Cannot use import statement outside a module

I tried to fix this by specifying my package in the transformIgnorePatterns of jest.config.js:

transformIgnorePatterns: [
  "<rootDir>/node_modules/(?!(@mapbox/mapbox-gl-draw" +
    "|some-custom-package" +
    ")/)",
],

However, I'm still seeing the same error.

I've also tried bundling my package with rollup, using either tsc and rollup-plugin-typescript2 plugins, because I know in rollup I can use externals to declare mapbox-gl as such. For some unknown reason, neither tsc nor rollup-plugin-typescript2 seem to declare my interfaces, they only declare consts, types and enums (possibly related).

I know it looks like multiple questions into one but I'm only looking for a solution.


A possible workaround I see would be to circumvent the mapboxgl import in my package, by making the types I use from it dynamic:

export interface DataSourceOptions<M,L> {
  shouldLoad?: boolean;
  name: string;
  map: M;
  layer: L;
}

and, in my project go: options: DataSourceOptions<mapboxgl.Map, mapboxgl.Layer>, but I don't really like this solution, to be fair. It circumvents the problem, it doesn't solve it.


Solution

  • I was able to fix it by setting:

    "type": "module"
    

    in the the modules' package.json, together with adding it to transformIgnorePatterns in jest.config.js of the project consuming it, as shown above.