Encountering an "Unexpected token" error when importing a JSON file in TypeScript even though the JSON is valid

Question

Encountering an "Unexpected token" error when importing a JSON file in TypeScript even though the JSON is valid

I recently read an article on Hacker Noon about importing JSON into TypeScript, and decided to give it a try in my code. Here's the import line I used:

import data from './assets/fonts/helvetiker_bold.typeface.json';

To test if the import was working, I included a simple font JSON file:

{"hi":"true"}

Additionally, I checked my tsconfig.json file to ensure all necessary options were set:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "target": "es5",
    "module":"es2015",
    "lib": ["es2015", "es2016", "es2017", "dom"],
    "strict": true,
    "sourceMap": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declarationDir": "dist/types",
    "outDir": "dist/lib",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "include": [
    "src"
  ]
}

Despite all this, I encountered an error during compilation:

[!] Error: Unexpected token
src\assets\fonts\helvetiker_bold.typeface.json (1:5)
1: {"hi":"true"}
        ^

I'm unsure what the issue is, so any assistance would be greatly appreciated.

json typescript

Answer 1

Answer №1

To tackle the issue at hand, I devised a strategy of creating a specialized class that encapsulated my JSON object and leveraged it in conjunction with the FontLoader.parse() function instead of fetching the JSON data from an external file. Here's how it was executed:

Established a new file named HelvetikerUtils.ts to house my JSON object:

export class HelvetikerUtil {
    constructor() { }

    data: any = <YOUR_FONT_JSON_HERE>
}

Referenced this class as needed

import { HelvetikerUtil } from './HelvetikerUtil';

Utilized FontLoader.parse() for data loading

let myFont = new HelvetikerUtil;
let FONTLoader = new FontLoader();
let font = FONTLoader.parse(myFont.data);

Answer 2

To tackle the issue at hand, I devised a strategy of creating a specialized class that encapsulated my JSON object and leveraged it in conjunction with the FontLoader.parse() function instead of fetching the JSON data from an external file. Here's how it was executed:

Established a new file named HelvetikerUtils.ts to house my JSON object:

export class HelvetikerUtil {
    constructor() { }

    data: any = <YOUR_FONT_JSON_HERE>
}

Referenced this class as needed

import { HelvetikerUtil } from './HelvetikerUtil';

Utilized FontLoader.parse() for data loading

let myFont = new HelvetikerUtil;
let FONTLoader = new FontLoader();
let font = FONTLoader.parse(myFont.data);

Encountering an "Unexpected token" error when importing a JSON file in TypeScript even though the JSON is valid

Answer №1

Similar questions

Determining the output type by considering the presence of optional parameters

Navigating through an Angular 2 service

What exactly does the dollar sign signify in plain JavaScript code?

Display JSON data values using jQuery

Working with nested lists in C# JSON to return data in a hierarchical structure

Creating a table dynamically using JSON data can be easily achieved with a jQuery function

What is the reasoning behind exporting it in this manner in the index file?

What is the best way to structure this information in Swift for easy understanding by the backend system?

Resolving TS2304 error using Webpack 2 and Angular 2

Using Conditions in a Javascript For Loop

Tips for injecting a service into a class (not a component)

Ways to reset an input field when focused

An issue has occurred: Failure to execute spawnSync PATH/target/node/node ENOENTNGCC. Please refer to the

Troubleshooting the issue with the AWS CodeBuild SAM esbuild integration not functioning

Struggling to retrieve the 'this' object using a dynamic string

Retrieving data from a PHP object

What is the best way to bundle my Language Server along with my client?

Tips for serializing an embedded struct to a JSON string using the String() method

obtain data from JSON using JavaScript

Sandwich Bot using MS Bot Framework displaying JSON in Command Prompt