Support for commonjs output - wouter-preact blocks ts-jest on import statements

[kolodziejczakM]

Hello! :)
I've just added wouter-preact to my preact + typescript boilerplate. I'm using ts-jest for tests with ts-jest preset. Unfortunately I cannot test app.tsx component which contains
import { Link, Route } from 'wouter-preact';

After running yarn test I've got:

FAIL src/app/app.spec.tsx
● Test suite failed to run

/home/mk/Documents/repos/preact-ts-parcel/node_modules/wouter-preact/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import locationHook from "./use-location.js";
                                                                                                ^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  1 | import { h } from 'preact';
> 2 | import { Link, Route } from 'wouter-preact';
    | ^
  3 | import { TypedComponent } from '../shared/typings/prop-types';
  4 | import { actions, StoreState } from '../store';
  5 | import { useAction, useSelector } from '@preact-hooks/unistore';

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)

I'm not saying that this is a problem with wouter-preact itself, because it may be e.g. ts-jest problem or maybe even I did something wrong in terms of configuration (see below) but could you add also commonjs output?

jest.config.js

module.exports = {
    preset: 'ts-jest',
    roots: ['<rootDir>/src'],
    verbose: true,
    transform: {
        '^.+\\.(t|j)sx?$': 'ts-jest',
    },
    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "target": "es6",
        "jsx": "react",
        "jsxFactory": "h",
        "allowJs": true
    },
    "include": ["./src/**/*"],
    "exclude": ["node_modules", "**/*.spec.ts", "**/*.spec.tsx"]
}

I've been trying with different tsconfig.json configurations (also without "include" & || "exclude" fields) but without success.

Related issue (?): #70

[kolodziejczakM]

For future readers:
There is transformIgnorePatterns key in jest.config.js whose default value is ["/node_modules/"] (according to: https://jestjs.io/docs/en/configuration#transformignorepatterns-array-string)

In that case white-listing helped:
transformIgnorePatterns: ['node_modules/(?!(wouter-preact)/)']

But still - it would be more convenient if we wouldn't have to do so.

[molefrog]

Hey @kolodziejczakM thanks for the interest in the project. wouter-preact package is relatively new and didn't come with bundled CJS source, while the main package did.

I have just released a patch version v2.3.1 of both packages with proper Preact CJS sources. In wouter-preact@2.3.1 you will have:

cjs/index.js
cjs/matcher.js
...
index.js
matcher.js
...

And the package.json file should now contain a main field poiting to the CJS entrypoint.