The Application
I am trying to import a json file into my typescript application like this:
<code>import alert from '@org/icons/alert';
</code>
<code>import alert from '@org/icons/alert';
</code>
import alert from '@org/icons/alert';
The Library
Within @org/icons, I have the following package.json:
<code>{
"types": "./index.d.ts",
"exports": {
"./alert": "./icons/alert.json"
}
}
</code>
<code>{
"types": "./index.d.ts",
"exports": {
"./alert": "./icons/alert.json"
}
}
</code>
{
"types": "./index.d.ts",
"exports": {
"./alert": "./icons/alert.json"
}
}
Then in the index.d.ts of @org/icons I declare the module like this:
<code>declare module '@org/icons/alert' {
export default interface Data { name: string; isRichIcon: boolean; content: string; }
}
</code>
<code>declare module '@org/icons/alert' {
export default interface Data { name: string; isRichIcon: boolean; content: string; }
}
</code>
declare module '@org/icons/alert' {
export default interface Data { name: string; isRichIcon: boolean; content: string; }
}
Finally, the json file itself, looks like this:
<code>{"name":"alert","isRichIcon":false,"content":"<svg>...</svg>"}
</code>
<code>{"name":"alert","isRichIcon":false,"content":"<svg>...</svg>"}
</code>
{"name":"alert","isRichIcon":false,"content":"<svg>...</svg>"}
The Result
The application builds and the icon is displayed on the page. However, I get the following error message in my IDE:
<code>Cannot find module '@org/icons/alert' or its corresponding type declarations.ts(2307)
module "/org/icon-lib/dist/icons/alert"
</code>
<code>Cannot find module '@org/icons/alert' or its corresponding type declarations.ts(2307)
module "/org/icon-lib/dist/icons/alert"
</code>
Cannot find module '@org/icons/alert' or its corresponding type declarations.ts(2307)
module "/org/icon-lib/dist/icons/alert"
What can I do so that I don’t get this error message when importing a json file?