SOLVED

error TS2307: Cannot find module '@microsoft/sp-webpart-base'

%3CLINGO-SUB%20id%3D%22lingo-sub-112841%22%20slang%3D%22en-US%22%3Eerror%20TS2307%3A%20Cannot%20find%20module%20'%40microsoft%2Fsp-webpart-base'%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-112841%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20trying%20to%20create%20a%20reusable%20library%20within%20a%20SPFx%20project%20and%20I%20used%20the%20gulp%20tasks%20created%20by%20Waldek%20here%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fwaldekmastykarz%2Fspfx-sample-dllcode%2Fblob%2Fb3fe3e208d7271f5f52b64cd66522207ccb4ee1c%2Fgulpfile.js%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fwaldekmastykarz%2Fspfx-sample-dllcode%2Fblob%2Fb3fe3e208d7271f5f52b64cd66522207ccb4ee1c%2Fgulpfile.js%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F21505i29D4752A21873AEF%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%221.png%22%20title%3D%221.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHowever%20I%20get%20the%20following%20errors%20which%20I%20know%20exactly%20what%20it%20means%2C%20but%20during%20coding%20time%2C%20I%20Dont%20see%20they%20get%20any%20warnings%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3EC%3A%2FUsers%2Fvalencil%2FRepos%2FTypescriptDesignPatternsInSPFx%2Fnode_modules%2F%40types%2Frequirejs%2Findex.d.ts(416%2C13)%3A%20error%20TS2403%3A%20Subsequent%20variable%20declarations%20must%20have%20the%20same%20type.%20%20Variable%20'requir%0Ae'%20must%20be%20of%20type%20'NodeRequire'%2C%20but%20here%20has%20type%20'Require'.%0Asrc%5Clibraries%5Cspdataaccess%5Cdataproviders%5CIDataProvider.ts(1%2C33)%3A%20error%20TS2307%3A%20Cannot%20find%20module%20'%40microsoft%2Fsp-webpart-base'.%0Asrc%5Clibraries%5Cspdataaccess%5Cdataproviders%5CsharepointDataProvider.ts(5%2C8)%3A%20error%20TS2307%3A%20Cannot%20find%20module%20'%40microsoft%2Fsp-http'.%0Asrc%5Clibraries%5Cspdataaccess%5Cdataproviders%5CsharepointDataProvider.ts(6%2C33)%3A%20error%20TS2307%3A%20Cannot%20find%20module%20'%40microsoft%2Fsp-webpart-base'.%0Asrc%5Clibraries%5Cspdataaccess%5Cdataproviders%5CsharepointDataProvider.ts(20%2C16)%3A%20error%20TS1056%3A%20Accessors%20are%20only%20available%20when%20targeting%20ECMAScript%205%20and%20higher.%0Asrc%5Clibraries%5Cspdataaccess%5Cdataproviders%5CsharepointDataProvider.ts(25%2C16)%3A%20error%20TS1056%3A%20Accessors%20are%20only%20available%20when%20targeting%20ECMAScript%205%20and%20higher.%0Asrc%5Clibraries%5Cspdataaccess%5Cdataproviders%5CsharepointDataProvider.ts(29%2C16)%3A%20error%20TS1056%3A%20Accessors%20are%20only%20available%20when%20targeting%20ECMAScript%205%20and%20higher.%0Asrc%5Clibraries%5Cspdataaccess%5Cdataproviders%5CsharepointDataProvider.ts(34%2C16)%3A%20error%20TS1056%3A%20Accessors%20are%20only%20available%20when%20targeting%20ECMAScript%205%20and%20higher.%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20idea%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-112901%22%20slang%3D%22en-US%22%3ERe%3A%20error%20TS2307%3A%20Cannot%20find%20module%20'%40microsoft%2Fsp-webpart-base'%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-112901%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20base%20project%20you're%20using%2C%20has%20been%20created%20using%20a%20prerelease%20version%20(v0.2.0)%20of%20the%20SharePoint%20Framework.%20In%20your%20case%2C%20you're%20using%20v1.2.0%20of%20the%20SharePoint%20Framework%2C%20which%20is%20why%20your%20seeing%20various%20errors.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20you%20could%20try%2C%20is%20to%20carefully%20port%20the%20different%20pieces%20and%20see%20how%20the%20different%20types%20change%20over%20time.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat's%20even%20more%20important%20though%2C%20is%20that%20at%20this%20time%2C%20deploying%20SharePoint%20Framework%20libraries%20to%20the%20App%20Catalog%20is%20not%20supported%20and%20you%20will%20get%20an%20error%20if%20you%20try%20to%20do%20it.%20Because%20of%20it%2C%20I'd%20recommend%20you%26nbsp%3Bbuild%20a%20regular%20NPM%20package%20for%20the%20time%20being%2C%20and%20if%20still%20necessary%2C%20convert%20it%20to%20a%20SharePoint%20Framework%20library%20once%20it's%20supported.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-112850%22%20slang%3D%22en-US%22%3ERe%3A%20error%20TS2307%3A%20Cannot%20find%20module%20'%40microsoft%2Fsp-webpart-base'%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-112850%22%20slang%3D%22en-US%22%3E%3CP%3Ebtw.%2C%20my%20package.json%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%7B%0A%20%20%22name%22%3A%20%22typescript-design-patterns-in-sp-fx%22%2C%0A%20%20%22version%22%3A%20%220.0.1%22%2C%0A%20%20%22private%22%3A%20true%2C%0A%20%20%22engines%22%3A%20%7B%0A%20%20%20%20%22node%22%3A%20%22%26gt%3B%3D0.10.0%22%0A%20%20%7D%2C%0A%20%20%22scripts%22%3A%20%7B%0A%20%20%20%20%22build%22%3A%20%22gulp%20bundle%22%2C%0A%20%20%20%20%22clean%22%3A%20%22gulp%20clean%22%2C%0A%20%20%20%20%22test%22%3A%20%22gulp%20test%22%0A%20%20%7D%2C%0A%20%20%22dependencies%22%3A%20%7B%0A%20%20%20%20%22%40microsoft%2Fsp-core-library%22%3A%20%22~1.2.0%22%2C%0A%20%20%20%20%22%40microsoft%2Fsp-webpart-base%22%3A%20%22%5E1.2.0%22%2C%0A%20%20%20%20%22%40types%2Freact%22%3A%20%2215.0.38%22%2C%0A%20%20%20%20%22%40types%2Freact-addons-shallow-compare%22%3A%20%220.14.17%22%2C%0A%20%20%20%20%22%40types%2Freact-addons-test-utils%22%3A%20%220.14.15%22%2C%0A%20%20%20%20%22%40types%2Freact-addons-update%22%3A%20%220.14.14%22%2C%0A%20%20%20%20%22%40types%2Freact-dom%22%3A%20%220.14.18%22%2C%0A%20%20%20%20%22%40types%2Fwebpack-env%22%3A%20%22%26gt%3B%3D1.12.1%20%26lt%3B1.14.0%22%2C%0A%20%20%20%20%22react%22%3A%20%2215.4.2%22%2C%0A%20%20%20%20%22react-dom%22%3A%20%2215.4.2%22%2C%0A%20%20%20%20%22sp-pnp-js%22%3A%20%22%5E3.0.0%22%0A%20%20%7D%2C%0A%20%20%22devDependencies%22%3A%20%7B%0A%20%20%20%20%22%40microsoft%2Fsp-build-web%22%3A%20%22~1.2.0%22%2C%0A%20%20%20%20%22%40microsoft%2Fsp-module-interfaces%22%3A%20%22~1.2.0%22%2C%0A%20%20%20%20%22%40microsoft%2Fsp-webpart-workbench%22%3A%20%22~1.2.0%22%2C%0A%20%20%20%20%22%40types%2Fchai%22%3A%20%22%26gt%3B%3D3.4.34%20%26lt%3B3.6.0%22%2C%0A%20%20%20%20%22%40types%2Fmocha%22%3A%20%22%26gt%3B%3D2.2.33%20%26lt%3B2.6.0%22%2C%0A%20%20%20%20%22gulp%22%3A%20%22~3.9.1%22%2C%0A%20%20%20%20%22gulp-clean%22%3A%20%22%5E0.3.2%22%2C%0A%20%20%20%20%22gulp-typescript%22%3A%20%22%5E3.2.2%22%2C%0A%20%20%20%20%22gulp-util%22%3A%20%22%5E3.0.8%22%2C%0A%20%20%20%20%22through2%22%3A%20%22%5E2.0.3%22%0A%20%20%7D%0A%7D%3C%2FPRE%3E%3C%2FLINGO-BODY%3E
Deleted
Not applicable

I am trying to create a reusable library within a SPFx project and I used the gulp tasks created by Waldek here:

https://github.com/waldekmastykarz/spfx-sample-dllcode/blob/b3fe3e208d7271f5f52b64cd66522207ccb4ee1c...

 

1.png

 

However I get the following errors which I know exactly what it means, but during coding time, I Dont see they get any warnings

 

 

 

C:/Users/valencil/Repos/TypescriptDesignPatternsInSPFx/node_modules/@types/requirejs/index.d.ts(416,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'requir
e' must be of type 'NodeRequire', but here has type 'Require'.
src\libraries\spdataaccess\dataproviders\IDataProvider.ts(1,33): error TS2307: Cannot find module '@microsoft/sp-webpart-base'.
src\libraries\spdataaccess\dataproviders\sharepointDataProvider.ts(5,8): error TS2307: Cannot find module '@microsoft/sp-http'.
src\libraries\spdataaccess\dataproviders\sharepointDataProvider.ts(6,33): error TS2307: Cannot find module '@microsoft/sp-webpart-base'.
src\libraries\spdataaccess\dataproviders\sharepointDataProvider.ts(20,16): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
src\libraries\spdataaccess\dataproviders\sharepointDataProvider.ts(25,16): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
src\libraries\spdataaccess\dataproviders\sharepointDataProvider.ts(29,16): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
src\libraries\spdataaccess\dataproviders\sharepointDataProvider.ts(34,16): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

 

Any idea?

2 Replies

btw., my package.json 

 

{
  "name": "typescript-design-patterns-in-sp-fx",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.2.0",
    "@microsoft/sp-webpart-base": "^1.2.0",
    "@types/react": "15.0.38",
    "@types/react-addons-shallow-compare": "0.14.17",
    "@types/react-addons-test-utils": "0.14.15",
    "@types/react-addons-update": "0.14.14",
    "@types/react-dom": "0.14.18",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "sp-pnp-js": "^3.0.0"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.2.0",
    "@microsoft/sp-module-interfaces": "~1.2.0",
    "@microsoft/sp-webpart-workbench": "~1.2.0",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "gulp": "~3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-typescript": "^3.2.2",
    "gulp-util": "^3.0.8",
    "through2": "^2.0.3"
  }
}
best response
Solution

The base project you're using, has been created using a prerelease version (v0.2.0) of the SharePoint Framework. In your case, you're using v1.2.0 of the SharePoint Framework, which is why your seeing various errors.

 

What you could try, is to carefully port the different pieces and see how the different types change over time.

 

What's even more important though, is that at this time, deploying SharePoint Framework libraries to the App Catalog is not supported and you will get an error if you try to do it. Because of it, I'd recommend you build a regular NPM package for the time being, and if still necessary, convert it to a SharePoint Framework library once it's supported.