Issue installing a fork of RTK Query Codegen

[kriti-sc]

I wanted to modify the RTK Query Codegenerator (packages/rtk-query-codegen-openapi for my usecase.

So my first step was to extract the codegen folder from the repo and try to use it in my project without making changes.
I tried to install it as a local package but I kept getting an error.

This is what I did next: I tried to upload it to the npm registry, thinking if I installed it the same way as the original package it will work. It is not and I think I may be doing something wrong and would help understanding what exactly.

When I run npx testing-openapi openapi-config.ts, I get this error:

/.../code-gen-test/node_modules/@testing/codegen-openapi/lib/bin/cli.js:2
import program from 'commander';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

If I add type: module to my copy of the rtk-query codegen package, I get this error:

node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/.../code-gen-test/node_modules/@testing/codegen-openapi/lib/utils' is not supported resolving ES modules imported from /.../code-gen-test/node_modules/@testing/codegen-openapi/lib/index.js
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:412:17)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///.../code-gen-test/node_modules/@testing/codegen-openapi/lib/utils'
}

I decided to compare some files in my installation and the original installation. Please note the filepaths to understand the context of both files. If you notice, the two files are different in the first 4-5 lines.

// file: /.../code-gen-test/node_modules/@testing/codegen-openapi/lib/index.js

import fs from 'node:fs';
import path from 'node:path';
import { isValidUrl, prettify } from './utils';
export async function generateEndpoints(options) {
    const schemaLocation = options.schemaFile;
    const schemaAbsPath = isValidUrl(options.schemaFile)
        ? options.schemaFile
        : path.resolve(process.cwd(), schemaLocation);
    const sourceCode = await enforceOazapftsTsVersion(async () => {
        const { generateApi } = await import('./generate');
        return generateApi(schemaAbsPath, options);
    });
    const { outputFile } = options;
    if (outputFile) {
        fs.writeFileSync(path.resolve(process.cwd(), outputFile), await prettify(outputFile, sourceCode));
    }
    else {
        return await prettify(null, sourceCode);
    }
}
export function parseConfig(fullConfig) {
    const outFiles = [];
    if ('outputFiles' in fullConfig) {
        const { outputFiles, ...commonConfig } = fullConfig;
        for (const [outputFile, specificConfig] of Object.entries(outputFiles)) {
            outFiles.push({
                ...commonConfig,
                ...specificConfig,
                outputFile,
            });
        }
    }
    else {
        outFiles.push(fullConfig);
    }
    return outFiles;
}
/**
 * Enforces `oazapfts` to use the same TypeScript version as this module itself uses.
 * That should prevent enums from running out of sync if both libraries use different TS versions.
 */
function enforceOazapftsTsVersion(cb) {
    const ozTsPath = require.resolve('typescript', { paths: [require.resolve('oazapfts')] });
    const tsPath = require.resolve('typescript');
    const originalEntry = require.cache[ozTsPath];
    try {
        require.cache[ozTsPath] = require.cache[tsPath];
        return cb();
    }
    finally {
        if (originalEntry) {
            require.cache[ozTsPath] = originalEntry;
        }
        else {
            delete require.cache[ozTsPath];
        }
    }
}
//# sourceMappingURL=index.js.map

// file: /.../code-gen-test/node_modules/@rtk-query/codegen-openapi/lib/index.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.parseConfig = exports.generateEndpoints = void 0;
const path_1 = __importDefault(require("path"));
const fs_1 = __importDefault(require("fs"));
const utils_1 = require("./utils");
async function generateEndpoints(options) {
    const schemaLocation = options.schemaFile;
    const schemaAbsPath = (0, utils_1.isValidUrl)(options.schemaFile)
        ? options.schemaFile
        : path_1.default.resolve(process.cwd(), schemaLocation);
    const sourceCode = await enforceOazapftsTsVersion(() => {
        const { generateApi } = require('./generate');
        return generateApi(schemaAbsPath, options);
    });
    const outputFile = options.outputFile;
    if (outputFile) {
        fs_1.default.writeFileSync(path_1.default.resolve(process.cwd(), outputFile), await (0, utils_1.prettify)(outputFile, sourceCode));
    }
    else {
        return await (0, utils_1.prettify)(null, sourceCode);
    }
}
exports.generateEndpoints = generateEndpoints;
function parseConfig(fullConfig) {
    const outFiles = [];
    if ('outputFiles' in fullConfig) {
        const { outputFiles, ...commonConfig } = fullConfig;
        for (const [outputFile, specificConfig] of Object.entries(outputFiles)) {
            outFiles.push({
                ...commonConfig,
                ...specificConfig,
                outputFile,
            });
        }
    }
    else {
        outFiles.push(fullConfig);
    }
    return outFiles;
}
exports.parseConfig = parseConfig;
/**
 * Enforces `oazapfts` to use the same TypeScript version as this module itself uses.
 * That should prevent enums from running out of sync if both libraries use different TS versions.
 */
function enforceOazapftsTsVersion(cb) {
    const ozTsPath = require.resolve('typescript', { paths: [require.resolve('oazapfts')] });
    const tsPath = require.resolve('typescript');
    const originalEntry = require.cache[ozTsPath];
    try {
        require.cache[ozTsPath] = require.cache[tsPath];
        return cb();
    }
    finally {
        if (originalEntry) {
            require.cache[ozTsPath] = originalEntry;
        }
        else {
            delete require.cache[ozTsPath];
        }
    }
}
//# sourceMappingURL=index.js.map

I would really appreciate some help fixing this. I have been at it for a few hours now.

[phryneas]

Are you missing type: 'module' in your fork's package.json? Generally, it seems like you are building ESM, but are loading it as CJS.

[kriti-sc]

Thank you for your response.

I did try that. That was the first fix that I tried and got this:

node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/.../code-gen-test/node_modules/@testing/codegen-openapi/lib/utils' is not supported resolving ES modules imported from /.../code-gen-test/node_modules/@testing/codegen-openapi/lib/index.js
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:412:17)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///.../code-gen-test/node_modules/@testing/codegen-openapi/lib/utils'
}

Then I also tried type: commonjs. That also did not work. I don't have the exact error on hand but can rerun if it would help debugging.
How do I not make it load as ESM if I am building ESM?

[robert-westenberger]

Just a guess but you might be running a node version that is too new? I believe in node > 18 you need to use a module customization hook in order to use imports without an extension, or a directory import.

[kriti-sc]

Ok. Thanks for the pointer. I will try it out.
Update: I am running node 16.

[kriti-sc]

@phryneas Can you please confirm if the current tsconfig.json is correct? https://github.com/reduxjs/redux-toolkit/blame/master/packages/rtk-query-codegen-openapi/tsconfig.json

I think the current tsconfig does not match up with the build on NPM. Changing the tsconfig fixed the issue for me.

[phryneas]

I honestly have no idea right now, I'm sorry. I believe some things there were merged (#4198), but not published yet.

[aryaemami59]

I have a working PR that will hopefully fix this.

[kriti-sc]

@phryneas that is ok. Thank you for looking into this. Feel free to take this issue forward as you please.

[markerikson]

Should be live in https://github.com/reduxjs/redux-toolkit/releases/tag/%40rtk-query%2Fcodegen-openapi%402.0.0-alpha.0 ! Please try it out and let us know if it works.