Unable to get it working with TypeScript

[trajano]

I get the following

TS7016: Could not find a declaration file for module 'office-ui-fabric-vue'. 'C:\w\trajano-ms\ms-vue\node_modules\office-ui-fabric-vue\dist\index.js' implicitly has an 'any' type. Try npm install @types/office-ui-fabric-vue if it exists or add a new declaration (.d.ts) file containing declare module 'office-ui-fabric-vue';

When I try to run the NPM I get the following

C:\w\trajano-ms\ms-vue>npm install @types/office-ui-fabric-vue
npm ERR! code E404
npm ERR! 404 Not Found: @types/office-ui-fabric-vue@latest

[trajano]

the thing that worked was to create the .d.ts file I just added it to my vue-shims.d.ts as

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}
declare module 'office-ui-fabric-vue'

[aidewoode]

This project dosen't support TypeScript yet, I plan to add it later

[trajano]

I think a good stop gap would be to create that declare module 'office-ui-fabric-vue as part of the project.

[naufalCA]

Hi, I want to use office-ui-fabric-vue in SharePoint Framework using typescript, nut I am not able to achieve it.

[Bchir]

Hi, you can try this

let OfficeUIFabricVue = require( 'office-ui-fabric-vue' )
Vue.use( OfficeUIFabricVue.default)

[super2ni]

Hey @Bchir,

I'm totally new to TypeScript and Spfx webparts. How do you use this project along with TypeScript? I tried to add your two lines either in the directives and in the constructor of my VueJS component and I get this error: [1521539700053][OtherGlobalError.window.onerro] Error: Error:Script error., file:, line:0, column:0 TraceLogger._writeToConsole @ sp-loader-assembly_en-us.js:10834 TraceLogger._log @ sp-loader-assembly_en-us.js:10817 TraceLogger.logError @ sp-loader-assembly_en-us.js:10766 SPGlobalErrorHandler.basicTracingHandler @ sp-application-base.js:17752 VM1507:5 Uncaught Error: Multiple anonymous defines in module https://component-id.invalid/a0e1eddd-ea67-4775-a52b-0141c5807146_0.0.1 at l.eval [as reduceRegister_] (eval at <anonymous> (sp-loader-assembly_en-us.js:5810), <anonymous>:5:14395) at HTMLScriptElement.m (eval at <anonymous> (sp-loader-assembly_en-us.js:5810), <anonymous>:5:72)

[Bchir]

Hi @super2ni
Actually, i didn't try to use it with in spfx project .I created a normal webpack project and inserted those 2 lignes on the top of my main file ( just after the imports lignes) and it worked fine. Can you share some code so i can help you ? what other package are you using ?

[super2ni]

Hello @Bchir,

Actually I gave up the idea of using Office Fabric Components. My client will have the WebPart deployed to a Publishing website with a high UI customisation and gave me very little time to develop it. I will give it another try maybe on an other project using only the Modern design.

Thank you for your help and time anyway.