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

Having trouble with text decoration not working for a link in Material-UI. Any ideas for a solution?

Best practices for presenting various header details based on the current page in Next.js

Error: The element "FaceMesh" in _mediapipe_face_mesh__WEBPACK_IMPORTED_MODULE_3__ is not recognized as a valid

Using an Angular interface for an HTTP request: The statusText message reads as "Error: Unable to Determine."

Unable to set value using React Hook Form for Material-UI Autocomplete is not functioning

Creating dynamic JSX content in NextJS/JSX without relying on the use of dangerouslySetInnerHTML

Refreshing Components upon updates to session storage - Angular

Exploring the world of Next.js API routing

The login process in Next-auth is currently halted on the /api/auth/providers endpoint when attempting to log in with the

Encountering errors in Typescript build due to issues in the node_modules directory

Utilize an alias to define the SCSS path in an Angular-CLI library project

Oops! An issue occurred at ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 where a module cannot be located. The module in question is 'http'

Issue with Next.js 14 favicon.ico not displaying on Chrome browser

Experience feelings of bewilderment when encountering TypeScript and Angular as you navigate through the

The appearance and functionality of the app undergo a noticeable transformation after being bundled with Webpack

Triggering a class in Angular when another class is activated through JavaScript

Connecting conversations in react

Delivery Guy: Error: JSON parsing issue on line 1 – Unexpected number detected

Encountering a Lint No Nested Ternary Error while utilizing the ternary operator

What is the best way to bring in styles for a custom UI library in Angular 2?