webpack - Încarcă fișierul json în Typescript ca un obiect în loc de un modul

Am următoarea importare într-un cod pe care îl folosesc:

import * as schema from "../schema.json";

În acest moment, variabila schema este un modul și dacă vreau să accesez obiectul meu JSON, trebuie să fac schema.default. Dacă schimb import * as schema în import schema, atunci variabila schema este conținutul JSON (un obiect).

Mă întrebam dacă ar fi posibil să folosești webpack sau vreun plugin babel pentru a încărca un obiect cu import * as schema ?

Fișierul curent de configurare Babel:

  presets: ['@babel/preset-typescript', '@babel/preset-react', ['@babel/preset-env', { modules: 'commonjs' }]],
  plugins: [
    'babel-plugin-dynamic-import-node',
    '@babel/plugin-transform-destructuring',
    ['@babel/plugin-transform-for-of', { loose: true }],
    '@babel/plugin-transform-regenerator',
    '@babel/plugin-transform-runtime',
      // ["@babel/plugin-transform-typescript", {allowNamespaces: true}],
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-proposal-object-rest-spread',
    ['styled-components', { ssr: true }]
  ]

Răspuns #1

Am creat un typings.d.ts în folderul /src/ cu următorul cod:

}
declare module "*.json" {
  const value: any
  export default value
}

Și în componenta mea:

import data from "./data.json"

export default function MyComponent() {
  return (
    <div>
      {data.map(elem => (
        <h1> {elem.title}</h1> 
        <p> {elem.body}</p>
      )}
     </div>
)}

Repornește serverul și a funcționat