vue3-spfx doesn't show on SharePoint Online

LOLCATATONIA commented 2 years ago

Fresh git clone and attached vue-3-spfx.sppkg

Added the .sppkg to the app catalog, then to a test site. Only the text 'vue3-spfx' shows up.

What could be wrong?

Guess I also need to enable the Vue DevTools:


  <div class="ControlZone--control">
    <div style="" data-viewport-id="WebPart.Vue3SpfxWebPart.external.e21a7e66-4b12-4ec4-9be5-d70b46fdc4a8">
      <div data-sp-feature-tag="Vue3SpfxWebPart web part (vue3-spfx)" data-sp-feature-instance-id="e21a7e66-4b12-4ec4-9be5-d70b46fdc4a8" data-sp-web-part-id="91982f5b-c237-4638-8278-f095dcef0587" class="ms-SPLegacyFabricBlock">
        <div id="UNIQUECLIENTAPP-e21a7e66-4b12-4ec4-9be5-d70b46fdc4a8" data-description="vue3-spfx" data-v-app="">
          <h2></h2>
          <div>vue3-spfx</div>
          <ul></ul>
        </div>
      </div>
    </div>
  </div>
</div>

BenRunInBay commented 2 years ago

First, replace UNIQUECLIENTAPP with the name for your app, rather than appending it. Check what you have in webpart/config/package-solution.json. In there you should have the solution.name set to your webpart's package name. For example: "name": "my-webpart-client-side-solution". Check paths.zippedPackage too.

Then, check the "alias" value in webpart/src/webparts/[yourwebpart]/[yourwebpart].manifest.json

LOLCATATONIA commented 1 year ago

I am starting over with the newly updated code.

./make Webpart build, bundle and ship:

REMINDER: update version in package.json before running this script because that will become the version of the webpart package.

Building webpart...

build vite build

vite v3.1.0 building for production... ✓ 39 modules transformed. webpart/src/webparts/assets/index.html 0.89 KiB webpart/src/webparts/assets/appcode/...all.37037292.js 0.17 KiB / gzip: 0.16 KiB webpart/src/webparts/assets/appcode/name.0a7fc5fd.js 0.49 KiB / gzip: 0.34 KiB webpart/src/webparts/assets/appcode/index.edef0e62.css 11.40 KiB / gzip: 3.51 KiB webpart/src/webparts/assets/appcode/index.c3d75bab.js 86.38 KiB / gzip: 34.02 KiB Bundling assets...

Packaging for shipping to SharePoint...

Build target: DEBUG [17:46:50] Using gulpfile ~the path webpart\gulpfile.js [17:46:50] Starting 'clean'... [17:46:50] Starting gulp [17:46:50] Starting subtask 'clean'... [17:46:50] Finished subtask 'clean' after 25 ms [17:46:50] Finished 'clean' after 34 ms [17:46:50] ==================[ Finished ]================== [17:46:51] Project ois-services version:0.0.1 [17:46:51] Build tools version:3.17.19 [17:46:51] Node version:v16.14.0 [17:46:51] Total duration:52 s Build target: SHIP [17:46:59] Using gulpfile ~the path webpart\gulpfile.js [17:46:59] Starting 'bundle'... [17:46:59] Starting gulp [17:46:59] Starting subtask 'pre-copy'... [17:47:01] Finished subtask 'pre-copy' after 1.51 s [17:47:01] Starting subtask 'copy-static-assets'... [17:47:01] Starting subtask 'sass'... [17:47:01] Error - sass - src\webparts\oisServices\OisServicesWebPart.module.scss(8,9): error Error: Can't find stylesheet to import. ╷ 8 │ @import '~office-ui-fabric-core/dist/sass/variables/Font.Variables'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\@microsoft\sp-office-ui-fabric-core\dist\sass_SPFabricCore.scss 8:9 @import src\webparts\oisServices\OisServicesWebPart.module.scss 1:9 root stylesheet [17:47:01] Error - 'sass' sub task errored after 475 ms Can't find stylesheet to import. ╷ 8 │ @import '~office-ui-fabric-core/dist/sass/variables/Font.Variables'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\@microsoft\sp-office-ui-fabric-core\dist\sass_SPFabricCore.scss 8:9 @import src\webparts\oisServices\OisServicesWebPart.module.scss 1:9 root stylesheet [17:47:01] 'bundle' errored after 2.03 s [17:47:01] About to exit with code: 1 Process terminated before summary could be written, possible error in async code not continuing! Trying to exit with exit code 1 Build target: SHIP [17:47:09] Using gulpfile ~the path webpart\gulpfile.js [17:47:09] Starting 'package-solution'... [17:47:09] Starting gulp [17:47:09] Starting subtask 'package-solution'... [17:47:09] Error - [package-solution] No manifests were found in 'the path webpart\release/manifests'. Ensure a build has completed successfully [17:47:09] Finished subtask 'package-solution' after 58 ms [17:47:09] Finished 'package-solution' after 69 ms [17:47:10] ==================[ Finished ]================== Error - [package-solution] No manifests were found in ' the path /webpart/release/manifests'. Ensure a build has completed successfully [17:47:10] Project ois-services version:0.0.1 [17:47:10] Build tools version:3.17.19 [17:47:10] Node version:v16.14.0 [17:47:10] Total duration:7.27 s [17:47:10] Task errors:1 The build failed because a task wrote output to stderr. Exiting with exit code: 1 DONE.

Webpart package for uploading to App Catalog is in: webpart/sharepoint/solution/

I think me wanting to use node 16 is causing problems with the webpart? I updated several of the dependencies.

package.json

{ "name": "ois-services", "version": "0.0.1", "private": true, "main": "lib/index.js", "engines": { "node": "~16" }, "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "@microsoft/sp-core-library": "~1.15.2", "@microsoft/sp-lodash-subset": "~1.15.2", "@microsoft/sp-office-ui-fabric-core": "~1.15.2", "@microsoft/sp-property-pane": "~1.15.2", "@microsoft/sp-webpart-base": "~1.15.2" }, "devDependencies": { "@microsoft/rush-stack-compiler-3.3": "^0.9.48", "@microsoft/sp-build-web": "~1.15.2", "@microsoft/sp-module-interfaces": "~1.15.2", "@microsoft/sp-tslint-rules": "~1.15.2", "@microsoft/sp-webpart-workbench": "~1.12.1", "@types/chai": "^3.5.2", "@types/es6-promise": "^0.0.33", "@types/mocha": "^2.2.48", "@types/webpack-env": "^1.18.0", "ajv": "^5.5.2", "gulp": "^4.0.2" } }

BenRunInBay / vue3-spfx

vue3-spfx doesn't show on SharePoint Online #7