Import JSON Files#

Rsbuild supports import JSON files in code, and also supports import YAML and Toml files and converting them to JSON format.

JSON file#

You can import JSON files directly in JavaScript files.

Example#

{
  "name": "foo",
  "items": [1, 2]
}

import example from './example.json';

console.log(example.name); // 'foo';
console.log(example.items); // [1, 2];

Named Import#

Rsbuild does not support importing JSON files via named import yet:

import { name } from './example.json';

YAML file#

YAML is a data serialization language commonly used for writing configuration files.

You can directly import .yaml or .yml files in JavaScript and they will be automatically converted to JSON format.

Example#

---
hello: world
foo:
  bar: baz

import example from './example.yaml';

console.log(example.hello); // 'world';
console.log(example.foo); // { bar: 'baz' };

Toml file#

Toml is a semantically explicit, easy-to-read configuration file format.

You can directly import .toml files in JavaScript and it will be automatically converted to JSON format.

Example#

hello = "world"

[foo]
bar = "baz"

import example from './example.toml';

console.log(example.hello); // 'world';
console.log(example.foo); // { bar: 'baz' };

Type Declaration#

When you import YAML or Toml files in TypeScript code, please create a src/env.d.ts file in your project and add the corresponding type declarations.

• Method 1: If the @rsbuild/core package is installed, you can directly reference the type declarations provided by @rsbuild/core:

/// <reference types="@rsbuild/core/types" />

• Method 2: Manually add the required type declarations:

declare module '*.yaml' {
  const content: Record<string, any>;
  export default content;
}
declare module '*.yml' {
  const content: Record<string, any>;
  export default content;
}
declare module '*.toml' {
  const content: Record<string, any>;
  export default content;
}