Issues encountered when attempting to use @rollup/plugin-json in conjunction with typescript

I have been encountering an issue with my appsettings.json file. Despite it being validated by jsonlint.com, and having the tsconfig resolveJsonModule option set to true, I am facing difficulties while importing @rollup/plugin-json. I have experimented with different positions for calling the plugin within the chain of plugins, but unfortunately, I keep receiving the following error:

(!) Plugin json: Could not parse JSON file
appsettings.json
[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
appsettings.json (2:10)

It seems like the plugin is triggered, yet it fails to parse the supposedly valid file. The configuration in my Rollup setup appears as follows:

 
//imports...

console.log(`Node env is ${process.env.NODE_ENV}`);
let isDevEnv = process.env.NODE_ENV === 'development'; 
let useMsw = process.env.USE_MSW;

const extensions = ['.cjs', '.js', '.jsx', '.json', '.ts', '.tsx', '.css', '.png'];

const intro = `global = window; window.NODE_ENV = process.env.NODE_ENV; ${useMsw ? 'window.USE_MSW = true;' : ''}`;

export default {
    input: [
        'src/index.tsx'
    ],
    output: {
        intro: intro,
        file: './dist/bundle.js',
        format: 'es',
        sourcemap: isDevEnv,
        inlineDynamicImports: true,

    },
    plugins: [
        //plugins list...
        
        json(),
    ]
};

My tsconfig file is configured as below:

{
  "compilerOptions": {
    //options...
    "resolveJsonModule": true
  },
  "include": [
    //included paths...
  ],
  "exclude": ["node_modules"]
}

The structure of my actual json file is as shown:

{
   "HUB_URL": "theHubUrl",
  "AUTH_ENDPOINT": "https://localhost:44330/API/Dispatch/Authentication/v1.0/authenticate",
  //more key-value pairs...
}

Despite several attempts and adjustments, the Rollup output consistently displays the same error message regarding the inability to parse the JSON file. Any insights or suggestions would be greatly appreciated. Thank you.

Answer №1

One possible explanation is that the json file's encoding is set to utf8withbom. Consider changing the encoding to utf8.

Answer №2

It seems that the issue is related to aggressive caching, possibly by npm or typescript. After deleting node_modules, running npm install, and adding a new JSON file with the rollup json plugin in vscode, the problem was resolved. This experience didn't provide much in terms of learning: 0;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring through a dynamically generated table containing JSON data

I have successfully implemented a dynamic HTML table that is populated with JSON data based on the value of a variable when the "go" button is clicked. The initial population and search functionality work flawlessly. However, I encountered an issue when ch ...

Building a personalized command-line interface (CLI) tool using Typescript

I recently created a Typescript program that converts various .json file formats. However, I realized that I have hardcoded the file path for reading. const file = readFileSync('./name_of_file_path.json', 'utf-8'); // fixed file path. f ...

Tips for incorporating JavaScript modules into non-module files

Learning how to use js modules as a beginner has been quite the challenge for me. I'm currently developing a basic web application that utilizes typescript and angular 2, both of which heavily rely on modules. The majority of my app's ts files ...

What could be causing TypeScript to raise an issue when a /// reference comes after the 'use strict' statement?

This particular inquiry is somewhat connected to a question I posted on Stack Overflow yesterday about why TypeScript is encountering issues when trying to import a module. The initial configuration remains unchanged. My TypeScript file appears as follows ...

Exploring TypeScript nested interfaces and types within VSCode

I often find myself hovering over functions or objects in VSCode with TypeScript to inspect their type. However, many times the types and interfaces of these objects are dependent on other interfaces and types, making it difficult to get detailed informat ...

Angular ngFor Directive Failing to Display Menu Item Information on Right-Click Context Menu

Currently encountering an issue with implementing a right-click function in my context menu. The menu items are not appearing due to the second ngFor="let row" condition... however, I require the selected row object from a right click to pass in a JSON val ...

Extract a selection from a dropdown menu in ReactJS

I have multiple cards displayed on my screen, each showing either "Popular", "Latest", or "Old". These values are retrieved from the backend. I have successfully implemented a filter option to sort these cards based on popularity, age, etc. However, I am u ...

All constructors at the base level must share a common return type

I am looking to convert my JSX code to TSX. I have a snippet that refactors a method from the react-bootstrap library: import {Panel} from 'react-bootstrap'; class CustomPanel extends Panel { constructor(props, context) { super(props ...

Getting a JSON response from an ASP.NET webpage

I'm currently faced with a problem and have multiple solutions at hand. I am seeking input on the feasibility of these options. One approach involves returning a JSON object from my server side code, but I lack the knowledge on how to execute this eff ...

Error: Module not found - Unable to locate 'dropzone'

Since migrating from Angular 4.4 to Angular 8.0, I encountered the following issue: ERROR in ./src/attributes/import/import.component.ts Module not found: Error: Can't resolve 'dropzone' in 'C:....\src\attributes\imp ...

Obtaining a distinct movie identification (tmdb API) utilizing '@PathParam'

I recently started working on my first spring boot project, but I feel like I still have a lot to learn. Despite searching on Stack Overflow and Googling for answers, I haven't found a solution yet. It would be greatly appreciated if someone could pr ...

Transform the deserialized JSON string into a tree structure without utilizing a class

My JSON string looks like this: {"fields": "{\n \"CurrentPage\": 14,\n \"CurrentSubPageNo\": 18,\n \"IsFileUpload\": false,\n \"VisitedPages\& ...

Implementing JSON data binding for webgrid in ASP.net MVC4

I am struggling to populate a webgrid with Datatable values using Json. I have implemented a DropDownlist to select a person's name, and based on that selection, I want to display the corresponding data in the webgrid. However, my current code does no ...

What is the best way to iterate over JSON data from an endpoint that contains multiple nested arrays using the .map() method?

Seeking to showcase weather API data from: () import Image from "next/image" interface Hour { time_epoch: number time: string temp_c: number temp_f: number is_day: number wind_mph: number wind_kph: number wind_deg ...

Before computing the width, Next.js Swiper slide occupies the entire width

Check out the code snippet below: 'use client'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/pagination'; export default function Component() { const cards = [{ id: 0 ...

Implementing the "$store" property within Vue components

Click here for a guide on how to type the $store property. Unfortunately, I've been encountering issues with it. In my Vue 2 project created using vue-cliI, I included a vuex.d.ts file in ./src directory but the $store property in my components still ...

Angular2 - leveraging root-relative imports

Having trouble with imports in angular2/typescript? Want to use paths relative to the project root like 'app/components/calendar', but currently stuck using something like this: //app/views/order/order-view.ts import {Calendar} from '../../ ...

Can you provide guidance on receiving a JSON response using Python?

I've been attempting to retrieve a JSON response from the code snippet below, but unfortunately I keep encountering an error. from requests import get import json url = "https://api.wheretheiss.at/v1/satellites/25544" response = get(url) fo ...

Display or conceal form elements depending on the JSON response

Upon making an api call, a json Response is received with the following structure: {"Field":"Amount","FieldName":"Amount","FieldType":"Numeric","MaximumLength":128,"MinimumLength":0,"Options":"Mandatory"} This api call yields between 5-10 of these object ...

What is the reason behind capitalizing Angular CLI class file imports?

After creating a basic class in Angular using the CLI starter, I encountered an issue when trying to use the imported class. Instead of functioning as expected, it returned an empty object. Through troubleshooting, I discovered that simply changing the fil ...