TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'

Question

I keep on getting this error when I try to build my project into esm and cjs.

this is what my package.json looks like:

 {
      "name": "qa-data-tool",
      "version": "1.0.0",
      "description": "AWS uploads to S3 to support testing of invoicing PYCMA accounts",
      "main": "dist/cjs/index",
      "types": "dist/cjs/index.d.ts",
      "type": "module",
      "exports": {
        ".": {
          "require": "./dist/cjs/index.js",
          "import": "./dist/esm/index.js"
        }
      },
      "files": [
        "/dist"
      ],
      "scripts": {
        "tsc": "tsc",
        "test": "jest",
        "test typescript": "tsc ./src/testing.ts && node ./src/testing.js",
        "build": "rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs && npm run cp:py",
        "build:esm": "tsc",
        "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
        "cp:py": "xargs -n 1 cp -v src/convert_csv_rdf/csv_to_rdf.py<<<'dist/cjs/convert_csv_rdf dist/esm/convert_csv_rdf' "
      },
      "keywords": [],
      "author": "Affan Rashid <arashid@aspiration.com>",
      "license": "MIT",
      "repository": {
        "type": "git",
        "url": "https://github.com/AspirationPartners/qa-data-tool"
      },
      "devDependencies": {
        "@babel/core": "^7.18.10",
        "@babel/preset-env": "^7.18.10",
        "@babel/preset-typescript": "^7.18.6",
        "@types/jest": "^28.1.7",
        "@typescript-eslint/eslint-plugin": "^5.17.0",
        "@typescript-eslint/parser": "^5.17.0",
        "babel-jest": "^28.1.3",
        "babel-plugin-transform-vite-meta-env": "^1.0.3",
        "esbuild": "^0.14.54",
        "eslint": "^8.12.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-airbnb-typescript": "^17.0.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-import-resolver-typescript": "^2.7.0",
        "eslint-plugin-import": "^2.25.4",
        "eslint-plugin-json": "^3.1.0",
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.29.4",
        "jest": "^28.1.3",
        "prettier": "^2.6.1",
        "ts-node": "^10.9.1",
        "typedoc": "^0.22.13",
        "typescript": "^4.7.4"
      },
      "dependencies": {
        "@aws-sdk/client-s3": "^3.157.0",
        "@types/json2csv": "^5.0.3",
        "aws-sdk": "^2.1200.0",
        "csv": "^6.2.0",
        "csv-parser": "^3.0.0",
        "dayjs": "^1.11.5",
        "dotenv": "^16.0.1",
        "json2csv": "^5.0.7"
      },
      "jest": {
        "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts)$",
        "moduleFileExtensions": [
          "ts",
          "js"
        ]
      }
    }

and this is what my tsconfig.json looks like:

{
    "compilerOptions": {
        "target": "es2020",
        "allowJs": true,
        "module": "es2020",
        "declaration": true,
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es5",
            "es2015",
            "es2020",
            "es2016",
            "esnext",
            "dom"
        ],
        "outDir": "dist/esm",
        "strict": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        
    },
    "include": [
        "src/**/*",
    ],
    "exclude": [
        "node_modules"
    ]
}

and this is the file where I am using import.meta.url

import day from 'dayjs';
import { exec } from 'child_process';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

/**
 * Runs the csv_to_rdf.py script that converts the transformed CSV into a RDF format.
 * @param filePath - path of the modified csv that you would like to convert to RDF format
 * @returns the file path of the RDF file that is created.
 */
export async function convertCSVToRDF(filePath: string): Promise<string> {
  const __dirname = dirname(fileURLToPath(import.meta.url));
  const script = `${__dirname}/csv_to_rdf.py`;
  const date = `${day().subtract(1, 'days').format('YYYYMMDD')}`;
  const nameOfNewFile = `postedtransactions_${date}.txt`;

  exec(
    `python3 ${script} ${filePath} ${date} > ${nameOfNewFile}`,
    (error, stdout, stderr) => {
      if (error) {
        console.error(`${error}`);
        return;
      }
      console.log(`stdout: ${stdout}`);
      console.error(`stderr: ${stderr}`);
    },
  );

  return nameOfNewFile;
}
   

I have jest installed in my project but I'm not even using it. When I run npm run build I keep on getting:

error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.

12   const __dirname = dirname(fileURLToPath(import.meta.url));
                                             ~~~~~~~~~~~


Found 1 error in src/convert_csv_rdf/convert_csv_rdf.ts:12

Answer 1

1.change your tsconfig with below

compilerOptions": {
       "module": "esnext",
       //... remaining options 
     }

2.add below in jest.config

  globals: {
     "ts-jest": {
      tsconfig: false,
       useESM: true,
      babelConfig: true,
       plugins: ["babel-plugin-transform-vite-meta-env"],
     },
    },
   transform: {
      "^.+\\.(js|jsx|ts)$": "babel-jest",
    }
`

3.Now it will start giving error Cannot use import.meta To resolve this problem add below in babel config: `

module.exports = function (api) {
 
 api.cache(true);
  const presets = [
   ["@babel/preset-env", { targets: { node: "current" } }],
  "@babel/preset-typescript",
  "@babel/preset-react",
];

return {
  presets,
  plugins: [
    "@babel/plugin-transform-runtime",
    "babel-plugin-transform-import-meta",
    "babel-plugin-transform-vite-meta-env",
   ],
  };
 };` 

@babel/plugin-transform-runtime, babel-plugin-transform-import-meta these plugins will help you to resolve this problem