1

So i tried installing a webpart from scratch & added React as a framework. All good, but the version of @microsoft dependencies is 1.5.1 AND the latest is actually 1.6.0.

I've tried updating them through package.json so it looks like this now ( i ONLY updated the @microsoft stuff since updating other things might break everything) ->

  "dependencies": {
    "@microsoft/sp-core-library": "1.6.0",
    "@microsoft/sp-lodash-subset": "1.6.0",
    "@microsoft/sp-office-ui-fabric-core": "1.6.0",
    "@microsoft/sp-webpart-base": "1.6.0",
    "@types/es6-promise": "0.0.33",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@types/webpack-env": "1.13.1",
    "react": "15.6.2",
    "react-dom": "15.6.2",
    "react-iframe": "^1.2.0"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.6.0",
    "@microsoft/sp-module-interfaces": "1.6.0",
    "@microsoft/sp-webpart-workbench": "1.6.0",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "html-loader": "^0.5.5"
  }

I ran NPM INSTALL & then i started testing. I tried running gulp clean, gulp serve, gulp build, nothing works anymore...Is there something that i should've updated and i didnt? (npm outdated shows no @microsoft package, not anymore, so the update worked well).

This is the error if it helps ->

E:\DevEnv\WebParts\react-full-iframe>gulp serve
Build target: DEBUG
E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\node-core-library\lib\JsonSchema.js:178
            throw new Error(prefix + os.EOL +
            ^

Error: JSON validation failed:
E:\DevEnv\WebParts\react-full-iframe\config\tslint.json

Error: #/ (Defines configuration options for the...)
       Additional properties not allowed: lintConfig,useDefaultConfigAsBase,removeExistingRules,displayAsWarning
    at validateObjectWithCallback (E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\node-core-library\lib\JsonSchema.js:178:19)
    at JsonSchema.validateObjectWithCallback (E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\node-core-library\lib\JsonSchema.js:193:13)
    at JsonSchema.validateObject (E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\node-core-library\lib\JsonSchema.js:175:14)
    at TslintCmdTask._readConfigFile (E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\gulp-core-build\lib\tasks\GulpTask.js:308:28)
    at TslintCmdTask.onRegister (E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\gulp-core-build\lib\tasks\GulpTask.js:87:32)
    at Object.initialize (E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\gulp-core-build\lib\index.js:299:24)
    at SPWebBuildRig.initialize (E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\sp-build-common\lib\BuildRig.js:61:19)
    at SPWebBuildRig.initialize (E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\sp-build-common\lib\SPBuildRig.js:22:15)
    at SPWebBuildRig.initialize (E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\sp-build-web\lib\SPWebBuildRig.js:15:15)
    at Object.exports.initialize (E:\DevEnv\WebParts\react-full-iframe\node_modules\@microsoft\sp-build-web\lib\index.js:23:17)
    at Object.<anonymous> (E:\DevEnv\WebParts\react-full-iframe\gulpfile.js:7:7)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

And since i am asking this...is there any way to use the latest react with SPFX ? Last time i tried updating it i got the same issue (dont remember if i also updated @microsoft packages or not).

3

In 1.6.0 projects the config/tslint.json file was removed and a new one is created at the root of the solution.
Delete E:\DevEnv\WebParts\react-full-iframe\config\tslint.json. You should also add the new tslint.json at the root of your project.
To help upgrade your project and make sure you didn't forget anything, you could use the office 365 cli. the next version ( npm i -g @pnp/office365-cli@next) currently supports upgrading to 1.6.0.
documentation

  • 1
    Their documentation seems to be written by 12 Y.O. Following the CLI steps worked like a charm, many thanks! One more question, if you know. Is there support for newest react yet? I've read that upgrading react might break the local workbench, but i dont really care about that one as long as spfx still works. – Dante R. Sep 13 '18 at 8:10
  • 1
    Spfx 1.6.0 supports react 15.6.2, v16 is anticipated to come with 1.7.0. – baywet Sep 13 '18 at 11:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.