Comment importer un fichier dans une application react qui utilise create react app en tant que texte brut ?

Question

Objectifs

1. Je veux afficher du code pour référence à partir du projet lui-même.
2. Je veux que l'affichage du code soit mis à jour avec l'implémentation.
3. Je ne veux pas m'éjecter de create-react-app

Ce projet react, créé avec create-react-app et typescript, va être utilisé pour afficher quelques composants personnalisés qui pourront être réutilisés dans d'autres projets. Mon objectif est de faire en sorte que le composant soit utilisé juste à côté du code qui l'utilise.

Comment puis-je charger le fichier si je n'ai pas accès à la configuration de webpack, et je ne peux pas utiliser fs.readFile ?

Answer 1

J'ai réussi à le faire fonctionner après avoir cherché un peu partout. Il y a deux pièces majeures qui ont dû être mises en place pour que ça fonctionne.

Utilisez le chargeur approprié

Dans ce cas, je voulais utiliser le raw-loader Je l'ai donc installé en tant que dépendance de développement. yarn add -D raw-loader .

Afin d'importer réellement le fichier, j'ai dû modifier la configuration de webpack comme suit :

// eslint-disable-next-line import/no-webpack-loader-syntax
import toolbarItems from '!!raw-loader!../ToolbarItems';

Cela charge le fichier entier dans la variable toolbarItems. En utilisant la variable !! avant le chargeur pour empêcher tout autre chargeur webpack de le traiter dans ce cas précis. Cela pourrait fonctionner seul dans un projet javascript simple, mais en typescript...

Vous devez fournir un module pour le typecript

Je me heurtais à l'erreur de typographie :

Failed to compile.

/Users/cory/Code/something/custom-theme/src/pages/NavigationDemo.tsx
TypeScript error in /Users/cory/Code/something/custom-theme/src/pages/NavigationDemo.tsx(9,26):
Cannot find module '!!raw-loader!../ToolbarItems'.  TS2307

     7 |
     8 | // eslint-disable-next-line import/no-webpack-loader-syntax
  >  9 | import toolbarItems from '!!raw-loader!../ToolbarItems';
       |                          ^
    10 |
    11 | const useStyles = makeStyles({
    12 |   root: {

Il suffit de déclarer un module pour le chargeur dans un fichier appelé ToolbarItems.ts.d.ts a résolu le problème pour moi :

declare module '!raw-loader!*' {
  const content: string;
  export default content;
}

source