How to add support for raw-loader in turbo?

[sakib412]

Summary

I have installed raw-loader and it just working fine with webpack(both dev and build). But when I add --turbo flag to dev command, it cannot load the raw-loader.

Additional information

Installed the package as devDependency.
Added ts declaration

declare module '!!raw-loader!*' {
  const contents: string;
  export = contents;
}

then import as import styles from '!!raw-loader!~/styles/builder.css';

It works in webpack but not in turbo

Example

No response

[designly1]

Should work in turbo:

/** @type {import('next').NextConfig} */
const nextConfig = {
	experimental: {
		turbo: {
			rules: {
				'*.html': {
					loaders: ['raw-loader'],
					as: '*.js',
				},
			},
		},
	},
};

export default nextConfig;

[rob-myers]

The above config worked, although (perhaps obviously) I had to remove the !!raw-loader! prefix.

I also had to add respective webpack config to get next build to work.

[sakib412]

Should work in turbo:

/** @type {import('next').NextConfig} */
const nextConfig = {
	experimental: {
		turbo: {
			rules: {
				'*.html': {
					loaders: ['raw-loader'],
					as: '*.js',
				},
			},
		},
	},
};

export default nextConfig;

If I select *.css then it will override the loader set by next js and all css is import as raw content. So this is not working in my case.
Any other solution? I saw asset module recommended by webpack instead of raw-loader but i cannot make it work with asset module.

[rob-myers]

Hey @sakib412 you could use a more specific glob than *.css.

For example, I want to apply raw-loader to shell scripts *.sh.
Since I keep them in a specific directory .../sh/src I can use this config:

const nextConfig: NextConfig = {
  // ...
  // 🔔 dev only, where turbo runs via `next dev --turbopack`
  experimental: {
    turbo: {
      rules: {
        "**/sh/src/*.sh": {
          loaders: ["raw-loader"],
          as: "*.js",
        },
      },
    },
  },
  // 🔔 build only, because turbopack does not run during build
  webpack(config: import("webpack").Configuration) {
    config.module?.rules?.push({
      test: /\/sh\/src\/.*\.sh$/,
      use: "raw-loader",
    });
    return config;
  },
};

[sakib412]

Thanks for your reply @rob-myers .
I am using now this way:

// @ts-expect-error - Why this is not working? I already declared this in types.d.ts
import uiStyles from '!!raw-loader!@ezy/ui/styles.css';
// @ts-expect-error - Why this is not working? I already declared this in types.d.ts
import thisTw from '!!raw-loader!@ezy/builder/styles.css';

It is working with webpack. All I just need to do is install raw-loader and everything seems to work. So if I am using inline loader like this I don't need to configure anything in webpack.

Now how to configure this in turbo, I am quite dull with regex.

[rob-myers]

If you only import those two CSS files from @ezy,
then hopefully this works in both turbo/webpack:

const nextConfig: NextConfig = {
  // ...
  experimental: {
    turbo: {
      rules: {
        "@ezy/**/*.css": {
          loaders: ["raw-loader"],
          as: "*.js",
        },
      },
    },
  },
  webpack(config: import("webpack").Configuration) {
    config.module?.rules?.push({
      test: /^@ezy\/.*\.css$/,
      use: "raw-loader",
    });
    return config;
  },
};

import uiStyles from '@ezy/ui/styles.css';
import thisTw from '@ezy/builder/styles.css';

[designly1]

Here's how I do my config. I use webpack for production and turbo for dev:

import { withSentryConfig, SentryBuildOptions } from '@sentry/nextjs';
import type { NextConfig } from 'next';

import { merge } from 'lodash-es';

const USE_SENTRY = process.env.NEXT_PUBLIC_USE_SENTRY === 'true';

const images: NextConfig['images'] = {
	remotePatterns: [
		{
			protocol: 'http',
			hostname: 'localhost',
			port: '',
			pathname: '/**',
		},
		{
			protocol: 'https',
			hostname: 'i.pravatar.cc',
			port: '',
			pathname: '/**',
		},
	],
};

const config = (): NextConfig => {
	const isDev = process.env.NODE_ENV === 'development';

	const commonConfig: NextConfig = {
		staticPageGenerationTimeout: 120,
		reactStrictMode: true,
		images,
		sassOptions: {
			silenceDeprecations: ['legacy-js-api'],
		},
		experimental: {
			reactCompiler: true,
		},
	};

	const devConfigTurbo: NextConfig = {
		experimental: {
			turbo: {
				rules: {
					'*.html': {
						loaders: ['raw-loader'],
						as: '*.js',
					},
					'*.md': {
						loaders: ['raw-loader'],
						as: '*.js',
					},
				},
			},
		},
	};

	const prodConfig: NextConfig = {
		webpack: config => {
			config.module.rules.push({
				test: /\.(md|txt|html)$/i,
				loader: 'raw-loader',
			});

			return config;
		},
	};

	const config = merge({}, commonConfig, isDev ? devConfigTurbo : prodConfig);

	return config;
};

const sentryConfig: SentryBuildOptions = {
	org: 'example',
	project: 'example',
	sentryUrl: 'https://example.com',
	silent: !process.env.CI,
	widenClientFileUpload: true,
	reactComponentAnnotation: {
		enabled: true,
	},
	hideSourceMaps: true,
	disableLogger: true,
	automaticVercelMonitors: true,
};

const useConfig = USE_SENTRY ? withSentryConfig(config(), sentryConfig) : config();

export default useConfig;

Then you need to declare each file extension you want to import as a global module:

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