How to import a file into a react app that uses create react app as raw text?

Question

Goals

I want to display some code for reference from the project itself.
I want the display of the code to be updated with the implementation.
I don't want to eject from create-react-app

This react project, created with create-react-app and typescript, is going to be used to display some custom components for re-use in other projects. My goal is to have the component be used right next to the code that is using it.

How can I load the file if I don't have access to the webpack config, and I can't use fs.readFile?

counterbeing · Accepted Answer · 2022-01-12 03:08:18Z

21

I managed to get this working after a bit of looking around. There are two major pieces that had to be in place to make it work.

Use the appropriate loader

In this case I wanted to use the raw-loader, so I installed it as a dev dependency. yarn add -D raw-loader.

In order to actually import the file I needed to then override the webpack configuration like this:

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

This loads the entire file into the variable toolbarItems. By using the !! before the loader I prevent any other webpack loaders from processing it in this specific case. This might work on its own in a plain javascript project, but in typescript...

You must provide a module to typescript

I was running into the typescript error:

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: {

Simply declaring a module for the loader in a file called ToolbarItems.ts.d.ts solved the issue for me:

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

source

edited Jan 12, 2022 at 3:08

answered Apr 9, 2020 at 19:41

counterbeing

2,8112 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Larry K Over a year ago

+1 yes, I do this too. But how to do you test the resulting react app with Jest? How can I teach Jest to understand the !!raw-loader! directive?

counterbeing Over a year ago

Sorry, I don't have an answer for you there. But be sure to report back if you figure it out!

Pooya Over a year ago

@counterbeing I believe you are missing an ! in the typing file. !!raw-loader

Sasha Davydenko Over a year ago

Doesn't work for me with CRA 5.0.1 it changes the content of the file, but the imported string is still a url from which you have to fetch the file content.

counterbeing Over a year ago

@SashaDavydenko I've abandoned CRA for vite, but if you come up with a solution that works, I'm happy to put a header at the top of the current answer and upvote you :)

|

Marcel Šerý · Accepted Answer · 2021-09-16 12:38:26Z

6

Since you use create-react-app for your project, the best solution at the moment would be a babel plugin called Raw.Macro.

This plugin allows you to access content of your files without a need to create-react-app eject. Provides really elegant solution without any boilerplate code and declaring "d.ts" files as in previous answer.

Note: There is a small drawback that you have to re-start your webpack dev server when the file changes, because the content of a file is being embedded during the build process.

import raw from 'raw.macro';

function foo(){
    const jsonContent = raw('../utils/stops.json');
    console.log(jsonContent);
}

answered Sep 16, 2021 at 12:38

Marcel Šerý

3263 silver badges9 bronze badges

1 Comment

emekaokoli Over a year ago

what about a solution for VITE?

Collectives™ on Stack Overflow

How to import a file into a react app that uses create react app as raw text?

Goals

2 Answers 2

Use the appropriate loader

You must provide a module to typescript

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Goals

2 Answers 2

Use the appropriate loader

You must provide a module to typescript

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related