找不到模块 '!!raw-loader!./something.glsl' 或其对应的类型声明答案

【问题标题】：Cannot find module '!!raw-loader!./something.glsl' or its corresponding type declarations找不到模块 '!!raw-loader!./something.glsl' 或其对应的类型声明
【发布时间】：2021-08-16 05:37:48
【问题描述】：

我有一个使用 create-react-app --template typescript 启动的项目。我需要使用 webpack raw-loader 导入一些文件，所以我做了一个npm i -D raw-loader。现在我像这样导入那些：

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

我为我的项目添加了 .glsl 文件的声明以及 !raw-loader!：

// index.d.ts

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

但是，我得到编译器错误：

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';

我在这里做错了什么？

【问题讨论】：

你解决过这个问题吗？我遇到了同样的问题。
我做到了。我发布了一个答案

标签： typescript webpack create-react-app raw-loader

【解决方案1】：

根据要求，这就是我所做的对我有用的事情。

在 webpack.config.js 中，使用 raw loader 和 glslify-loader 处理任何 .glsl 文件：

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

然后我在没有任何特殊语法的情况下导入它们：

// Where I want to use them:

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

如果您使用的是 typescript，则需要在 .d.ts 文件中将这些类型的文件声明为模块：

// index.d.ts

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

【讨论】：