SPFx
70 TopicsSharePoint Online not respecting target="_blank" anymore?
Hi, I have custom spfx webparts that have links in them which the users wish to be opened in a new tab when clicked. This was achieved using the typical target="blank" parameter, but just over the last week SharePoint modern pages now open these links in the same tab (previously they were opening in new tab as expected). I have tried this with a anchors, and also using the Office Fabric Link component - same result. Anyone know why, and how I can get these links to open in a new tab? Also worth noting that the links to lists and libraries off the Site Contents page still open in a new tab - can I replicate this behaviour somehow?? Thanks!Solved20KViews1like6CommentsSpFx Helloworld webpart does not show up under modern Page toolbox
Expected or Desired Behavior Upon installation of the app, i can add the webpart to the pages as well Observed Behavior After adding app ,i try to add the app to my page, the app is not showing up in the list of the available apps. Steps to reproduce Follow the steps mention in https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part and created simple helloworld web part Add the .sppkg file in appcatalog and add the app in site Expected behavior After adding app in site, I should able to add the web part on page. Environment details I have two tenants, on test tenant I don't face any issue it is working perfectly fine. But on Production tenant I am facing this issue Your Developer Environment: - Windows 10 Target Environment: SharePoint Online Framework: Node.js v10 Browser(s): Chrome v79 Tooling: VS Code Additional context I am trying to add Modern Script Editor web part from https://medium.com/niftit-sharepoint-blog/add-the-script-editor-webpart-back-to-sharepoint-modern-experience-688a7b7208e4blog but I cant add it on production as I can not see it in web part list after deployment,so I am trying to deploy the simple Helloworld WebPart but I cannot see it as well in web part list on Production Tenant. On Test tenant everything is working fine. Note : I have admin account with admin access. In Past I have deployed SPFX Extension and it worked very well Thanks for your contribution! Sharing is caring.17KViews0likes5CommentsSPFX webpart not added to site after deployment
I have developed a SPFx WebPart using react. When packaging this solution, I use the following commands: gulp clean gulp bundle --ship gulp package-solution --ship FYI, I'm using these options in my package-solution.json file: "skipFeatureDeployment": true, "includeClientSideAssets": true, "isDomainIsolated": true, It's worth noting, I've tried both with tenant deployment (skipFeatureDeployment = true/false) and without, same issue. If I don't deploy it to the tenant, adding it to the site shows success but really fails behind the scene as it's no longer "added" after a refresh. This successfully creates my .sppkg file. No errors. I then upload the package to my SharePoint sites App Catalog in SharePoint Online (365), successfully, with no errors, then choose deploy, in this case to all sites. The app in the catalog displays as enabled, valid, deployed and tenant deployed. However, the app does NOT show up in my site contents. The app does NOT show up in "My apps" for the site. The app does NOT show up in the WebPart picker of a page. If I create a simple helloworld app scaffolded from yo, it works as expected. So there is something about this app it does NOT like. Where can I track down the logs or other data that would indicate why this app is failing silently and giving me no visual indication there is a problem during deployment? It may also be worth noting that this app WAS working last week when I first deployed it. However, I deleted the app from the catalog and re-deployed several times testing different settings. Now I can't get it to show at all.Solved10KViews0likes1CommentRules in config/tslint.json file of SPFx scaffolding are being ignored.
I ran the current Yeoman SharePoint generator, and got the following ts-lint file in the config directory (with a few minor tweaks added). From what I can tell the trailing-comma rule should be disabled (it's set to false), but it's not. I'm still getting red squigglies when I don't have a trailing comma (see below). That's just one example of a number of tslint scaffolding rules that appear to be ignored. What am I missing? Thanks! :-) (I have also posted https://sharepoint.stackexchange.com/questions/235288/how-do-i-disable-trailing-comma-tslint-rule-in-spfx-scaffolding.) "$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json", // Display errors as warnings "displayAsWarning": true, // The TSLint task may have been configured with several custom lint rules // before this config file is read (for example lint rules from the tslint-microsoft-contrib // project). If true, this flag will deactivate any of these rules. "removeExistingRules": true, // When true, the TSLint task is configured with some default TSLint "rules.": "useDefaultConfigAsBase": false, // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules // which are active, other than the list of rules below. "lintConfig": { // Opt-in to Lint rules which help to eliminate bugs in JavaScript "rules": { "class-name": false, "export-name": false, "forin": false, "label-position": false, "member-access": true, "no-arg": false, "no-console": false, "no-construct": false, // "no-duplicate-switch-case": true, "no-duplicate-variable": true, "no-eval": false, "no-function-expression": true, "no-internal-module": true, "no-shadowed-variable": true, "no-switch-case-fall-through": true, "no-unnecessary-semicolons": true, "no-unused-expression": true, "no-use-before-declare": true, "no-with-statement": true, "semicolon": true, "trailing-comma": false, "typedef": false, "typedef-whitespace": false, "use-named-parameter": true, "typeof-compare": true, "variable-name": false, "whitespace": false } } }Solved6.2KViews0likes1CommentCross-domain request in SPFx
How can I make a cross-domain request in a Client Side Web Part built with the SharePoint Framework? My need is to access SharePoint 2016 data from a SharePoint 2016 site in another domain (same credentials). I found a crossDomainWeb method in the documentation for the add-in model, but nothing for SPFx.6KViews0likes2CommentsTesting an updated web part, on a live SharePoint site, without affecting the existing version
Hi Modern experience. I have an updated version of a web part that I need to test on a live SharePoint site. This needs to be done without affecting the existing version of the web part. The workbench is not suitable as I need to test it alongside existing content. I suppose that I need to make the updated web part look like a new web part for testing. Then back like the existing web part when it's ready to go live, but with an updated version number. What do I need to change to achieve this, or is there a better way? Thanks.Solved5.2KViews0likes9CommentsSPFX - jQuery causing build to fail
Hi, I have an issue building a SPFX web part which I think is probably going to be caused by myself being a complete novice rather than any kind of bug etc. When I create a new web part using the Yoeman generator and then add the references to jQuery my build fails with around 1067 task errors. The following are a selection of the errors: Error - typescript - node_modules\@types\jquery\index.d.ts(40,45): error TS1005: ',' expected. Error - typescript - node_modules\@types\jquery\index.d.ts(6139,71): error TS1109: Expression expected. Error - typescript - node_modules\@types\jquery\index.d.ts(7350,71): error TS1139: Type parameter declaration expected. Error - typescript - node_modules\@types\jquery\index.d.ts(7350,77): error TS1109: Expression expected. Error - typescript - node_modules\@types\jquery\index.d.ts(7350,85): error TS2695: Left side of comma operator is unused and has no side effects. Error - typescript - node_modules\@types\jquery\index.d.ts(7350,102): error TS2304: Cannot find name 'TCurrentTarget'. Error - typescript - node_modules\@types\jquery\index.d.ts(7350,125): error TS2339: Property 'Event' does not exist on type 'typeof JQuery'. Error - typescript - node_modules\@types\jquery\index.d.ts(7350,131): error TS2304: Cannot find name 'TCurrentTarget'. Error - typescript - node_modules\@types\jquery\index.d.ts(7350,147): error TS2304: Cannot find name 'TData'. Error - typescript - node_modules\@types\jquery\index.d.ts(7350,155): error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type. Error - typescript - node_modules\@types\jquery\index.d.ts(7502,33): error TS2314: Generic type 'Callbacks<T, Function>' requires 2 type argument(s). Error - typescript - node_modules\@types\jquery\index.d.ts(7503,36): error TS2314: Generic type 'Deferred<TR, TJ, any, TN>' requires 4 type argument(s). Error - typescript - node_modules\@types\jquery\index.d.ts(7504,41): error TS2314: Generic type 'Event<TTarget, EventTarget, TData>' requires 3 type argument(s). Error - typescript - node_modules\@types\jquery\index.d.ts(7505,36): error TS2314: Generic type 'Deferred<TR, TJ, any, TN>' requires 4 type argument(s). Error - typescript - node_modules\@types\jquery\index.d.ts(7506,37): error TS2314: Generic type 'AjaxSettings<TContext, any>' requires 2 type argument(s). Error - typescript - node_modules\@types\jquery\index.d.ts(7510,28): error TS2314: Generic type 'jqXHR<TResolve, any>' requires 2 type argument(s). Error - typescript - node_modules\@types\jquery\index.d.ts(7511,35): error TS2314: Generic type 'Promise<TR, TJ, any, TN>' requires 4 type argument(s). Error - typescript - node_modules\@types\jquery\index.d.ts(7517,32): error TS2314: Generic type 'PlainObject<T, any>' requires 2 type argument(s). Error - 'typescript' sub task errored after 4.27 s To achieve this feat, I have added the following items to my project: Run the following npm commands: NOTE: During testing I haven't always run the npm install jquery --save-dev command, mainly the @types/jquery one. npm install @types/jquery --save-dev npm install jquery --save-dev The following items were taken from Waldek Mastykarz blog, https://blog.mastykarz.nl/sharepoint-framework-client-side-web-parts-jquery-plugins-cdn/ Config.json "externals": { "jquery": { "path": "https://code.jquery.com/jquery-2.1.1.min.js", "globalName": "jQuery" } }, MyWebPartWebPart.ts import * as jQuery from 'jquery'; I don't have any code using jQuery just yet as I am still getting to know SPFX and typescript, but the steps outlined above do seem to allow me to include the import * as jQuery from 'jquery'; statement without the work jquery being underlined in red. Does anyone have any pointers or tips as to where I might be going wrong? For example, it might be correct that my web part should fail at this point? Thanks in advance :) James.Solved5.2KViews0likes2CommentsSPFX 18.2 gulp serve issues
I have recently updated a number of modern spfx webparts to spfx 18.2 and this morning when I try to debug in workbench (locally and on tenant) I am getting serve errors in relation to react and react-dom I am able to serve projects not using react successfully but when using spfx 18.2 but not react 16.8.4 - has anybody else encountered this issue. I have restored to previous code backup, as well as restoring to previous days last git commit neither had a positive effect. I get no errors in terminal but workbench shows the following message: SPLoaderError.loadComponentError]: ***Failed to load component "174429f3-8ff8-4143-8f12-7c398d264e9a" (FusionWebPartWebPart). Original error: ***Failed to load URL 'https://localhost:4321/node_modules/react/dist/react.js' for resource 'react' in component '174429f3-8ff8-4143-8f12-7c398d264e9a' (FusionWebPartWebPart). The file was not found in the server. Make sure that you are running 'gulp serve'. ***INNERERROR: ***Failed to load URL 'https://localhost:4321/node_modules/react/dist/react.js' for resource 'react' in component '174429f3-8ff8-4143-8f12-7c398d264e9a' (FusionWebPartWebPart). The file was not found in the server. Make sure that you are running 'gulp serve'. ***CALLSTACK: Error at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:8390:24) at new SPLoaderError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:4036:28) at Function.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:3789:21) at Function.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:3697:21) at https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:6275:47 Vesa Juvonen4.9KViews1like2Comments