NPM package contains node_modules which conflicts with other packages










1















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?










share|improve this question






















  • 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















1















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?










share|improve this question






















  • 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













1












1








1


0






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?










share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 13 '18 at 17:20









m-ym-y

21.7k1994186




21.7k1994186












  • 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

















  • 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
















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





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












0






active

oldest

votes











Your Answer






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















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






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














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















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

Barbados

How to read a connectionString WITH PROVIDER in .NET Core?

Node.js Script on GitHub Pages or Amazon S3