cli: provide global asset module types through separate import

packages/app/src/index.tsx

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+// eslint-disable-next-line monorepo/no-internal-import
+import '@backstage/cli/asset-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';

packages/cli/asset-types/asset-types.d.ts

@@ -14,16 +14,12 @@
  * limitations under the License.
  */
 
+/* eslint-disable import/no-extraneous-dependencies */
+
 /// <reference types="node" />
 /// <reference types="react" />
 /// <reference types="react-dom" />
 
-declare namespace NodeJS {
-  interface ProcessEnv {
-    readonly NODE_ENV: 'development' | 'production' | 'test';
-  }
-}
-
 declare module '*.bmp' {
   const src: string;
   export default src;
@@ -55,12 +51,6 @@ declare module '*.webp' {
 }
 
 declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
-  > & { title?: string }>;
-
   const src: string;
   export default src;
 }
@@ -94,7 +84,3 @@ declare module '*.module.sass' {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
-
-declare module 'rollup-plugin-image-files' {
-  export default function image(): any;
-}

packages/cli/asset-types/asset-types.js

@@ -0,0 +1,2 @@
+// NOOP, this is just here to unbreak module resolution
+// eslint-disable-next-line notice/notice

packages/cli/asset-types/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "asset-types.js",
+  "types": "asset-types.d.ts",
+  "description": "Provides types for asset files that are handled by the Backstage CLI"
+}

packages/cli/src/types.d.ts

@@ -14,4 +14,16 @@
  * limitations under the License.
  */
 
-declare module 'rollup-plugin-image-files';
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+  }
+}
+
+declare module 'rollup-plugin-image-files' {
+  export default function image(options?: any): any;
+}
+
+declare module '@svgr/rollup' {
+  export default function svgr(options?: any): any;
+}

packages/cli/templates/default-app/packages/app/src/index.tsx

@@ -1,3 +1,4 @@
+import '@backstage/cli/asset-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';