[designer] xmark.svg is not found

[becory]

I want to add some features for my custom adaptive card designer.
It always shows errors when I try to build or watch adaptive card designer apps.

What can I do?
It doesn't have any documents to help me debug :(

using description file: /Users//Downloads/AdaptiveCards-main/source/nodejs/adaptivecards-designer-app/node_modules/adaptivecards-designer/package.json (relative path: ./lib)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users//Downloads/AdaptiveCards-main/source/nodejs/adaptivecards-designer-app/node_modules/adaptivecards-designer/package.json (relative path: ./assets/xmark.svg)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users//Downloads/AdaptiveCards-main/source/nodejs/adaptivecards-designer-app/node_modules/adaptivecards-designer/assets/xmark.svg doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users//Downloads/AdaptiveCards-main/source/nodejs/adaptivecards-designer-app/node_modules/adaptivecards-designer/assets/xmark.svg.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users//Downloads/AdaptiveCards-main/source/nodejs/adaptivecards-designer-app/node_modules/adaptivecards-designer/assets/xmark.svg.tsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users//Downloads/AdaptiveCards-main/source/nodejs/adaptivecards-designer-app/node_modules/adaptivecards-designer/assets/xmark.svg.js doesn't exist
as directory
/Users/***/Downloads/AdaptiveCards-main/source/nodejs/adaptivecards-designer-app/node_modules/adaptivecards-designer/assets/xmark.svg doesn't exist
@ ./node_modules/adaptivecards-designer/lib/adaptivecards-designer-standalone.js 24:13-40
@ ./node_modules/adaptivecards-designer/lib/adaptivecards-designer.js 17:13-59
@ ./src/app.ts 7:17-50

[anna-dingler]

Hi @becory. Sorry you're having this issue!

What version of the designer are you using? Also do you have access to the other assets (diagonal_line_pattern_black_8x8 and diagonal_line_pattern_white_8x8)?

[becory]

Hi @anna-dingler .
I am try to install adaptive-card-designer from npm, follow those description:
https://github.com/microsoft/AdaptiveCards/tree/main/source/nodejs/adaptivecards-designer#option-2-node--webpack

It's not working.

[becory]

I think the npm last version is 2.4.1.
How can I inject or provide the assets for designer?
Where is those svg can I download them?

Thanks!

[becory]

Hi @anna-dingler,
I have 3 ways to try install designer.

1. npm install adaptive-card-designer
   It's reply on the first floor.

Hi @anna-dingler . I am try to install adaptive-card-designer from npm, follow those description: https://github.com/microsoft/AdaptiveCards/tree/main/source/nodejs/adaptivecards-designer#option-2-node--webpack

It's not working.

2. direct to start adaptivecards-designer-app
   On the other hand I also clone this whole project, and directly to serve the adaptivecards-designer-app in nodejs.
   It's have same issue.

3. start whole project in lerna
   I find the nodejs directory have README when I got error from after try 2rd way.
   I follow the README and install lerna.
   It's work now!!!!!!!!!

---

But I only want to custom less feature in designer 😢.
I think the 1st way is best for me.

[becory]

Hi, @anna-dingler

I try to install adaptive card designer in different version from npm.
I found this issue was start from 2.4.0.

Here is my check list:

• 2.4.1
• 2.4.0 webpack compiled with 1 error. start lost the file ../assets/xmark.svg
• 2.3.0 No issue found lower this version.
• 2.2.0
• 2.1.0
• 2.0.0

[anna-dingler]

Hi @becory.

I'm looking into a solution for this.

In the meantime, the asset you need can be found here: https://github.com/microsoft/AdaptiveCards/blob/main/source/nodejs/adaptivecards-designer/assets/xmark.svg

[becory]

Hi, @anna-dingler,
Do I need to create an issue from this discussion?

[becory]

Hi, @anna-dingler,
I provide the xmark.svg in app/assets, but It seems doesn't work.
I will downgrade to 2.3.0 to prevent this issue.

If have any solution that can prevent this issue, please let me know.
Thank you.

[becory]

Hi, @anna-dingler
I created an issue #8048.
Thank you so mush.

[anna-dingler]

Thank you for creating an issue @becory. I'll let you know when this is resolved :)

[nbelyh]

@becory @anna-dingler
The "assets" folder does not seem to be a part of the NPM package (adaptivecards-designer) at all?

I would suggest to get rid of the svg-url-loader added in 2.4.0 maybe, what's the point? It's a whole library brought into the project for loading a single svg image (the cross from font awesome!) using webpack. Nah, seriously? First, it is not really required; webpack can load svg image urls just fine. Second, having a separate svg image in a separate folder looks like a pain. Then the "assets" folder is not even part of the npm package, unless I'm mistaking (i.e. adaptivecards-designer)!

Also, why not to use inline image??

[becory]

Hi, @anna-dingler, I think this error is resolved.
I can build my custom designer for 2.4.3.
Thank you so much.