Importing json in Typescript project

I was hoping to use to draft out a behaviour on a JSON file, but the import of a JSON doesn’t appear to work (although the same approach normally works in a Typescript project with the proper config). Is this a limitation of replit ?

Here’s a screenshot showing the project structure, the code and the error.

I have "resolveJsonModule": true, in my tsconfig.json compilerOptions

Hey @cefn! Welcome to the community!

You will also need to enable esModuleInterop in compilerOptions for it to work.

Alternatively, you could leave it as it is and replace the import statement with the following statement:

import * as data from "../data.json";
1 Like

Thanks for your help, Praquron. I already had esModuleInterop set to true in compilerOptions. Changing the import makes no difference to the error.


nvm Umar solved it the issue.

run in shell:

printf '\ncp *.json .build' >> .config/

Thanks, Umar. That worked! Is there documentation I can refer to in order to understand the mechanism?

it uses esbuild as seen in .config/

Great, I just found the ‘hidden files’ control in the explorer and it all makes sense.

In the end I switched to using tsc fully, rather than esbuild, which then respects the target files and copies them to the destination.

It needed outDir to be set to .build and noEmit:false resolveJsonModules:true and esModuleInterop:true in compilerOptions of my tsconfig.json.

After that, the following (after removing all the Entrypoints and esbuild stuff) fulfilled my requirements as well as showing compiler errors in the shell and hopefully accelerating subsequent builds (--build should put metadata in the outDir)…

#!/usr/bin/env bash

set -e

rm -rf .build
mkdir -p ./.build

npm run env -- tsc --build

You could also have just used ../data.json though…

I see now, I was focused on the change to wildcarding and had missed the extra dot. Having seen the hidden files that approach makes sense too.