Preventing Circular Dependencies in RollupJS and TypeScript: Ensuring Build Failure When Circular Dependencies are Detected

Question

Preventing Circular Dependencies in RollupJS and TypeScript: Ensuring Build Failure When Circular Dependencies are Detected

I recently created a React component library using RollupJS (2.7) and TypeScript (3.9.10), and I encountered an issue with circular dependencies being reported:

>> yarn build
(!) Circular dependency
src/index.ts -> src/components/index.ts -> src/components/Button/index.ts -> src/components/Button/Button.tsx -> src/index.ts

Despite the circular dependencies, the build process still manages to complete:

created ./dist/index.esm.js, ./dist/index.js in 4.3s

I searched through the tsconfig and rollup.config.js documentation for any configuration changes that could help address circular dependencies, but found none.

Is there a way to configure the tools (such as tsconfig or rollup.config) to automatically fail the build if a circular dependency is detected?

typescript rollupjs

Answer 1

Answer №1

After stumbling upon this informative comment, I discovered the existence of the onwarn API.

Although there isn't an official documentation for onwarn in Rollup, I managed to resolve my issue by including the following code snippet at the top level of my rollup.config.js:

onwarn: (message) => {
  // fail build if circular dependencies are found
  if (message.code === 'CIRCULAR_DEPENDENCY') {
    console.error(message);
    process.exit(-1);
  }
},

Answer 2

After stumbling upon this informative comment, I discovered the existence of the onwarn API.

Although there isn't an official documentation for onwarn in Rollup, I managed to resolve my issue by including the following code snippet at the top level of my rollup.config.js:

onwarn: (message) => {
  // fail build if circular dependencies are found
  if (message.code === 'CIRCULAR_DEPENDENCY') {
    console.error(message);
    process.exit(-1);
  }
},

Preventing Circular Dependencies in RollupJS and TypeScript: Ensuring Build Failure When Circular Dependencies are Detected

Answer №1

Similar questions

Upon updating the file extension from js to ts, Ionic is no longer able to locate the module

Combining JavaScript files can cause conflicts with duplicate identifiers when using Typescript namespaces

Displaying an error message following the dynamic retrieval of the input field's value

Using TypeScript or JavaScript, set object keys as fields of a class

Is there a way to use Jest spyOn to monitor a function that is returned by another function?

Supabase Authentication User Interface Error: Uncaught TypeError - Unable to access properties of null (specifically 'useState')

Is there a way to create a universal getter/setter for TypeScript classes?

Accessing a variable within a function in Angular

Increasing the number of service providers in Angular2-4 directives

Attempting to transfer files to and from Firebase storage

CPU usage spikes after launching a Cordova project in Visual Studio 2015 RTM

Implementing onClick event handling in Material UI components using Typescript

The type 'Observable<DataListItem[]>' cannot be assigned to type 'DataListItem[]'

Comparing Node.JS using Typescript versus Javascript to Ruby On Rails

Having difficulty forming queries correctly using TypeScript, React, and GraphQL

What is the process of transforming a basic JavaScript function into a TypeScript function?

Expanding Form Arrays with Dynamically Generated Fields

The validator is incorrectly diagnosing the input as 'invalid' when in reality it is not

Vue 3 components array typified with Typescript

Angular 2 - Managing the status of checkboxes in a list of checkboxes