CODEWITHSUNDEEP
reactjswebpackhighchartsdompurify
Coyote
Coyote

Reputation: 196

How to configure webpack such that it wont contain duplicates of the same package

Background: We are integrating a package into another project and we are facing an issue of Trusted-types when we try to run it because there is a dependent package already exists in the hosting project.

the package we are trying to load (let's call it "Coyote") has a dependency on another package of ours called common-ui common-ui contains dependencies on:

  1. dompurify
  2. highcharts

we are trying to load "Coyote" into a project that already has dompurify and highcharts packages in it and getting trusted-types error:

highcharts.js:56  Refused to create a TrustedTypePolicy named 'highcharts' because a policy with that name already exists and the Content Security Policy directive does not 'allow-duplicates': "trusted-types dompurify

the node_modules in the project we are trying to integrate to is in: the root: ./

in the project we are trying to integrate the "Coyote" package in the following routs:

packages/components/A/src/C/context.tsx
packages/components/B/src/container.tsx

we want to use the current project dompurify and highcharts if exist in the project, else take it from common-ui dependencies. common-ui is consumed from many platforms so we need to do it right such that it will always find the root node_modules and will check if dompurify and highcharts exists and load it otherwise use the common-ui one.

we tried to add the following to the webpack of common-ui but it didnt work:

resolve: {
    alias: {
      dompurify: fs.existsSync(path.resolve(__dirname, 'node_modules', 'dompurify'))
        ? 'dompurify'
        : path.resolve(__dirname, '..', '..', 'node_modules', 'dompurify', 'dist', 'purify.js'),
      highcharts: fs.existsSync(path.resolve(__dirname, 'node_modules', 'highcharts'))
        ? 'highcharts'
        : path.resolve(__dirname, '..', '..', 'node_modules', 'highcharts', 'highcharts.js'),
    },
    ...
 }

Upvotes: 1

Views: 63

Answers (1)

Coyote
Coyote

Reputation: 196

We managed to fix this issue by using peer dependencies:

  "peerDependencies": {
    "dompurify": "^2.4.1",
    "highcharts": "^9.1.2",
  },

not sure why in the first place it was bringing a second call to those libraries when loading our component

Upvotes: 1

Related Questions