J'essaye d'importer un fichier .svg en tant que composant React avec TypeScript.
Selon la documentation React, cela se fait comme suit:
import { ReactComponent as Icon } from './Icon.svg';
Suite aux documents TypeScript, j'ai ajouté ceci:
{
"compileOnSave": false,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"outDir": "./dist",
"strict": true,
"jsx": "react",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true,
"sourceMap": true,
"skipLibCheck": true,
"esModuleInterop": true,
"baseUrl": ".",
"plugins": [
{
"name": "typescript-styled-plugin"
}
],
"typeRoots": ["./node_modules/@types"],
"lib": ["dom", "es2015", "es2017"]
},
"exclude": ["node_modules", "dist"],
"files": [
"custom.d.ts"
]
}
et
// tsconfig.json
{
...
"files": [
"custom.d.ts"
]
}
Le SVG est en cours de rendu. Mais j'obtiens une erreur TypeScript:
[ts] Module '"*.svg"' has no exported member 'ReactComponent'. [2305]
Voici mon fichier tsconfig complet si cela aide:
// custom.ts.d
declare module '*.svg' {
const content: any;
export default content;
}
Merci!
4 Réponses :
Vous avez export default content; Mais vous effectuez une importation nommée (pas une importation par défaut).
Modifiez la déclaration pour exporter le nom que vous importez:
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
Il est recommandé de ne pas utiliser de files dans tsconfig.json. Au lieu de cela, utilisez simplement include
Hé merci pour la réponse! C'est correct mais j'ai publié une solution ci-dessous à partir du repo de l'ARC pour une solution plus spécifique au type. Je marquerai cela comme correct, mais peut-être le modifier avec les informations ci-dessous pour quiconque se heurte à cela.
C'est la solution parfaite!
Merci! Notez que SFC est désormais obsolète - nous vous recommandons de changer React.SFC en React.FunctionComponent
@DavidCalhoun Merci. J'ai mis à jour la réponse pour utiliser React.FC 🌹
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
Simplement parce que cela m'a été utile et quelque peu lié. Si vous obtenez une erreur avec Jest, vérifiez ceci
2019 En plus de la réponse de @ basarat: React.SFC est obsolète, envisagez maintenant d'utiliser React.FunctionComponent comme:
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
Vous custom.ts.d les types personnalisés comme custom.ts.d et il devrait appeler custom.d.ts une fois que le compilateur ts est configuré pour traiter les extensions ts|tsx .
Après cela, vous devriez pouvoir le référencer dans votre section d'inclusion tsconfig.json comme ceci:
"include": ["custom.d.ts"]
Pouvez-vous fournir un lien pour réagir aux documents indiquant que cela devrait fonctionner (je ne pense pas que ce soit le cas). Merci 🌹
@basarat Ici vous allez! github.com/facebook/create-react-app/pull/3718