Commercetools-sdk-typescript currently clashes with Vite

[phofmann]

trafficstars

I bootstraped a new react project using Vite and react following npm init vite@latest vite-number-conversion -- --template react-ts after having added out typescript sdk using pnpm add @commercetools/platform-sdk @commercetools/sdk-client-v2 and trying to initialize a client, i am getting the following error in my browser log Uncaught ReferenceError: global is not defined at index.mjs:657:16

This seems to be the problem // expose Promise Body.Promise = global.Promise;

which seems to be related to https://github.com/vitejs/vite/discussions/5912

[ajimae]

Hi

I think the global.Promise is not an issue with the SDK as the global object is a nodejs thing.

What we have in the SDK is window object for browsers, also are you suggesting we should expose global.Promise globally from the SDK?

You can also try this:

import {…} from "commercetools/sdk-client-v2/commercetools-sdk-client-v2.esm"

Thanks

[jmhs11]

Hello, i have the same issue here, is there any news about this problem?

[ajimae]

@jmhs11

This issue has been fixed.

You need to polyfill your node native modules with the browser compatible version of the module.

You can configure the vite.config.ts as shown below

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      stream: 'rollup-plugin-node-polyfills/polyfills/stream'
      // other modules to be polyfilled will go here. e.g buffer etc
    }
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis'
      },
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true
        }),
        NodeModulesPolyfillPlugin()
      ]
    }
  },
  build: {
    rollupOptions: {
      plugins: [
        rollupNodePolyFill()
      ]
    }
  }
})

[jmhs11]

@jmhs11

This issue has been fixed.

You need to polyfill your node native modules with the browser compatible version of the module.

You can configure the vite.config.ts as shown below

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      stream: 'rollup-plugin-node-polyfills/polyfills/stream'
      // other modules to be polyfilled will go here. e.g buffer etc
    }
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis'
      },
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true
        }),
        NodeModulesPolyfillPlugin()
      ]
    }
  },
  build: {
    rollupOptions: {
      plugins: [
        rollupNodePolyFill()
      ]
    }
  }
})

Thank you a lot!! This solved the issue, additionaly i removed node-fetch from BuilderClient file.

I don't know if the docs were outdated, but there are different kind of implementations for the browser and is difficult to make it run, bases on the default examples from the docs and github...

For those who have the same problem as me, this is my config:

ClientBuilder.ts

import { createApiBuilderFromCtpClient } from "@commercetools/platform-sdk";
import { ClientBuilder } from "@commercetools/sdk-client-v2";

export const projectKey = ""; // here your project_key
const authMiddlewareOptions = {
	host: "https://auth.europe-west1.gcp.commercetools.com", // make sure your region is correct
	projectKey,
	credentials: {
		clientId: "", // here your client_id
		clientSecret: "", // here your client_secret
	},
	scopes: [`manage_project:${projectKey}`],
	fetch,
};

const httpMiddlewareOptions = {
	host: "https://api.europe-west1.gcp.commercetools.com",
	fetch,
};

const client = new ClientBuilder()
	.withProjectKey(projectKey)
	.withClientCredentialsFlow(authMiddlewareOptions)
	.withHttpMiddleware(httpMiddlewareOptions)
	.withLoggerMiddleware()
	.build();

export const getApiRoot = () => {
	return createApiBuilderFromCtpClient(client);
};

App.tsx

import { getApiRoot, projectKey } from "../lib/ClientBuilder";

const App = () => {
	const getProject = () => {
		getApiRoot().withProjectKey({ projectKey }).get().execute().then(console.log).catch(console.log);
	};

	useEffect(() => {
		getProject();
	}, []);

	return (
		<>
			<div>Project Details</div>
		</>
	);
};
export default App;

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react()],
	resolve: {
		alias: {
			stream: "rollup-plugin-node-polyfills/polyfills/stream",
			// other modules to be polyfilled will go here. e.g buffer etc
		},
	},
	optimizeDeps: {
		esbuildOptions: {
			define: {
				global: "globalThis",
			},
			plugins: [
				NodeGlobalsPolyfillPlugin({
					process: true,
					buffer: true,
				}),
				NodeModulesPolyfillPlugin(),
			],
		},
	},
	build: {
		rollupOptions: {
			plugins: [rollupNodePolyFill()],
		},
	},
});

package.json

{
	"name": "commercetools-react",
	"private": true,
	"version": "0.0.0",
	"type": "module",
	"scripts": {
		"dev": "vite",
		"build": "tsc && vite build",
		"preview": "vite preview"
	},
	"dependencies": {
		"@commercetools/platform-sdk": "4.3.0",
		"@commercetools/sdk-client-v2": "2.1.1",
		"react": "18.2.0",
		"react-dom": "18.2.0",
	},
	"devDependencies": {
		"@esbuild-plugins/node-globals-polyfill": "0.1.1",
		"@esbuild-plugins/node-modules-polyfill": "0.1.4",
		"@types/node": "18.11.15",
		"@types/react": "18.0.26",
		"@types/react-dom": "18.0.9",
		"@vitejs/plugin-react": "3.0.0",
		"rollup-plugin-node-polyfills": "0.2.1",
		"typescript": "4.9.3",
		"vite": "4.0.0"
	}
}