What steps are involved in implementing ts-transformer-keys in a Next.js project?

Question

What steps are involved in implementing ts-transformer-keys in a Next.js project?

I am trying to extract keys from an interface as a string array so that I can iterate over them. After doing some research on stackoverflow, I found out that I need to use a library called 'ts-transformer-keys'. In my Next.js project, which involves both webpack and typescript, I have configured the webpack and tsconfig.json files according to the instructions provided in the link below:

https://github.com/iqraabdulrauf/ts-transformer-keys/blob/master/README.md

However, I am encountering an issue where the project fails to compile when using both 'ts-loader' and 'awesome-typescript-loader'. It seems to be unable to recognize the _document.tsx files located under the pages folder within the Next.js project.

typescript webpack next.js typescript-typings

Answer 1

Answer №1

Explore ts-patch and ts-transformer-keys

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "plugins": [
      { "transform": "ts-transformer-keys/transformer" }
    ]
  },
  // ...
}

UPDATE If the above does not work, modify the next.config.js:

const keysTransformer = require('ts-transformer-keys/transformer').default;
const enumerateTransformer = require('ts-transformer-enumerate/transformer').default;
const isTransformer = require('typescript-is/lib/transform-inline/transformer').default;

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = (phase, { defaultConfig }) => {

    const config = {
        webpack: (config, options) => {
            config.module.rules.push({
                test: /\.ts$/,
                loader: 'ts-loader', // or 'next-babel-loader'
                options: {
                    // ensure `transpileOnly: true` is not set here, as it will not work
                    getCustomTransformers: program => ({
                        before: [
                            keysTransformer(program),
                            enumerateTransformer(program),
                            isTransformer(program)
                        ]
                    })
                }
            });

            return config
        },
    };
    if (phase === PHASE_DEVELOPMENT_SERVER) {
         // additional configurations for development server
    }

    return Object.assign (config, {
        // constants mapped to process.env.
    });
};

Make sure to install ts-loader if it is not already installed. Alternatively, you can utilize next-babel-loader.

Answer 2

Explore ts-patch and ts-transformer-keys

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "plugins": [
      { "transform": "ts-transformer-keys/transformer" }
    ]
  },
  // ...
}

UPDATE If the above does not work, modify the next.config.js:

const keysTransformer = require('ts-transformer-keys/transformer').default;
const enumerateTransformer = require('ts-transformer-enumerate/transformer').default;
const isTransformer = require('typescript-is/lib/transform-inline/transformer').default;

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = (phase, { defaultConfig }) => {

    const config = {
        webpack: (config, options) => {
            config.module.rules.push({
                test: /\.ts$/,
                loader: 'ts-loader', // or 'next-babel-loader'
                options: {
                    // ensure `transpileOnly: true` is not set here, as it will not work
                    getCustomTransformers: program => ({
                        before: [
                            keysTransformer(program),
                            enumerateTransformer(program),
                            isTransformer(program)
                        ]
                    })
                }
            });

            return config
        },
    };
    if (phase === PHASE_DEVELOPMENT_SERVER) {
         // additional configurations for development server
    }

    return Object.assign (config, {
        // constants mapped to process.env.
    });
};

Make sure to install ts-loader if it is not already installed. Alternatively, you can utilize next-babel-loader.

What steps are involved in implementing ts-transformer-keys in a Next.js project?

Answer №1

Similar questions

Setting up ESM for Firebase functions: A step-by-step guide

Problem with Change Detection in Angular 2

Set up an event listener for when geolocation permission is approved

What sets apart extending and intersecting interfaces in TypeScript?

Best practices for annotating component props that can receive either a Component or a string representing an HTML tag

What is the best way to add a 'Drawer' component into the 'AppBar' using React MUI within the Next.js framework?

When selecting the "Open Link in New Tab" option in Chrome, the Angular app's routing will automatically redirect to the login page

Playwright script encounters module not found error

What could be the reason for the 'tsc' command not functioning in the Git Bash terminal but working perfectly in the command prompt?

Ensuring that a date is within a certain format in TypeScript

Seeking clarification on how the Typescript/Javascript and MobX code operates

Passing a type as an argument in Typescript

Unused Angular conditional provider found in final production bundle

How is it possible for Typescript to let me create an object without explicitly defining all mandatory fields?

Angular dynamically filling in a table with incomplete object data

Tips for detecting the end of a scroll view in a list view

Encountering difficulty importing TypeScript files dynamically within a Deno executable

The component is failing to store its value within the database

Implement Cross-Origin Resource Sharing in Angular frontend

The TypeScript in the React-Native app is lacking certain properties compared to the expected type