Copying a common widget to be customized

[LietuvosKariuomenė]

Hello, I am trying to copy the common print widget and want to customize it a little. I found it in the client/dist/widgets/common folder, copied the src folder and manifest.json, icon.svg, config.json  to client/your-extensions/widgets/CustomPrintWidget folder and changed the manifest file to match the folder name.

Now I am getting an error when trying to build the widget:
ERROR in ./your-extensions/widgets/CustomPrintWidget/src/setting/component/report-template-setting.tsx 14:0-69 Module not found: Error: Can't resolve 'jimu-ui/advanced/app-item-selector' in 'D:\Users\pratybos\Desktop\ArcGIS Experience Builder Dev\ArcGISExperienceBuilder\client\your-extensions\widgets\CustomPrintWidget\src\setting\component' resolve 'jimu-ui/advanced/app-item-selector' in 'D:\Users\pratybos\Desktop\ArcGIS Experience Builder Dev\ArcGISExperienceBuilder\client\your-extensions\widgets\CustomPrintWidget\src\setting\component'

To my understanding this error is shown because the widget doesn't know where some modules are. How do I config it so it finds the necessary modules? Editing dependencies in manifest doesn't seem to work. Do I need to use the loadArcGISAPIModules function? Or is there some better way to point where the module is stored?

Thanks in advance, all help is appreciated.

[BolanChen]

The 'jimu-ui/advanced/app-item-selector' component has been moved from jimu-ui to the Print widget. I guess you copied the Print widget from the old version of dev.

[LietuvosKariuomenė]

It might be that my Experience builder version is older, but I copied it into the same developer installation, just into 'your-extensions' folder. Should it not at least work with my current installation or am I missing something?

[abureaux]

If you want to create a copy of one of the stock widgets, that's easy enough. But you need to do two things:

1. Change the name of that widget (in manifest.json). If more than one widget has the same name, it will break things.
2. Using the Command Prompt, run npm start form Experience Builder's client folder.

[LietuvosKariuomenė]

I have changed the name of the widget and I have run the npm start command in the client folder, that is exactly where I get this error that the widget can't be built because it can't find some modules, that the original widget has no issue finding.

[abureaux · Accepted solution]

There may be something wrong with your workflow or with your install. Compare what you are doing with the example below. If the processes match, maybe try reinstalling EB.

I just confirmed this workflow works:

1. Go to widgets folder (i.e., \ArcGISExperienceBuilder\client\dist\widgets\common)
2. Copy a widget (e.g., Print)
3. Paste copied widget into your custom widget folder (i.e., \ArcGISExperienceBuilder\client\your-extensions\widgets)
4. Open the folder, locate manifest.json and open it, and change the "name" value to something unique (e.g., I used "print2")
   
5. Update folder name to match the name in manifest.json (e.g., "print2" in my case)
   
6. Open command prompt as an admin
7. cd into your client directory (e.g., cd C:\Users\%username%\Desktop\ArcGISExperienceBuilder\client)
8. Execute npm start
9. Open EB and load a new or saved project. You should see the copied widget under "Custom"
   

[LietuvosKariuomenė]

Seems like the issue was with my version EB, thanks for the help.