gulp bundle/serve webpack error when external resources are present in config.json externals

[joepenland]

Category

• Bug

Describe the bug

I am getting the following error when running gulp serve or gulp bundle commands when there is a jQuery reference in the externals section of the config.json file.

Error - [webpack] 'dist':
Did not find linked external "jquery" for bundle "test-web-part".

Steps to reproduce

Create a new web part.

1. yo @microsoft/sharepoint
2. Solution name
3. SharePoint Online only (latest)
4. Use the current folder
5. No
6. No
7. WebPart
8. Web part name
9. Web part description
10. No JavaScript framework

Install jQuery and types.

I followed the instructions at Add jQueryUI Accordion to your SharePoint client-side web part, but only installed jQuery and not jQuery UI. I have followed this process before and never had an issue.

• npm install jquery
• npm install @types/jquery
  (I also tried using jquery@2 for each of those with the same result)

Add jQuery to the "externals" section of the config/config.json file.

OOTB externals:

  "externals": {},

Updated externals:

  "externals": {
    "jquery": "node_modules/jquery/dist/jquery.min.js"
  },

Use jQuery in the project.

TestWebPart.ts:

import * as jQuery from 'jquery';
...
export default class TestWebPart extends BaseClientSideWebPart<ITestWebPartProps> {

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.test }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;

    const newElement = jQuery('<div />');
  }
...

Run gulp serve or gulp bundle (with or without --ship).

Here is the output, including the error:

PS C:\Local Development\test> gulp bundle
Build target: DEBUG
[14:54:37] Using gulpfile C:\Local Development\test\gulpfile.js
[14:54:37] Starting 'bundle'...
[14:54:37] Starting gulp
[14:54:37] Starting subtask 'configure-sp-build-rig'...
[14:54:37] Finished subtask 'configure-sp-build-rig' after 3.47 ms
[14:54:37] Starting subtask 'pre-copy'...
[14:54:37] Finished subtask 'pre-copy' after 50 ms
[14:54:37] Starting subtask 'sass'...
[14:54:37] Finished subtask 'copy-static-assets' after 29 ms
[14:54:37] Finished subtask 'sass' after 136 ms
[14:54:37] Starting subtask 'tslint'...
[14:54:38] [tslint] tslint version: 5.12.1
[14:54:38] Starting subtask 'tsc'...
[14:54:38] [tsc] typescript version: 3.7.7
[14:54:40] Finished subtask 'tsc' after 2.67 s
[14:54:41] Finished subtask 'tslint' after 3.69 s
[14:54:41] Starting subtask 'post-copy'...
[14:54:41] Finished subtask 'post-copy' after 220 μs
[14:54:41] Starting subtask 'configure-webpack'...
[14:54:41] Starting subtask 'webpack'...
[14:54:42] Error - [webpack] 'dist':
Did not find linked external "jquery" for bundle "test-web-part".

[14:54:42] Finished subtask 'webpack' after 893 ms
[14:54:42] Finished 'bundle' after 5.19 s
[14:54:43] ==================[ Finished ]==================
Error - [webpack] 'dist':
Did not find linked external "jquery" for bundle "test-web-part".

[14:54:43] Project test version:0.0.1
[14:54:43] Build tools version:3.17.11
[14:54:43] Node version:v10.23.3
[14:54:43] Total duration:8.47 s
[14:54:43] Task errors:1

Expected behavior

gulp serve, gulp bundle, or gulp bundle --ship should complete without issue.

Environment details (development & target environment)

• Your Developer Environment: Windows 10
• Target Environment: SharePoint Online
• Framework: Node.js v10.23.3; Gulp CLI version: 2.3.0, Local version: 4.0.2; Yeoman
• Browser(s): Not relevant. Chrome, Edge, Brave, Firefox.
• Tooling: VS Code | SPFx v1.12.0
• Additional details: The issue happens before getting to the browser. It happens in CLI.

Additional context

If I remove the jQuery reference from the "externals" section of the config/config.json file the commands run successfully (gulp serve, gulp bundle).

Thanks for your contribution! Sharing is caring.

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[patrikhellgren]

I am seeing the exact same thing after upgrading from 1.10 to 1.12, but with SignalR and jQuery.

The error from gulp bundle --ship is:
Error - [webpack] 'dist':
Did not find linked external "signalr" for bundle ""

This is the externals section in my config.json:

"externals": {
"jquery": {
"path": "https://code.jquery.com/jquery-2.2.4.min.js",
"globalName": "$"
},
"signalr": {
"path": "https://cdnjs.cloudflare.com/ajax/libs/signalr.js/2.4.1/jquery.signalR.min.js",
"globalName": "signalr",
"globalDependencies": ["jquery"]
}
}

[meany]

Same issue here. Downgraded @microsoft/generator-sharepoint@1.11.0 and node v10.24.0 so I can use externals.

[joepenland]

While double-checking myself I saw here Set up your SharePoint Framework development environment that Node.js v12 is now recommended so I upgraded to v12 and made sure everything else was updated as well. The issue is still present though.

[KevinTCoughlin]

The issue here is unrelated to Node version. We are investigating and will report back. Thanks.