[Help please] Cannot use import statement outside a module - Custom HTML transform

[andrewcartwright1]

Hi there!

I'm wondering if anyone is able to help me, I'm having some problems with jest/ts-jest when it comes to a custom transform, I am not using babel, I am running windows 11 x64, Node v18.18.0

I keep getting this error from my html and hbs transform

import fs from 'fs-extra';
^^^^^^
SyntaxError: Cannot use import statement outside a module

this is my jest.config.ts file

import type { JestConfigWithTsJest } from 'ts-jest';
import { pathsToModuleNameMapper } from 'ts-jest';
import { compilerOptions } from './tsconfig.json';

const config: JestConfigWithTsJest = {
  rootDir: '.',
  testMatch: ['<rootDir>/src/**/*.spec.ts'],
  collectCoverage: true,
  verbose: true,
  testEnvironment: 'node',
  extensionsToTreatAsEsm: ['.ts'],
  coverageReporters: ['html-spa'],
  moduleFileExtensions: ['ts', 'js', 'json', 'node'],
  modulePathIgnorePatterns: ['<rootDir>/node_modules'],
  coveragePathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/build', '<rootDir>/test'],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/src' }),
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.html$': ['<rootDir>/test/transformers/html.ts', { useESM: true }]
    //'^.+\\.hbs$': ['<rootDir>/test/transformers/hbs.ts', { useESM: true }]
  }
};

export default config;

and in my html transformer.. i have

import fs from 'fs-extra';

export default {
  process(src: string, filename: string) {
    const htmlContent = fs.readFileSync(filename, 'utf8');
    return { code: `export default ${JSON.stringify(htmlContent )};` };
  }
};

Now my understanding is that { useESM: true } should be telling ts-jest that this is a module and not a commonjs file, but it looks like its being completly ignored?

I am using import's and exports all throughout my project, it builds fine using webpack and my tests also have imports in them - and they work, but some fail when the transformer is commented out (this is expected)

i dont really understand why everything else is working, but this transform isnt? (the hbs one isnt either, fails with the same error - but i imagine once i get one working i can get the other working)

the ts-jest.log file isnt giving me anything to go on either..

{"context":{"logLevel":20,"namespace":"Importer","package":"ts-jest","version":"29.1.1"},"message":"creating Importer singleton","sequence":1,"time":"2023-10-11T19:22:59.562Z"}
{"context":{"actualVersion":"29.7.0","expectedVersion":">=29.0.0 <30","logLevel":20,"namespace":"versions","package":"ts-jest","version":"29.1.1"},"message":"checking version of jest: OK","sequence":2,"time":"2023-10-11T19:23:00.201Z"}

any help would be appreciated, and I do apologise for the text wall!

[andrewcartwright1]

for anyone facing this problem in the future,,

import type { JestConfigWithTsJest } from 'ts-jest';
import { pathsToModuleNameMapper } from 'ts-jest';
import { compilerOptions } from './tsconfig.json';

const config: JestConfigWithTsJest = {
  rootDir: '.',
  testMatch: ['<rootDir>/src/**/*.spec.ts'],
  collectCoverage: true,
  verbose: true,
  testEnvironment: 'node',
  extensionsToTreatAsEsm: ['.ts'],
  coverageReporters: ['html-spa'],
  moduleFileExtensions: ['ts', 'js', 'json', 'node'],
  modulePathIgnorePatterns: ['<rootDir>/node_modules'],
  coveragePathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/build', '<rootDir>/test'],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/src', useESM: true }),
  transform: {
    '^.+\\.html$': '<rootDir>/test/transformers/html.ts',
    '^.+\\.hbs$': '<rootDir>/test/transformers/hbs.ts',
    '^.+\\.ts$': 'ts-jest'
  }
};

export default config;

module.exports = {
  process: function (src, filename) {
    const fs = require('fs-extra');

    const htmlContent = fs.readFileSync(filename, 'utf8');
    return { code: 'module.exports = ' + JSON.stringify(htmlContent ) + ';' };
  }
};

this was the fix,
this line was my saving grace - https://github.com/joscha/ts-jest-transformer-example#caveats