process.cwd is not a function

[charlycou]

I'm trying to use json-schema-to-typescript to build typescript interface but I get this error

TypeError: process.cwd is not a function
    at node_modules/json-schema-to-typescript/dist/src/index.js (index.js:84:18)
    at __require (chunk-J43GMYXM.js?v=e61e879e:11:50)
    at dep:json-schema-to-typescript:1:16

From what I understood this process.cwd make sense only if run by node but not in browser. Do I need to mock the function to run it in a browser? I'm using Vite as bundler if anyone got in the same situation.

[GabenGar]

Why do you need to run it in browser? There is no typescript in the browser environment.

[charlycou]

True. I made up my mind I managed to generate the interfaces at build time. Thanks

[PowerSupply]

I want to run it in a browser to display the type to the user, without having to have a build step. How is this possible? I see that the package is available on CDN , but with no instructions on how to use it.

[techgaun]

there's some additional steps to get this running on browser if you're using the package with vite tooling. just putting it out for future for folks. this could be done in few different ways but this is what I ended up doing:

1. vite config

• resolve.alias setup this way so that we can reference appropriate files. this could probably be handled more cleanly but I went for verbosity but rollup docs has few other samples that you could follow to get this working

resolve: {
    alias: [
      {
        find: '@prettier/plugins/typescript',
        replacement: 'prettier/plugins/typescript',
      },
      {
        find: '@prettier/plugins/babel',
        replacement: 'prettier/plugins/babel',
      },
      {
        find: '@prettier/plugins/estree',
        replacement: 'prettier/plugins/estree',
      },
      {
        find: 'prettier',
        replacement: 'prettier/standalone',
      },
    ],
  },

• Additionally, you want to also use vite-plugin-node-polyfills package.

import { nodePolyfills } from 'vite-plugin-node-polyfills';
//...

plugins: [
    // ... other plugins
    nodePolyfills({
      include: ['path', 'process'], // this should help `process.cwd` issue
    }),
  ],

2. if you are using typescript, probably either create a type:
   like prettier.d.ts or something with the content

declare module '@prettier/plugins/estree' {
  const plugin: any;
  export = plugin;
}

declare module '@prettier/plugins/babel' {
  const plugin: any;
  export = plugin;
}

declare module '@prettier/plugins/typescript' {
  const plugin: any;
  export = plugin;
}

• or tsconfig.app.json for eg.

// under compilerOptions
"paths": {
      "@prettier/plugins/babel": ["./node_modules/prettier/plugins/babel.js"],
      "@prettier/plugins/estree": ["./node_modules/prettier/plugins/estree.js"],
      "@prettier/plugins/typescript": ["./node_modules/prettier/plugins/typescript.js"]
    }

3. Then use it as below:

import { compile } from 'json-schema-to-typescript';
import * as babelParser from '@prettier/plugins/babel';
import * as prettierPluginEstree from '@prettier/plugins/estree';
import * as typescriptParser from '@prettier/plugins/typescript';

const options = {
  bannerComment: '',
  declareExternallyReferenced: true,
  enableConstEnums: true,
  unreachableDefinitions: false,
  strictIndexSignatures: false,
  style: {
    parser: 'typescript',
    plugins: [typescriptParser, babelParser, prettierPluginEstree],
    semi: true,
    singleQuote: true,
  },
};
// then do
const ts = await compile(parsedJsonSchema, 'MySchema', options);

4. if you are using eslint, you'll also need to add things to eslint config

settings: {
    'import/resolver': {
      alias: {
        map: [
          ['', './public'],
          ['@', './src'],
          ['@prettier/plugins/babel', './node_modules/prettier/plugins/babel.js'],
          ['@prettier/plugins/estree', './node_modules/prettier/plugins/estree.js'],
          ['@prettier/plugins/typescript', './node_modules/prettier/plugins/typescript.js'],
        ],
        extensions: ['.js', '.jsx', '.tsx', '.ts'],
}}

all of this could definitely be cleaned up a little bit but this should give you a working setup with vite.

Basically, long story short, prettier/standalone is what you want to use but you can not control that, so you have to use some vite-fu. I believe the package uses browserify but I don't think that works with vite (or maybe it does, I just have not looked closely).

Hope this helps

[abetoots]

@techgaun I now know vite-fu. thanks for posting your solution.