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.

TS issue when importing a local options JSON file or JS Object

See original GitHub issue

Contact Details

No response

What do you need?

Hi there, I’m trying to load my option from a local JSON file, something like: import options from "../../tsparticles/config.json"; <Particles options={options} />

It is working but I’m getting a ts error in the options property of <Particles />. I tried exporting a js object and the same error occurs:

(JSX attribute) options?: RecursivePartial<IOptions> | undefined

Type '{ autoPlay: boolean; background: { color: { value: string; }; image: string; position: string; repeat: string; size: string; opacity: number; }; backgroundMask: { composite: string; cover: { color: { value: string; }; opacity: number; }; enable: boolean; }; ... 12 more ...; zLayers: number; }' is not assignable to type 'RecursivePartial<IOptions>'.
  The types of 'interactivity.detectsOn' are incompatible between these types.
    Type 'string' is not assignable to type '"window" | InteractivityDetect | "canvas" | "parent" | undefined'.ts(2322)
index.d.ts(17, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<IParticlesProps, IParticlesState, any>> & Readonly<...> & Readonly<...>'

Version

nextjs 12

Which library are you using?

React.js (react-tsparticles, react-particles-js)

Code of Conduct

I agree to follow this project’s Code of Conduct

Issue Analytics

State:
Created 2 years ago
Comments:13 (5 by maintainers)

Top GitHub Comments

1reaction

tenoshcommented, Dec 31, 2021

It worked, thanks a lot.

1reaction

matteobrunicommented, Dec 30, 2021

I tested the config on a clean TS project. Try assigning it to a variable with ISourceOptions type (imported from tsparticles)

Top Results From Across the Web

Importing JSON file in TypeScript - Stack Overflow

With TypeScript 2.9.+ you can simply import JSON files with benefits like typesafety and intellisense by doing this: import colorsJson from ...

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.

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`.

Import JSON file in code.ts - Figma Community Forum

One hack you can try is to turn the JSON file into a JavaScript file by adding export default at the top of...

How to import JSON files in ES modules (Node.js) - Stefan Judis

Option 1: Read and parse JSON files yourself. The Node.js documentation advises to use the fs module and do the work of reading...