After some searching, I finally managed to get everything working. There were two key components that needed to be in place for it to function properly.
Using the correct loader
In this particular situation, I needed to utilize the raw-loader. So, I added it as a dev dependency using the command yarn add -D raw-loader.
To import the file successfully, I had to modify the webpack configuration like so:
// eslint-disable-next-line import/no-webpack-loader-syntax
import toolbarItems from '!!raw-loader!../ToolbarItems';
This code snippet loads the entire file into the variable toolbarItems. The use of !! before the loader ensures that no other webpack loaders process it in this specific scenario. While this approach may work in a regular JavaScript project, it proved to be slightly different when dealing with TypeScript...
Providing a module for TypeScript
I encountered a TypeScript error during the process:
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: {
To resolve this issue, simply creating a module for the loader in a file named ToolbarItems.ts.d.ts did the trick:
declare module '!!raw-loader!*' {
const content: string;
export default content;
}
source