Cannot find module '!!raw-loader!./something.glsl' or its corresponding type declarations

Question

I have a project initiated with create-react-app --template typescript. I need to import some files using the webpack raw-loader, so I did an npm i -D raw-loader. Now I import those like so:

// eslint-disable-next-line import/no-webpack-loader-syntax
import fSrc from '!!raw-loader!./something.glsl';

I added a declaration for .glsl files, as well as !raw-loader! to my project:

// index.d.ts

declare module '*.svg';
declare module '*.glsl';
declare module '!raw-loader!*';

However, I get the compiler error:

Cannot find module '!!raw-loader!./something.glsl' or its corresponding type declarations.  TS2307

    1 | // eslint-disable-next-line import/no-webpack-loader-syntax
  > 2 | import fSrc from '!!raw-loader!./something.glsl';

What am I doing wrong here?

Answer 1

As per request, here is what I did that worked for me.

In webpack.config.js, use raw loader and glslify-loader to handle any .glsl files:

module.exports = {
    entry: './src/index.tsx',
    module: {
        rules: [
            {
                test: /\.(glsl|vs|fs|vert|frag)$/,
                exclude: /node_modules/,
                use: ['raw-loader', 'glslify-loader'],
            },
            // ...
        ],
    },
    // ...
};

Then I import them without any special syntax:

// Where I want to use them:

import fSrc from './fragmentShader.fs.glsl';
import vSrc from './vertexShader.vs.glsl';

And if you're using typescript, you need to declare these types of files as modules in a .d.ts file:

// index.d.ts

declare module '*.svg';
declare module '*.glsl';
declare module '*.fs.svg';
declare module '*.vs.glsl';