SyntaxError: Cannot use import statement outside a module

[SRachamim]

I'm having hard time to workaround the "SyntaxError: Cannot use import statement outside a module" issue. We don't use babel, only webpack with ts-loader. Everything works well on run-time. But running tests fails:

 FAIL  app/components/TreeTable/helpers.spec.ts
  ‚óè Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/kishu/Development/dev.azure.com/fundguard/fgrepo/client/node_modules/@nll/datum/DatumEither.js:22
    import { left, isRight, isLeft, right, fromOption as eitherFromOption, fold as eitherFold, } from 'fp-ts/es6/Either';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import * as DE from '@nll/datum/DatumEither'
        | ^
      2 | import { ApolloQueryResult, QueryOptions } from 'apollo-client'
      3 | import * as Rx from 'fp-ts-rxjs/Observable'
      4 | import * as A from 'fp-ts/ReadonlyArray'

      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (app/utils/Repository.ts:1:1)

What should I do? I don't want to add babel.

Latest TypeScript.
Latest jest.
Latest ts-jest.

My jest.config.json:

{
  "preset": "ts-jest",
  "testEnvironment": "jsdom"
}

My tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "app",
    "jsx": "react",
    "module": "es6",
    "outDir": "build",
    "rootDir": "app",
    "sourceMap": true
  },
  "exclude": ["**/*.js"],
  "extends": "../tsconfig.settings.json"
}

My ../tsconfig.settings.json:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "incremental": true,
    "lib": ["es2019", "dom"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": false,
    "strict": true,
    "target": "es5"
  }
}

[ahnpnl]

the error points out that fp-ts/es6/Either is not valid commonjs codes which Jest cannot understand. The reason is fp-ts/es6/Either is not transformed by ts-jest. To fix this, you need to add it to transformIgnorePattern, see https://jestjs.io/docs/configuration#transformignorepatterns-arraystring

[ahnpnl]

https://github.com/nullpub/datum/blob/master/jest.config.js#L10 I see this from their local jest config, i think you need this one because your error is

 /Users/kishu/Development/dev.azure.com/fundguard/fgrepo/client/node_modules/@nll/datum/DatumEither.js:22
    import { left, isRight, isLeft, right, fromOption as eitherFromOption, fold as eitherFold, } from 'fp-ts/es6/Either';
    ^^^^^^

which indicates fp-ts package needs to be transformed

[SRachamim]

Shouldn't I transform "@nll/datum/DatumEither.js" file? It says that the "import" in that file is the issue. But it's not getting transformed in anyway:

  "preset": "ts-jest/presets/js-with-ts",
  "transformIgnorePatterns": [
    "/node_modules/(?!@nll|fp-ts/es6)"
  ]

[ahnpnl]

Yes I think might be both, this error is the indication of something is not transformed into cjs. If fp-ts distributes cjs codes, you can use moduleNameMapper to tell jest to load cjs instead of es6.

also make sure to clear cache every time changing jest configuration.

[SRachamim]

I didn't clear the cache! I didn't know there is a cache. It should invalidate the cache once the files changes. God.

Anyway it still doesn't work. I see this error no matter what I'm doing, and I'm this close to go back and use babel. :(

    /Users/kishu/Development/dev.azure.com/fundguard/fgrepo/client/node_modules/@nll/datum/DatumEither.js:22
    import { left, isRight, isLeft, right, fromOption as eitherFromOption, fold as eitherFold, } from 'fp-ts/es6/Either';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
                                                                                                                │    ^^^^^^

[ahnpnl]

do you have an example repo? hard to help without a concrete repo to check