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]

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

[ThomasCarca]

Hello, I am actually facing the same issues when trying to move from webpack to turbopack.
@rob-myers Your suggestion with a specific regex matchers seems like a good idea but do you know if there is any way for a given file to be raw-loaded only in certain occasions ?

It was possible with webpack doing

import rawCoreTokensStyle from '!!raw-loader!./tokens/core.css'
import coreTokensStyle from './tokens/core.css'

[rob-myers]

Hey @ThomasCarca. I couldn't get the import specifier prefix to work.

You could create symlinks and raw load those.

Alternatively you could try creating a custom loader based on raw-loader and use query params in import specifier.

[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;
}

[sakib412]

I solved this issue with a workaround. I exported my internal CSS file as a .txt file and loaded it as a string—using raw-loader in Turbo and asset/source in Webpack. This approach works for both Turbo and Webpack.

Configuration in packages/ui package.json

{
  "exports": {
    "./styles.css": "./dist/index.css",
    "./css.txt": "./dist/index.txt"
  },
  "scripts": {
    "build:tw": "tailwindcss -i ./src/styles/main.css -o ./dist/index.css --minify",
    "build:txt": "tailwindcss -i ./src/styles/main.css -o ./dist/index.txt --minify",
    "build": "run-p build:**"
  }
}

Configuration in apps/web next.config.ts

const nextConfig: NextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.txt$/,
      type: 'asset/source',
    });
    return config;
  },
  experimental: {
    turbo: {
      rules: {
        '*.txt': {
          loaders: ['raw-loader'],
          as: '*.js',
        },
      },
    },
  },
};

then using like this:

import uiStyles from '@ezy/ui/css.txt'; // `uiStyles` returns raw content as a string

Now, I’m wondering if Turbo has a built-in loader similar to asset/source in Webpack, so I can avoid using the extra raw-loader package. Any insights would be appreciated!