Jiti

Jiti: A Package for Seamless Interoperability between ESM and CommonJS

For this week, I have been reading the unbuild source code and found a few packages that I have never seen before or used. I wanted to share some interesting packages that are used in these OSS projects so we can learn a thing or two.

What is Jiti?

Jiti is a package built by authors at Unjs. Unjs provides JS tools, libraries, and has about 63 npm packages and 421m downloads per month. Sheesh, that’s a lot.

The Jiti repository has this description “Runtime TypeScript and ESM support for Node.js”. Okay, what does this mean? To understand more about this tool, I looked at the features it offers:

• Seamless TypeScript and ESM syntax support for Node.js
• Seamless interoperability between ESM and CommonJS
• Asynchronous API to replace import()
• Synchronous API to replace require() (deprecated)
• Super slim and zero dependency
• Custom resolve aliases
• Smart syntax detection to avoid extra transforms
• Node.js native require.cache integration
• Filesystem transpile with hard disk caches
• ESM Loader support
• JSX support (opt-in)

Jiti’s usage in Docusaurus

I found the below code related to Jiti in the Docusaurus — moduleUtils.js:

import jiti from 'jiti';
//...

export async function loadFreshModule(modulePath: string): Promise<unknown> {
  try {
    if (typeof modulePath!== 'string') {
      throw new Error(logger.interpolate`Invalid module path of type ${modulePath}`);
    }
    const load = jiti(__filename, {
      // Transpilation cache, can be safely enabled
      cache: true,
      // Bypass Node.js runtime require cache
      // Same as "import-fresh" package we used previously
      requireCache: false,
      // Only take into consideration the default export
      // For now we don't need named exports
      // This also helps normalize return value for both CJS/ESM/TS modules
      interopDefault: true,
      // debug: true,
    });
    return load(modulePath);
  } catch (error) {
    console.error(error);
  }
}

Note in Docusaurus Migration Guide

New Config Loader

Docusaurus v3 changes its internal config loading library from import-fresh to jiti. It is responsible for loading files such as docusaurus.config.js or sidebars.js, and Docusaurus plugins.

Conclusion

In this article, we discussed Jiti, a package built by authors at Unjs, and its usage in Docusaurus. Jiti provides seamless interoperability between ESM and CommonJS, which is useful in dynamic imports and other scenarios.

FAQs

Q: What is Jiti?
A: Jiti is a package built by authors at Unjs that provides runtime TypeScript and ESM support for Node.js.

Q: What are the features of Jiti?
A: Jiti provides seamless TypeScript and ESM syntax support for Node.js, seamless interoperability between ESM and CommonJS, and other features such as asynchronous API, synchronous API, and more.

Q: How is Jiti used in Docusaurus?
A: Jiti is used in Docusaurus as a config loader to load files such as docusaurus.config.js or sidebars.js, and Docusaurus plugins.