javascript – How to resolve .graphql files in Next.js using Turbopack?

I am migrating my Next.js 15 project to use Turbopack for development (next dev –turbo). My project imports .graphql files directly, and I’m encountering issues with resolving these files.

For example, when importing a .graphql file:
import QUERY from '@/graphql/queries/getSomeData.graphql';

I receive the following error:
Module not found: Can't resolve '@/graphql/queries/getSomeData.graphql'

I attempted to configure Turbopack in my next.config.ts to process .graphql files using graphql-tag/loader:

experimental: {  
    turbo: {  
        rules: {  
            '*.graphql': {  
                loaders: ['graphql-tag/loader'],  
                as: '*.js',  
            },  
        },  
        resolveExtensions: ['.graphql', '.gql', '.js', '.jsx', '.ts', '.tsx'],  
    },  
},

With this setup, I expected Turbopack to resolve .graphql files like Webpack does. However, the error persists, and Turbopack doesn’t seem to handle .graphql files. This might be because Turbopack is still a relatively new tool, and it doesn’t yet cover all the features Webpack offers, especially when it comes to handling custom loaders. I’d appreciate any insights or suggestions on how to resolve this issue.

Read more here: Source link