Module build failed upgrading UI Kit

Hi,

I have recently ran through the guide to migrtte to latest UI Kit with the following references

https://developer.atlassian.com/platform/forge/runtime-reference/forge-resolver/

However when running the deploy step I am running into a new error I haven’t seen before that look related to webpack. How can I debug further to see what is causing the issue below is the full error vai verbosee command on forge deploy

Error: Bundling failed: Module not found: Error: Can't resolve 'buffer' in 'C:\Users\tom_s\Documents\repositories\pk-conf-app\node_modules\safe-buffer'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
    at NativeUIBundler.bundle (C:\Users\tom_s\AppData\Local\Volta\tools\image\packages\@forge\cli\node_modules\@forge\cli\out\deploy\packager\nativeui-bundler.js:24:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async AppPackager.package (C:\Users\tom_s\AppData\Local\Volta\tools\image\packages\@forge\cli\node_modules\@forge\cli\out\deploy\packager\packager.js:20:32)
    at async PackageUploadDeployCommand.execute (C:\Users\tom_s\AppData\Local\Volta\tools\image\packages\@forge\cli\node_modules\@forge\cli\out\deploy\package-upload-deploy.js:18:76)
    at async CommandLineUI.displayProgress (C:\Users\tom_s\AppData\Local\Volta\tools\image\packages\@forge\cli\node_modules\@forge\cli\node_modules\@forge\cli-shared\out\ui\command-line-ui.js:59:28)
    at async DeployView.reportDeploymentProgress (C:\Users\tom_s\AppData\Local\Volta\tools\image\packages\@forge\cli\node_modules\@forge\cli\out\command-line\view\deploy-view.js:80:24)
    at async DeployController.run (C:\Users\tom_s\AppData\Local\Volta\tools\image\packages\@forge\cli\node_modules\@forge\cli\out\command-line\controller\deploy-controller.js:190:27)
    at async Command.actionProcessor (C:\Users\tom_s\AppData\Local\Volta\tools\image\packages\@forge\cli\node_modules\@forge\cli\out\command-line\command.js:246:28)
    at async Command.parseAsync (C:\Users\tom_s\AppData\Local\Volta\tools\image\packages\@forge\cli\node_modules\@forge\cli\node_modules\commander\lib\command.js:936:5)
    at async Command.parse (C:\Users\tom_s\AppData\Local\Volta\tools\image\packages\@forge\cli\node_modules\@forge\cli\out\command-line\command.js:152:13)

This is my updated manifest file

modules:
  confluence:contextMenu:
    - key: my-app
      resource: main
      resolver:
        function: api-resolver
      title: Does the thing
      render: native
      description: Do the thing
      keyboardShortcut:
        accelerator: mod+u
        description: Use cmd+u on Mac and ctrl+u on Windows/Linux.
  function:
    - key: api-resolver
      handler: index.handler

resources:
    - key: main
      path: src/frontend/index.tsx

app:
  runtime:
    name: nodejs18.x
  id: xxxxxxxx

Hi @TomWaterson,

Welcome to the Atlassian Developer Community.

Your problem looks similar to How to use macro Config with UIkit2?, but you haven’t shared many details about your code so its difficult to tell.

Regards,
Dugald

1 Like

Hi Dugald

Thanks you for your response. They look similar so it is possible I have not correctly updated my manifest file, however in my case I am using the contextMenu I have updated my question with my manifest details in case I am missing something obvious.

Thank you for your help.

Hi @TomWaterson ,

Your manifest looks good. Have you upgraded @forge/react to version 10?

Regards,
Dugald

Hi Dugald,

Sorry for late response I have been busy at work and had to take a brief break on this project.

Here is my dependencies and devDependencies from package.json. Yes I am on V10 for @forge/react. My current plan is to build the project from scratch and see if I can reproduce a minimal version to assist on where it is going wrong, I appreciate your help on this matter.

"devDependencies": {
    "@types/node": "14.18.63",
    "@types/react": "^18.2.39",
    "@typescript-eslint/parser": "^5.62.0",
    "eslint": "^8.54.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^9.0.11",
    "prettier": "^3.2.5",
    "typescript": "^4.9.5"
  },
  "dependencies": {
    "@anthropic-ai/bedrock-sdk": "^0.9.6",
    "@anthropic-ai/sdk": "^0.19.0",
    "@forge/api": "^3.1.0",
    "@forge/bridge": "^3.2.0",
    "@forge/react": "^10.1.1",
    "@forge/resolver": "^1.5.33",
    "@forge/ui": "^1.10.5",
    "react": "^18.3.1"
  },

Hi @TomWaterson , did you get this resolved? I’m seeing the same thing, after deleting node_modules and package-lock.json and re-installing.
The error was repeated for several modules. Most of them have been resolved by running npm install <reported module>. Now I’m left with only timers_browserify being reported; I have installed it, but the bundling failure remains.

I’m suspicious of peer dependencies and general version mismatches. I’m wondering if pinning one of my Forge dependencies back a bit might fix this temporarily.

I’ve resolved my problem, sharing here in case it helps.
I have some model classes that render themselves to DynamicTable-compatible JSON. The UI Kit class imports these classes. They’re returned from a call to forege/bridge.
I had refactored some logic, resulting those model classes being able to build themselves from XML, which is happening in the resolver.
This resulted in a new dependency in my UI Kit component: xml2js.
This was the source of the bundling problem.

I moved the parsing code into a different file, and the dependency in the bundle went away.
The lesson is to have as few dependencies as possible in any UI-side Forge code, as bundling aggressively pulls in anything used by any code in the file, rather than just the code called from the file.

If I NPM install the buffer module I do indeed get around the build error, but it feels wrong to me honestly.

I will go that path but looking to rebuild the app peice by peice to discover the errant dependency. Thanks for the suggestions.

So, after starting a new project from scratch and iterating much slower it turns out I had not removed “@forge/ui” and replaced all my components with “@forge/react”. Error message was unfortunately steering me in the wrong direction.

Solution was to remove “@forge/ui” and use “@forge/react”.
Thanks all

2 Likes