My project is running in Next.JS 15.0.3 with turbopack.

raw-loader is now supported with turbopack and so I'd like to configure it to load webgl shaders files. I've installed raw-loader as dev dependency.

My next.config.ts looks like so:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
    sassOptions: {
        silenceDeprecations: ['legacy-js-api'],
    },
    experimental: {
        turbo: {
            useSwcCss: true,
            rules: {
                '*p.svg': {
                    loaders: ['@svgr/webpack'],
                    as: 'component',
                },
                '/.(glsl|vs|fs|vert|frag)$/': {
                    loaders: ['raw-loader'],
                },
            },
        },
    },
};

export default nextConfig;

I also tried to add webpack with no result:

cont nextConfig: NextConfig = {
  ...,
    webpack(config) {
        config.module.rules.push({
            test: /\.(glsl|vs|fs|vert|frag)$/,
            exclude: /node_modules/,
            use: ['raw-loader'],
        });
        return config;
    },
}

I always get this error:

Unknown module type
This module doesn't have an associated type. Use a known file extension, or register a loader for it.

My project is running in Next.JS 15.0.3 with turbopack.

raw-loader is now supported with turbopack and so I'd like to configure it to load webgl shaders files. I've installed raw-loader as dev dependency.

My next.config.ts looks like so:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
    sassOptions: {
        silenceDeprecations: ['legacy-js-api'],
    },
    experimental: {
        turbo: {
            useSwcCss: true,
            rules: {
                '*p.svg': {
                    loaders: ['@svgr/webpack'],
                    as: 'component',
                },
                '/.(glsl|vs|fs|vert|frag)$/': {
                    loaders: ['raw-loader'],
                },
            },
        },
    },
};

export default nextConfig;

I also tried to add webpack with no result:

cont nextConfig: NextConfig = {
  ...,
    webpack(config) {
        config.module.rules.push({
            test: /\.(glsl|vs|fs|vert|frag)$/,
            exclude: /node_modules/,
            use: ['raw-loader'],
        });
        return config;
    },
}

I always get this error:

Unknown module type
This module doesn't have an associated type. Use a known file extension, or register a loader for it.

• next.js
• raw-loader
• turbopack

1 Answer 1

To fix this, I needed to write it this way:

    experimental: {
        turbo: {
            useSwcCss: true,
            rules: {
                ...,
                '*.{glsl,vs,fs,vert,frag}': {
                    loaders: ['raw-loader'],
                    as: '*.js',
                },
            },
        },
    },