How to use macro Config with UIkit2?

Forge Forge UI Kit and Custom UI
, ,
1

Hello

On my confluence app, I trying to add a macro config following https://developer.atlassian.com/platform/forge/add-configuration-to-a-macro/#ui-kit . I use UI KIT V2

1/ In my manifest I added:

      config:
        function: config-function
  function:
    - key: resolver
      handler: index.handler
    - key: config-function
      handler: index.config

2/ I created a file “config.jsx” in frontend folder

// Function that defines the configuration UI
export const Config = () => {
  return (
    <MacroConfig>
      <TextField name="name" label="Pet name" defaultValue={defaultConfig.name} />
      <TextField name="age" label="Pet age" defaultValue={defaultConfig.age} />
    </MacroConfig>
  );
};

3/ In my index.jsx in frontend folder I added :

import ForgeUI, {
  render,
  MacroConfig,
  useConfig
} from "@forge/ui";

const defaultConfig = {
  name: "Unnamed Pet",
  age: "0"
};
export const config = render(<Config />);

The problem is when I execute “forge deploy” the result is:

Running forge lint...
No issues found.

× Deploying helloWorld to development...

i Packaging app files

Error: Bundling failed: Module not found: Error: Can't resolve 'buffer' in 'C:\Users\thibault\Web project\helloWorld\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 }

Rerunning the command with --verbose may give more details.

I don’t understand

2

It’s confusing between UIKit and UIKit2.
The solution is : https://developer.atlassian.com/platform/forge/add-configuration-to-a-macro-with-ui-kit-2/

add config: true in manifest.yml

1 Like