How to import utility module in a vite project

[Khodidas-withLoveKD]

So, I have two Vite + React projects converted into microfrontends using vite-plugin-single-spa as mentioned in this article.

TLDR;

I tried creating utility module using both:

1. create-single-spa cli as mentioned in this video

2. A normal Vite + React app and tried adding single-spa-react (not much idea on how to do this)

First option gave me this error

[vite] Pre-transform error: Failed to resolve import "@kd/utility" from "src/App.tsx". Does the file exist?
12:03:26 PM [vite] Internal server error: Failed to resolve import "@kd/utility" from "src/App.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/khodidaschauhan/Desktop/Micro-frontend Try/sinlge-spa-react-vite/vite-react-ts-root-config/src/App.tsx:5:27
  20 |  import viteLogo from "/vite.svg";
  21 |  import "./App.css";
  22 |  import { nameLogger } from "@kd/utility";

When I try to add the same utility module into projects created using create-single-spa it works perfectly fine (Article I followed)

Can you guide us how can we achieve utility modules functionality with vite-plugin-single-spa ?

---

Longer Version

So, my root project's files looks like this

vite.config.ts

import { defineConfig } from 'vite'
import vitePluginSingleSpa from 'vite-plugin-single-spa'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		react(),
		vitePluginSingleSpa({
			type: 'root',
			imo: '3.1.1',
			importMaps: {
				dev: ['src/importMap.dev.json', 'src/importMap.shared.json'],
			},
		}),
	],
	build: {
		rollupOptions: {
			output: {
				format: 'system', // Ensure the output is in SystemJS format
			},
		},
		minify: false, // Optional: to simplify debugging during development
		sourcemap: true, // Optional: to simplify debugging during development
	},
	server: {
		port: 3000, // Ensure the port matches what you use in your single-spa root config
		open: true,
	},
})

importMap.dev.json

{
	"imports": {
		"mifeA": "http://localhost:3001/src/spa.tsx"
	}
}

importMap.shared.json

{
	"imports": {
		"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
		"react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.development.js",
		"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.development.js",
		"@kd/utility": "http://localhost:3002/src/utilityEntry.ts"
	}
}

Entry point file

main.tsx

import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { registerApplication, start } from 'single-spa'
import * as isActive from './active.ts'

const mifeA = 'mifeA'

registerApplication(
	'mifeA',
	() => import(/* @vite-ignore */ mifeA),
	isActive.nav
)

start()

ReactDOM.createRoot(document.getElementById('root')!).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
)

App.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { nameLogger } from '@kd/utility'

function App() {
	const [count, setCount] = useState(0)
	console.log('kd nameLogger:', nameLogger('name'))
	return (
		<>
			<div>
				<a href="https://vitejs.dev" target="_blank">
					<img src={viteLogo} className="logo" alt="Vite logo" />
				</a>
				<a href="https://react.dev" target="_blank">
					<img src={reactLogo} className="logo react" alt="React logo" />
				</a>
			</div>
			<h1>Vite + React</h1>
			<div className="card">
				<button onClick={() => setCount((count) => count + 1)}>
					count is {count}
				</button>
				<p>
					Edit <code>src/App.tsx</code> and save to test HMR
				</p>
			</div>
			<p className="read-the-docs">
				Click on the Vite and React logos to learn more
			</p>
		</>
	)
}

export default App

declarations.d.ts

declare module '@kd/utility' {
	export function nameLogger(name: string)
}

I get this error,

[vite] Pre-transform error: Failed to resolve import "@kd/utility" from "src/App.tsx". Does the file exist?
12:03:26 PM [vite] Internal server error: Failed to resolve import "@kd/utility" from "src/App.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/khodidaschauhan/Desktop/Micro-frontend Try/sinlge-spa-react-vite/vite-react-ts-root-config/src/App.tsx:5:27
  20 |  import viteLogo from "/vite.svg";
  21 |  import "./App.css";
  22 |  import { nameLogger } from "@kd/utility";

@kd/utitliy files
kd-utility.tsx

// Anything exported from this file is importable by other in-browser modules.
export function nameLogger(name: string) {
	return `Name is ${name}`
}

webpack.config.js

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react-ts");

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "kd",
    projectName: "utility",
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
  });
};

If you made it this far, I truly appreciate your efforts 🙇🏻‍♂️. Thanks for it. Your help is really appreciated ❤️

[webJose]

If "@kd/utility" is meant to be externally provided, you must set the rollup options to include this module as external. Note, however, that this only applies to bundling. When running the project in serve mode (npm run dev), externals are needed. You could:

• Provide the real thing.
• Provide a fake/stub.
• Use a plug-in to eat the dependency error (like vite-plugin-externalize-dependencies)

To summarize: You need to learn about externals in Vite. Once you learn about the topic, you'll be able to understand why this happens and how to solve it. Hopefully with what I explained you'll be able to investigate and solve. Good luck!

[Khodidas-withLoveKD]

Thanks @webJose for the quick reply 🙇

Understood how externals work in Vite and, as you suggested, implemented vite-plugin-externalize-dependencies to suppress the dependency errors.

The main thing is, if all the configurations are done correctly, things are working perfectly but since Vite does not recognise external dependencies in runtime (npm run dev) the App won't come up due to that error. Hence, suppressing the error makes it work!!

---

Here's what I did

I added vite-plugin-externalize-dependencies in my project. So, my vite.config.js (for the MiFe where I want to add the utility) looks like this now

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vitePluginSingleSpa from 'vite-plugin-single-spa'
import externalize from 'vite-plugin-externalize-dependencies'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		react(),
		vitePluginSingleSpa({
			type: 'mife',
			serverPort: 9001,
			spaEntryPoints: 'src/spa.jsx',
		}),
		externalize({
			externals: ['@kd/utility'],
		}),
	],
})

Utility's config

utility/vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vitePluginSingleSpa from 'vite-plugin-single-spa'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		react(),
		vitePluginSingleSpa({
			serverPort: 9003,
			spaEntryPoints: 'src/utility.jsx',
		}),
	],
	server: {
		port: 9003,
	},
})

src/utility.jsx

export function nameLogger(name) {
	return `Name is ${name}`
}

export const SomeComponent = () => {
	return <h3>THis is that SomeComponent</h3>
}

Updated

importMap.shared.json

{
	"imports": {
		"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
		"react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.development.js",
		"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.development.js",
		"@kd/utility": "http://localhost:9003/src/utility.jsx"
	}
}

And it's usage

Test.tsx

// other imports
import { SomeCompnent } from '@kd/utility'

const Test = () => (
  <SomeComponent />
)

And things worked 🥹

Thanks @webJose for all the help ❤️