Search code examples
javascriptsharepointspfx

Loading non-modular code in a SPFX webpart

I have a client with several large cewp single page apps. Problem is the scripts are 99% non-modular. I have tried making a hello world that emulates what I hope to get going. I am not a typescript dev.

I Basically followed the bouncing ball at https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part and the vanilla part works fine.

Added a few externals appVersion.js, jQuery, and foo.js.

The error is:

Dependency "jquery" of external "foo" is not defined. It must be defined as an external and it must not be a SPFx component.

I thought it was added as an external but the "and it must not be a SPFx component" gives me pause. I am missing something.

I created a repo for the issue: https://github.com/cyberjetx/spfx

Apologies for the ensuing walls of code but I was sure someone would ask.

config.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "hola-human-web-part": {
      "components": [
        {
          "entrypoint": "./lib/webparts/holaHuman/HolaHumanWebPart.js",
          "manifest": "./src/webparts/holaHuman/HolaHumanWebPart.manifest.json"
        }
      ]
    }
  },
  "externals": {
    "AppVersion": {
      "path": "./lib/webparts/holaHuman/js/AppVersion.js",
      "globalName": "AppVersion"
    },
    "jQuery": {
      "path": "./lib/webparts/holaHuman/js/jquery-3.6.1.min.js",
      "globalName": "jQuery"
    },
    "foo": {
      "globalDependencies": [
        "jquery",
        "AppVersion"
      ],
      "globalName": "foo",
      "path": "./lib/webparts/holaHuman/js/foo.js"
    }
  },
  "localizedResources": {
    "HolaHumanWebPartStrings": "lib/webparts/holaHuman/loc/{locale}.js"
  }
}

project structure

enter image description here

versions

[email protected]
Gulp@CLI version: 2.3.0
Local version: 4.0.2
local modules
[email protected] C:\code\speffx
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
+-- @rushstack/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

global modules
C:\Users\537303\AppData\Roaming\npm
+-- @microsoft/[email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

HolaHumanWebPart.ts

import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import styles from './HolaHumanWebPart.module.scss';

export interface IHolaHumanWebPartProps {
}

require('foo');

export default class HolaHumanWebPart extends BaseClientSideWebPart<IHolaHumanWebPartProps> {
  public render(): void {
      this.domElement.innerHTML = `<div class="foose ${styles.holaHuman}">Hola Mundo.</div>`; 
  }

  protected onInit(): Promise<void> {
    return super.onInit();
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
}

AppVersion.js

// Created a seperate file to avoid the reload question every save in VS 
//   due to the pipeline version that happens on save

var appVersion = '1.236.24847'; /* Automated version Update - 8/24/2022 11:54:07 AM (ZULU -05:00) */
var appReleased = '8/24/2022 11:54:07 AM (ZULU -05:00)'
var appReleasedBy = 'Joe Johnston'
console.log("Application Version: ", appVersion);

HolaHumanWebPart.manifest.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "speffx-client-side-solution",
    "id": "5cdf1c24-c687-4ccc-a982-643088072be6",
    "version": "1.0.1",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,
    "isDomainIsolated": false,
    "developer": {
      "name": "",
      "websiteUrl": "",
      "privacyUrl": "",
      "termsOfUseUrl": "",
      "mpnId": "Undefined-1.15.0"
    },
    "metadata": {
      "shortDescription": {
        "default": "speffx description"
      },
      "longDescription": {
        "default": "speffx description"
      },
      "screenshotPaths": [],
      "videoUrl": "",
      "categories": []
    },
    "features": [
      {
        "title": "speffx Feature",
        "description": "The feature that activates elements of the speffx solution.",
        "id": "44f274ff-236e-4592-acc7-d3a6da4aafbe",
        "version": "1.0.0.0"
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/speffx.sppkg"
  }
}

foo.js

//console/logs just to prove loads 
console.log('foo start...');
require('jquery');
require('AppVersion');

window.addEventListener('load', function () {

    console.log('foo loading');

    var elem = document.querySelector('.foose');
    var html = elem.innerHTML;
    elem.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like &nbsp;<a href="#">this link</a>.';

    try {
        console.log('appVersion: ', appVersion); //Prove appversion.js has been pulled in. 
    } catch (e) {
        console.log('No appVersion...');
    }

    try {
        $(".foose").innerHTML('jQuery powers activated!');

    } catch (e) {
        elem.innerHTML = elem.innerHTML + 'No jQuery yet... :( ';
    }
    console.log('foo loaded');

})

console.log('foo end...');

Package-solution.json

{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
  "name": "speffx-client-side-solution",
  "id": "5cdf1c24-c687-4ccc-a982-643088072be6",
  "version": "1.0.1",
  "includeClientSideAssets": true,
  "skipFeatureDeployment": true,
  "isDomainIsolated": false,
  "developer": {
    "name": "",
    "websiteUrl": "",
    "privacyUrl": "",
    "termsOfUseUrl": "",
    "mpnId": "Undefined-1.15.0"
  },
  "metadata": {
    "shortDescription": {
      "default": "speffx description"
    },
    "longDescription": {
      "default": "speffx description"
    },
    "screenshotPaths": [],
    "videoUrl": "",
    "categories": []
  },
  "features": [
    {
      "title": "speffx Feature",
      "description": "The feature that activates elements of the speffx solution.",
      "id": "44f274ff-236e-4592-acc7-d3a6da4aafbe",
      "version": "1.0.0.0"
    }
  ]
},
"paths": {
  "zippedPackage": "solution/speffx.sppkg"
}

}

Solution

  • You seem to have an uppercase/lowercase problem: use "jQuery" instead of "jquery" in the dependences, it is case sensitive:

        "foo": {
      "globalDependencies": [
        "jQuery",
        "AppVersion"
      ],