question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not possible to import *.json files inside TypeScript.

See original GitHub issue

I am using aurelia-cli - typescript version. I need to import .json file inside typescript file f.e.import config from "../config/app.json". When I try to build project I am getting an error can’t find file {path to file}/config/app.json.js I tried to add require js json plugin to aurelia.json file and change my code to import config fom "json!../config/app.json"(https://github.com/millermedeiros/requirejs-plugins). But without any success. Error: uid: 9, name: ‘writeBundles’, branch: false, error: [TypeError: Path must be a string. Received undefined], duration: [ 6, 499384178 ], time: 1472563256344 } { uid: 1, name: ‘<series>’, branch: true, error: [TypeError: Path must be a string. Received undefined], duration: [ 13, 649611809 ], time: 1472563256359 } { uid: 0, name: ‘<series>’, branch: true, error: [TypeError: Path must be a string. Received undefined], duration: [ 13, 650647973 ], time: 1472563256360 } [TypeError: Path must be a string. Received undefined]

Is there any way to import .json?

Could you please provide me aurelia.json example or other solution to resolve this issue?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:26 (11 by maintainers)

github_iconTop GitHub Comments

4reactions
johotcommented, Apr 5, 2017

We managed to fix this in our aurelia-cli project.

To import use the following syntax: import * as config from 'text!./folder/config.json';

This should work right away, try writing alert(config) for example.

Now you will probably see a typescript compilation error in your command line window. To fix this create a file with a d.ts extension in your custom_typings folder. The file title doesn’t matter. In this file write:

declare module "text!*" {
}

We also wrote a blog post about this here: http://www.curbitssoftware.com/2017/04/04/importing-json-files-aurelia-cli-project/

1reaction
mostafa7240commented, Oct 4, 2017

Use export before functions in the foo.js file:

export function someFunction(input){
    ...
    return output;
}

in the ts.config :

{
  "compilerOptions": {
    "allowJs": true,
    ...
    }
}

Now you can import and call that in the ts file: import someName from '../JS/json_xml.js'; //path to the js file

At last in the class of the ts use what you want: this.data = someName.someFunction(input);

Read more comments on GitHub >

github_iconTop Results From Across the Web

Importing JSON file in TypeScript - Stack Overflow
You can access JSON files in more TypeScript way. First, make sure your new typings.d.ts location is the same as with the include...
Read more >
How to Import a JSON file in TypeScript | bobbyhadz
To import a JSON file in TypeScript, set `resolveJsonModule` to `true` in your `tsconfig.json` file. Set `esModuleInterop` to `true` in `tsconfig.json`.
Read more >
Importing JSON Modules in TypeScript - Marius Schulz
TypeScript 2.9 introduced a new --resolveJsonModule compiler option that lets us import JSON modules from within TypeScript modules.
Read more >
How to Import json into TypeScript - HackerNoon
In ES6/ES2015, you can import json file in your code. For example,
Read more >
How To Read Local JSON Files In Angular
In typescript 2.9 with the help of resolveJsonModule we can import local JSON files just like modules. I have added a sample JSON...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found