"Cannot find module" when using raw-loader and TypeScript

Question

I'm trying to include some WebGL vertex and fragment shaders by importing them as strings.

I have a project structure like this:

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'),
  },
};

When I npx webpack, I get:

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

Also, the src/shad/ folder and its contents are absent from the built/ directory.

I've been around and around in all the docs for TypeScript and Webpack, as well as plenty of other answers here. From most of what I've read, the existence and contents of shad.d.ts should be enough to solve this problem, but it doesn't— and I don't even know how to figure out why.

What's going on? What do I have to do to import a raw file in Webpack with TypeScript? (Or at the very least, what can I do to figure out why this isn't being found?)

Seisin

Answer 1

In my case with Next.js (also Typescript), I solved it by just installing raw-loader. Really.

npm install raw-loader

It turned out that raw-loader didn't come with my Next.js project. I am a newbie so I assumed it came with my project.

So for anyone else encountering the same problem, check your package.json file to see if raw-loader is there at all before trying out other solutions.

Bass

Answer 2

In this particular repro case, I accidentally omitted the "./" from the import in Foo.ts. It should read:

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

The actual problem that prompted this question I have narrowed down to an apparent bug with project references in raw-loader.

Seisin

Answer 3

Rename the file shad.d.ts to global.d.ts and move to the root of your source directory (right next to index.ts). This got the typescript compiler to pick it up for me.

Underwent