NPM package contains node_modules which conflicts with other packages

I am trying to get the latest version of the office-ui-fabric-react npm package to work with the latest version of the vss-web-extension-sdk npm package.

global npm packages:

+-- typescript@2.9.2
+-- webpack@4.12.0

package.json (dependencies only):

"dependencies": 
 "office-ui-fabric-react": "^6.103.0",
 "vss-web-extension-sdk": "^5.141.0"
,
"devDependencies": 
 "@types/react": "^16.7.3",
 "@types/react-dom": "^16.0.9"

tsconfig.json:


 "compilerOptions": 
 "module": "amd",
 "moduleResolution": "node",
 "target": "es6",
 "lib": ["es5", "es6", "dom"],
 "jsx": "react",
 "rootDir": "src/",
 "outDir": "dist/",
 "baseUrl": "./",
 "types": [ "react", "react-dom" ]

When I run tsc -p . I get an error that it cannot find the modules necessary:

error TS2307: Cannot find module 'VSS/Controls/Navigation'.

If I add "vss-web-extension-sdk" to my tsconfig.json types, the module properly resolves, but compilation fails:

node_modules/vss-web-extension-sdk/node_modules/@types/react/index.d.ts:3668:13
- error TS2717: Subsequent property declarations must have the same type. Property 'div' must be of type
'DetailedHTMLProps, HTMLDivElement>',
but here has type 'DetailedHTMLProps,
HTMLDivElement>'.

It seems to me that it is failing perhaps because the @types/react found within the node_modules in vss-web-extension-sdk is conflicting with my @types/react found within my node_modules.

@types/react: // Type definitions for React 16.7

vss-web-extension-sdk/node_modules/@types/react: // Type definitions for React 15.6

I have tried to modify my tsconfig.json in numerous ways to no avail, and this is not an expert area of mine. How can I get these packages to play well with each other?

asked Nov 13 '18 at 17:20

m-y

21.9k1995187

1

Indeed, it looks like office-ui-fabric-react version 6.103.0 requires React 16 while vss-web-extension-sdk version 5.141.0 requires React 15. You could use an older version of office-ui-fabric-react, such as 5.131.1, which is compatible with React 15, and then be sure to specify a 15.x.x version of @types/react in your package.json. I don't know if this is the best solution.

– Matt McCutchen
Nov 13 '18 at 23:37

I'm constantly running into similar issues and they are currently the bane of my existence. If I'd known using vss-web-extension-sdk and TypeScript would lead to this version hell, I would have chosen a different career path. I have no desire to spend most of my days sifting through changelogs, dependencies and source code trying to figure out which version of X crappy software is compatible with which version of Y crappy software.

– pabrams
Mar 8 at 15:07

add a comment |

I am trying to get the latest version of the office-ui-fabric-react npm package to work with the latest version of the vss-web-extension-sdk npm package.

global npm packages:

+-- typescript@2.9.2
+-- webpack@4.12.0

package.json (dependencies only):

"dependencies": 
 "office-ui-fabric-react": "^6.103.0",
 "vss-web-extension-sdk": "^5.141.0"
,
"devDependencies": 
 "@types/react": "^16.7.3",
 "@types/react-dom": "^16.0.9"

tsconfig.json:


 "compilerOptions": 
 "module": "amd",
 "moduleResolution": "node",
 "target": "es6",
 "lib": ["es5", "es6", "dom"],
 "jsx": "react",
 "rootDir": "src/",
 "outDir": "dist/",
 "baseUrl": "./",
 "types": [ "react", "react-dom" ]

When I run tsc -p . I get an error that it cannot find the modules necessary:

error TS2307: Cannot find module 'VSS/Controls/Navigation'.

If I add "vss-web-extension-sdk" to my tsconfig.json types, the module properly resolves, but compilation fails:

node_modules/vss-web-extension-sdk/node_modules/@types/react/index.d.ts:3668:13
- error TS2717: Subsequent property declarations must have the same type. Property 'div' must be of type
'DetailedHTMLProps, HTMLDivElement>',
but here has type 'DetailedHTMLProps,
HTMLDivElement>'.

It seems to me that it is failing perhaps because the @types/react found within the node_modules in vss-web-extension-sdk is conflicting with my @types/react found within my node_modules.

@types/react: // Type definitions for React 16.7

vss-web-extension-sdk/node_modules/@types/react: // Type definitions for React 15.6

I have tried to modify my tsconfig.json in numerous ways to no avail, and this is not an expert area of mine. How can I get these packages to play well with each other?

asked Nov 13 '18 at 17:20

m-y

21.9k1995187

1

Indeed, it looks like office-ui-fabric-react version 6.103.0 requires React 16 while vss-web-extension-sdk version 5.141.0 requires React 15. You could use an older version of office-ui-fabric-react, such as 5.131.1, which is compatible with React 15, and then be sure to specify a 15.x.x version of @types/react in your package.json. I don't know if this is the best solution.

– Matt McCutchen
Nov 13 '18 at 23:37

I'm constantly running into similar issues and they are currently the bane of my existence. If I'd known using vss-web-extension-sdk and TypeScript would lead to this version hell, I would have chosen a different career path. I have no desire to spend most of my days sifting through changelogs, dependencies and source code trying to figure out which version of X crappy software is compatible with which version of Y crappy software.

– pabrams
Mar 8 at 15:07

add a comment |

I am trying to get the latest version of the office-ui-fabric-react npm package to work with the latest version of the vss-web-extension-sdk npm package.

global npm packages:

+-- typescript@2.9.2
+-- webpack@4.12.0

package.json (dependencies only):

"dependencies": 
 "office-ui-fabric-react": "^6.103.0",
 "vss-web-extension-sdk": "^5.141.0"
,
"devDependencies": 
 "@types/react": "^16.7.3",
 "@types/react-dom": "^16.0.9"

tsconfig.json:


 "compilerOptions": 
 "module": "amd",
 "moduleResolution": "node",
 "target": "es6",
 "lib": ["es5", "es6", "dom"],
 "jsx": "react",
 "rootDir": "src/",
 "outDir": "dist/",
 "baseUrl": "./",
 "types": [ "react", "react-dom" ]

When I run tsc -p . I get an error that it cannot find the modules necessary:

error TS2307: Cannot find module 'VSS/Controls/Navigation'.

If I add "vss-web-extension-sdk" to my tsconfig.json types, the module properly resolves, but compilation fails:

node_modules/vss-web-extension-sdk/node_modules/@types/react/index.d.ts:3668:13
- error TS2717: Subsequent property declarations must have the same type. Property 'div' must be of type
'DetailedHTMLProps, HTMLDivElement>',
but here has type 'DetailedHTMLProps,
HTMLDivElement>'.

It seems to me that it is failing perhaps because the @types/react found within the node_modules in vss-web-extension-sdk is conflicting with my @types/react found within my node_modules.

@types/react: // Type definitions for React 16.7

vss-web-extension-sdk/node_modules/@types/react: // Type definitions for React 15.6

I have tried to modify my tsconfig.json in numerous ways to no avail, and this is not an expert area of mine. How can I get these packages to play well with each other?

asked Nov 13 '18 at 17:20

m-y

21.9k1995187

I am trying to get the latest version of the office-ui-fabric-react npm package to work with the latest version of the vss-web-extension-sdk npm package.

global npm packages:

+-- typescript@2.9.2
+-- webpack@4.12.0

package.json (dependencies only):

"dependencies": 
 "office-ui-fabric-react": "^6.103.0",
 "vss-web-extension-sdk": "^5.141.0"
,
"devDependencies": 
 "@types/react": "^16.7.3",
 "@types/react-dom": "^16.0.9"

tsconfig.json:


 "compilerOptions": 
 "module": "amd",
 "moduleResolution": "node",
 "target": "es6",
 "lib": ["es5", "es6", "dom"],
 "jsx": "react",
 "rootDir": "src/",
 "outDir": "dist/",
 "baseUrl": "./",
 "types": [ "react", "react-dom" ]

When I run tsc -p . I get an error that it cannot find the modules necessary:

error TS2307: Cannot find module 'VSS/Controls/Navigation'.

If I add "vss-web-extension-sdk" to my tsconfig.json types, the module properly resolves, but compilation fails:

node_modules/vss-web-extension-sdk/node_modules/@types/react/index.d.ts:3668:13
- error TS2717: Subsequent property declarations must have the same type. Property 'div' must be of type
'DetailedHTMLProps, HTMLDivElement>',
but here has type 'DetailedHTMLProps,
HTMLDivElement>'.

It seems to me that it is failing perhaps because the @types/react found within the node_modules in vss-web-extension-sdk is conflicting with my @types/react found within my node_modules.

@types/react: // Type definitions for React 16.7

vss-web-extension-sdk/node_modules/@types/react: // Type definitions for React 15.6

I have tried to modify my tsconfig.json in numerous ways to no avail, and this is not an expert area of mine. How can I get these packages to play well with each other?

reactjs typescript npm office-ui-fabric azure-devops-extensions

asked Nov 13 '18 at 17:20

m-y

21.9k1995187

asked Nov 13 '18 at 17:20

m-y

21.9k1995187

asked Nov 13 '18 at 17:20

m-y

21.9k1995187

asked Nov 13 '18 at 17:20

m-y

21.9k1995187

asked Nov 13 '18 at 17:20

m-y

21.9k1995187

1

Indeed, it looks like office-ui-fabric-react version 6.103.0 requires React 16 while vss-web-extension-sdk version 5.141.0 requires React 15. You could use an older version of office-ui-fabric-react, such as 5.131.1, which is compatible with React 15, and then be sure to specify a 15.x.x version of @types/react in your package.json. I don't know if this is the best solution.

– Matt McCutchen
Nov 13 '18 at 23:37

I'm constantly running into similar issues and they are currently the bane of my existence. If I'd known using vss-web-extension-sdk and TypeScript would lead to this version hell, I would have chosen a different career path. I have no desire to spend most of my days sifting through changelogs, dependencies and source code trying to figure out which version of X crappy software is compatible with which version of Y crappy software.

– pabrams
Mar 8 at 15:07

add a comment |

1

Indeed, it looks like office-ui-fabric-react version 6.103.0 requires React 16 while vss-web-extension-sdk version 5.141.0 requires React 15. You could use an older version of office-ui-fabric-react, such as 5.131.1, which is compatible with React 15, and then be sure to specify a 15.x.x version of @types/react in your package.json. I don't know if this is the best solution.

– Matt McCutchen
Nov 13 '18 at 23:37

I'm constantly running into similar issues and they are currently the bane of my existence. If I'd known using vss-web-extension-sdk and TypeScript would lead to this version hell, I would have chosen a different career path. I have no desire to spend most of my days sifting through changelogs, dependencies and source code trying to figure out which version of X crappy software is compatible with which version of Y crappy software.

– pabrams
Mar 8 at 15:07

Indeed, it looks like office-ui-fabric-react version 6.103.0 requires React 16 while vss-web-extension-sdk version 5.141.0 requires React 15. You could use an older version of office-ui-fabric-react, such as 5.131.1, which is compatible with React 15, and then be sure to specify a 15.x.x version of @types/react in your package.json. I don't know if this is the best solution.

– Matt McCutchen
Nov 13 '18 at 23:37

I'm constantly running into similar issues and they are currently the bane of my existence. If I'd known using vss-web-extension-sdk and TypeScript would lead to this version hell, I would have chosen a different career path. I have no desire to spend most of my days sifting through changelogs, dependencies and source code trying to figure out which version of X crappy software is compatible with which version of Y crappy software.

– pabrams
Mar 8 at 15:07

add a comment |

0

active

oldest

votes

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53286418%2fnpm-package-contains-node-modules-which-conflicts-with-other-packages%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Dfyjkt