webpack - "Impossibile trovare il modulo" quando si utilizza raw-loader e TypeScript

Sto cercando di includere alcuni shader vertex e fragment WebGL importandoli come stringhe.

Ho una struttura di progetto come questa:

myproj/
  src/
    shad/
      foo.frg
      foo.vtx
    shad.d.ts
    Foo.ts
  dist/
    ...
  built/
    ...
  tsconfig.json
  package.json
  webpack.config.js

shad.d.ts

declare module '*.vtx' {
    const content: string;
    export default content;
}

declare module '*.frg' {
    const content: string;
    export default content;
}

Foo.ts

import stuff from 'shad/foo.frg'

console.log(stuff)

tsconfig.json

{
    "include": [
        "src/**/*", 
        "src/shad/**/*.vtx", 
        "src/shad/**/*.frg",
    ], 
    "exclude": ["node_modules"],
    "compilerOptions": {
        "target": "ES2018",
        "module": "es2015",
        "declaration": true,
        "sourceMap": true,
        "outDir": "built",
        "composite": true,
        "strict": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true
    }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    test: './src/Foo.ts',
  },
  mode:    'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      {
        test:    /\.tsx?$/,
        use:     'ts-loader',
        exclude: [
          /node_modules/,
        ]
      },
      {
        test: /\.(vtx|frg)$/i,
        use:  'raw-loader',
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js', '.vtx', '.frg' ],
  },
  output: {
    filename: '[name].bundle.js',
    path:      path.resolve(__dirname, 'dist'),
  },
};

Quando eseguo npx webpack, ottengo:

ERROR in ./src/Foo.ts
Module not found: Error: Can't resolve 'shad/foo.frg' in '/Users/tbabb/test/tmp/tsproj/src'
 @ ./src/Foo.ts 1:0-33 4:16-21

Inoltre, la cartella src/shad/ e il suo contenuto sono assenti dalla directory built/.

Ho girato e rigirato in tutti i documenti per TypeScript e Webpack, così come in molte altre risposte qui. Dalla maggior parte di quello che ho letto, l'esistenza e il contenuto di shad.d.ts dovrebbero essere sufficienti a risolvere questo problema, ma non lo sono— e non so nemmeno come capire il perché.

Cosa sta succedendo? Cosa devo fare per importare un file raw in Webpack con TypeScript? (O almeno, cosa posso fare per capire perché questo non viene trovato?)

Risposta n. 1

Nel mio caso con Next.js (anche Typescript), l'ho risolto semplicemente installando raw-loader. Sul serio.

npm install raw-loader

Si è scoperto che raw-loader non era incluso nel mio progetto Next.js. Sono un principiante, quindi ho presunto che fosse incluso nel mio progetto.

Quindi, per chiunque altro incontri lo stesso problema, controlla il tuo file package.json per vedere se raw-loader è presente prima di provare altre soluzioni.

Risposta n. 2

In questo particolare caso di riproduzione, ho accidentalmente omesso il "./" dall'import in Foo.ts. Dovrebbe leggere:

import stuff from './shad/foo.frg'

Il problema reale che ha provocato questa domanda l'ho ridotto a un apparente bug con i riferimenti di progetto in raw-loader.