Unexpected webpack error deploying Forge app

Forge
, ,
1

I added some svg assets to npm package that is used by 3 of my apps.
2 (Compass and Confluence) deploy without any issue, but 1 (Jira) is blocked by this error:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
| <svg
|    xmlns:dc="http://purl.org/dc/elements/1.1/", Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
| <!-- Created with Inkscape (https://www.inkscape.org/) -->
|

However I don’t use webpack in the project, next to the package.json I only have this tsconfig.json

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "Node",
    "target": "ES2022",
    "jsx": "react",
    "checkJs": true,
    "allowJs": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "sourceMap": true
  },
  "exclude": ["node_modules", "**/node_modules/*", "docs"]
}

Which is identical to the tsconfig.json of the 2 working apps.
Even the package.json is just about identical with these dependencies and overides:

  "dependencies": {
    "@atlassian/forge-graphql": "14.0.3",
    "@forge/api": "5.1.1",
    "@forge/bridge": "4.5.0",
    "@forge/react": "^11.2.2",
    "@forge/resolver": "1.6.9",
    "@marvelution/jenkins-integration-kit": "^1.67.717",
    "react": "^18.3.1",
    "react-router": "^7.6.2"
  },
  "overrides": {
    "pdfjs-dist": "4.2.67",
    "@sentry/browser": "7.119.1"
  }

Is there an expect around that can help me debug this behaviour?

2

Maybe it’s related to not having

"type": "module"

in package.json , see Modules: Packages | Node.js v24.1.0 Documentation

3

Thanks for the tip @marc but it didn’t fix this blocker.
Here is the full package and tsconfig jsons of the module and the app, maybe that will help:

Module package.json

  "name": "@marvelution/jenkins-integration-kit",
  "version": "1.67.4",
  "description": "Jenkins Integration Kit",
  "author": "Marvelution",
  "license": "Apache-2.0",
  "type": "module",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist/",
    "src/",
    "assets/"
  ],
  "scripts": {
    "prepublishOnly": "tsc",
    "prepare": "npm run co:login",
    "co:login": "aws codeartifact login --tool npm --repository npmjs --domain $DOMAIN_NAME --domain-owner $DOMAIN_OWNER"
  },
  "devDependencies": {
    "typescript": "^5.7.2"
  }
}

Module tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "Node",
    "target": "ES2022",
    "outDir": "dist",
    "declaration": true
  },
  "include": ["src", "custom.d.ts"],
}

custom.d.ts:

declare module "*.svg" {
    const content: string;
    export default content;
}

App package.json

{
  "name": "jenkins-for-jira",
  "version": "1.0.0",
  "main": "index.js",
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "prepare": "npm run co:login",
    "co:login": "aws codeartifact login --tool npm --repository npmjs --domain $DOMAIN_NAME --domain-owner $DOMAIN_OWNER"
  },
  "dependencies": {
    "@atlassian/forge-graphql": "14.0.3",
    "@forge/api": "5.1.1",
    "@forge/bridge": "4.5.0",
    "@forge/react": "^11.2.2",
    "@forge/resolver": "1.6.9",
    "@marvelution/jenkins-integration-kit": "^1.67.4",
    "react": "^18.3.1",
    "react-router": "^7.6.2"
  },
  "overrides": {
    "pdfjs-dist": "4.2.67",
    "@sentry/browser": "7.119.1"
  }
}

App tsconfig.json

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "Node",
    "target": "ES2022",
    "jsx": "react",
    "checkJs": true,
    "allowJs": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "sourceMap": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

I also tried adding "type": "module", to the app package.json but this renders the same error.

The funny think is that apart from the react-router dependency, the other app package.json files are identical, those apps deploy without any issue, but this Jira app for some reason fails.

4

Ok I got one tiny step forward.

I can bundle the svg files in the Module, but I cannot reverence any of the svg files in *.ts code.
As soon as I add a function like this:

import {Site, SiteType} from '../model';
import Hudson from '../../assets/images/hudson.svg';
import Jenkins from '../../assets/images/jenkins.svg';

export const siteLogo = (site: Site) => {
     if (site.type === SiteType.HUDSON) {
         return Hudson;
     } else {
         return Jenkins;
     }
}

Then I get the webpack error.

But if I mode this function to the app code base and also copy the custom.d.ts then I can reference the svg files using the path in node_modules like this: import jenkinsLogo from '../../../../../node_modules/@marvelution/jenkins-integration-kit/assets/images/jenkins.svg';

Is there a way I can include the svg files in the common module and use code from that common module to get the correct source for the <Image> tag?

5

From my understanding so far it seems to be a webpack related ‘issue’.

Is there a Forge/NPM/Webpack export around that can help me make this work?

My requirement is to have a common npm package that includes svg assets, and have functions to select the correct svg to show as well as provide easy way to import an image (not needing the full **/node_modules/** path)

@mpaisley do you know?

6

No clue what I did, but after adding another package now it is working, go figure…