How to handle Vite's `base` config while importing utility modules in `serve` mode? #170

Khodidas-withLoveKD · 2024-07-11T13:07:15Z

Khodidas-withLoveKD
Jul 11, 2024

I have root project which has base set to /admin . Now, if I try import a utility module (using @org/utility) in root project it gives 404 because the URL comes up as http://localhost:9000/admin@kd/utility instead of http://localhost:9010/src/utility.tsx

The above works fine if I don't add the base config in Vite. How to handle this in serve mode?

Note: I have referred this link (single-spa-and-vite-fast-forward-to-vite-plugin-single-spa) but was not able to figure out still

Code Snippets

I have root project which has base set to /admin

root-config/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: 'root',
			imo: '3.1.1',
			importMaps: {
				dev: ['src/importMap.dev.json', 'src/importMap.shared.json'],
				build: [],
			},
		}),
		externalize({
			externals: ['@kd/utility', '@kd/app-1'],
		}),
	],
	base: '/admin',
	})

It's usage

root-config/src/App.jsx

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

function App() {
	const [count, setCount] = useState(0)
	console.log('kd nameLogger:', nameLogger('KD'))

	return (
		<>
			<div>
				// other code

importMap.shared.json

{
	"imports": {
		"single-spa": "../node_modules/single-spa/lib/es2015/system/single-spa.min.js",
		"@kd/utility": "http://localhost:9003/src/utility.jsx",
		"rxjs": "../node_modules/rxjs/dist/bundles/rxjs.umd.min.js"
	}
}

Declaration

utility/src/utility.jsx

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

It'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,
	},
})

Thanks in advance 🙏

Answered by webJose

Jul 13, 2024

There are a few things wrong in your files. For example, the shared import map should not have paths that point to things in the /src folder. Those belong in the DEV import map. Then you have the origin set to localhost on port 9010, don't know why since the project is running from port 9000.

Then in the utility project, you're setting the server port, but that's unnecessary as vite-plugin-single-spa sets it for you. What's the point of asking the developer to specify the port in two places, right? My plug-in takes care of the preview and server ports for you, as well as server.origin.

Anyway, your problem comes from how vite-plugin-externalize-dependencies work, plus how Vite works. The …

View full answer

webJose · 2024-07-11T13:15:09Z

webJose
Jul 11, 2024
Maintainer

Review the resulting HTML (the rendered page) in developer tools. The HEAD element: What do you have there in terms of scripts and order of scripts? Because your problem seems to be that the import map is not taking.

0 replies

Khodidas-withLoveKD · 2024-07-11T13:21:53Z

Khodidas-withLoveKD
Jul 11, 2024
Author

Focusing on import-maps

<script type="overridable-importmap">{
  "imports": {
    "@kd/root-config": "http://localhost:9000/src/kd-root-config.js",
    "@kd/app-1": "http://localhost:9001/src/spa.jsx",
    "single-spa": "../node_modules/single-spa/lib/es2015/system/single-spa.min.js",
    "@kd/utility": "http://localhost:9003/src/utility.jsx",
    "@kd/app-2": "http://localhost:9002/src/ServiceEntryPoint.tsx",
    "rxjs": "../node_modules/rxjs/dist/bundles/rxjs.umd.min.js"
  },
  "scopes": {}
}</script><script type="importmap" id="import-map-overrides" data-is-importmap-override="">{
  "imports": {
    "@kd/root-config": "http://localhost:9000/src/kd-root-config.js",
    "@kd/app-1": "http://localhost:9001/src/spa.jsx",
    "single-spa": "../node_modules/single-spa/lib/es2015/system/single-spa.min.js",
    "@kd/utility": "http://localhost:9003/src/utility.jsx",
    "@kd/app-2": "http://localhost:9002/src/ServiceEntryPoint.tsx",
    "rxjs": "../node_modules/rxjs/dist/bundles/rxjs.umd.min.js"
  },

Here is the entire Head element

<head>
    <script type="overridable-importmap">{
  "imports": {
    "@kd/root-config": "http://localhost:9000/src/kd-root-config.js",
    "@kd/app-1": "http://localhost:9001/src/spa.jsx",
    "single-spa": "../node_modules/single-spa/lib/es2015/system/single-spa.min.js",
    "@kd/utility": "http://localhost:9003/src/utility.jsx",
    "@kd/app-2": "http://localhost:9002/src/ServiceEntryPoint.tsx",
    "rxjs": "../node_modules/rxjs/dist/bundles/rxjs.umd.min.js"
  },
  "scopes": {}
}</script><script type="importmap" id="import-map-overrides" data-is-importmap-override="">{
  "imports": {
    "@kd/root-config": "http://localhost:9000/src/kd-root-config.js",
    "@kd/app-1": "http://localhost:9001/src/spa.jsx",
    "single-spa": "../node_modules/single-spa/lib/es2015/system/single-spa.min.js",
    "@kd/utility": "http://localhost:9003/src/utility.jsx",
    "@kd/app-2": "http://localhost:9002/src/ServiceEntryPoint.tsx",
    "rxjs": "../node_modules/rxjs/dist/bundles/rxjs.umd.min.js"
  },
  "scopes": {}
}</script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/import-map-overrides.js"></script><style type="text/css">.imo-unstyled {
  border: none;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  cursor: pointer;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
}

.imo-unstyled::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.imo-trigger {
  position: fixed;
  margin: 10px;
  border-radius: 5px;
  background-color: navajowhite;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: sans-serif;
  z-index: 10500;
}

.imo-trigger-bottom-right {
  bottom: 0;
  right: 0;
}

.imo-trigger-bottom-left {
  bottom: 0;
  left: 0;
}

.imo-trigger-top-right {
  top: 0;
  right: 0;
}

.imo-trigger-top-left {
  top: 0;
  left: 0;
}

.imo-popup {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: 10000;
  background-color: black;
  color: white;
  font-family: sans-serif;
  padding: 24px;
  overflow-y: auto;
}

.imo-popup a:visited,
.imo-popup a {
  color: white;
}

.imo-popup .imo-module-dialog {
  left: calc(50% - 200px);
}

.imo-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.imo-list {
  margin-left: 16px;
}

.imo-list > *:not(:last-child) {
  margin-bottom: 8px;
}

.imo-list-container *,
.imo-modal-container * {
  font-family: sans-serif;
  box-sizing: border-box;
}

.imo-module-dialog {
  position: fixed;
  z-index: 30000000;
  top: 30%;
  max-width: 600px;
  margin: 0 auto;
  border: 4px solid navajowhite;
  background-color: white;
  padding: 1em;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.imo-module-dialog input {
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  padding-right: 20px;
}

.imo-module-dialog table {
  margin-bottom: 16px;
}

.imo-module-dialog table td:first-child {
  text-align: right;
  padding-right: 16px;
  word-break: keep-all;
}

.imo-module-dialog table td {
  word-break: break-all;
}

.imo-module-dialog.imo-overridden {
  border: 4px solid salmon;
}

.imo-table-header-actions {
  display: flex;
  align-items: center;
}

.imo-overrides-table {
  border-collapse: collapse;
  margin-top: 32px;
}

.imo-overrides-table tr td:first-child {
  display: flex;
  align-items: center;
  padding-right: 32px;
  position: relative;
}

.imo-needs-refresh {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  /* base64 encoded 27F2 svg */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='261' height='216' xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff' stroke-linecap='square' stroke-miterlimit='10' shape-rendering='auto' stroke-opacity='1' fill='%23ffffff' stroke-dasharray='none' stroke-width='1' stroke-linejoin='miter' stroke-dashoffset='0'%3E%3Cg%3E%3Cpath fill='%23ffffff' d='m152.5625,214.0625q-27.5625,0 -49.6406,-11.8125q-22.0781,-11.8125 -34.7344,-28.4062l12.6563,-11.5313q10.6874,15.1875 31.0781,25.0313q20.3906,9.8437 40.6406,9.8437q21.375,0 44.1563,-11.5313q22.7812,-11.5312 34.3124,-34.3124q11.5313,-22.7813 11.5313,-44.1563q0,-21.375 -11.5313,-44.1563q-11.5312,-22.7812 -34.3124,-34.3124q-22.7813,-11.5313 -44.1563,-11.5313q-19.9687,0 -39.6563,9.1406q-19.6874,9.1407 -30.9374,24.1875q-11.25,15.0469 -16.7344,35.7188l42.3281,-34.7344l-54,91.6875l-54,-91.6875l47.25,38.8125q3.9375,-24.4687 17.4375,-44.5781q13.5,-20.1094 36.9844,-32.7656q23.4844,-12.6563 51.3281,-12.6563q29.25,0 54,14.0625q24.75,14.0625 38.8125,38.8125q14.0625,24.75 14.0625,54q0,29.25 -14.0625,54q-14.0625,24.75 -38.8125,38.8125q-24.75,14.0625 -54,14.0625z' /%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.imo-status {
  height: 16px;
  width: 16px;
  border-radius: 8px;
  border: 1px solid white;
  margin-right: 8px;
}

.imo-disabled-override {
  background-color: lightblue;
}

.imo-next-override {
  background-color: darkred;
}

.imo-current-override {
  background-color: salmon;
}

.imo-default-module {
  background-color: lightgoldenrodyellow;
}

.imo-external-override {
  background-color: orange;
}

.imo-next-default {
  background-color: darkgoldenrod;
}

.imo-dev-lib-override {
  background-color: lightpink;
}

.imo-overrides-table tbody tr:hover {
  cursor: pointer;
  background-color: #404040;
}

.imo-overrides-table td,
.imo-overrides-table th {
  line-height: 18px;
  padding: 16px;
  border: 1px solid white;
}

.imo-add-new {
  margin-left: 16px;
}

.imo-add-new button {
  color: black;
}

.imo-clear-input {
  position: absolute;
  top: 0;
  right: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 100%;
}

.imo-modal-container {
  font-family: sans-serif;
}

.imo-modal {
  background-color: rgba(61, 70, 77, 0.6);
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 20000000;
}

.imo-list-search,
.imo-list-container button,
.imo-modal-container button {
  font-size: 14px;
  height: 27px;
  line-height: 27px;
}

.imo-list-search {
  line-height: 22px;
  border: none;
  padding: 5px;
  color: black;
}
</style>

    <script type="module">
import RefreshRuntime from "/admin/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

    <script type="module" src="/admin/@vite/client"></script>

    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/admin/vite.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite + React</title>
  </head>

0 replies

webJose · 2024-07-11T13:40:31Z

webJose
Jul 11, 2024
Maintainer

You refer to the module as:

import { nameLogger } from '@org/utility'

The key part: @org. However, the import map says:

"@kd/utility": "http://localhost:9003/src/utility.jsx",

The key part: @kd. No matching entry in the import map.

0 replies

Khodidas-withLoveKD · 2024-07-11T14:28:31Z

Khodidas-withLoveKD
Jul 11, 2024
Author

I modified code so that it would be easier to understand 😮‍💨 . Anyways, updated the question with the code as is. The issue still persist

0 replies

webJose · 2024-07-11T18:48:12Z

webJose
Jul 11, 2024
Maintainer

I would require access to a repository that reproduces the problem to help further. I think that maybe what's happening is that Vite is resolving the module name as /admin/@kd/utililty. If that's the case, then something somewhere in the Vite pipeline needs to ensure the name doesn't change. If this were the case, I think that vite-plugin-externalize-dependencies should ensure that the externalized list doesn't get the base appended by resolving their module ID's instead of letting Vite resolve them (if you don't understand this, is probably because you need to know how Vite plug-ins work, so no worries).

What I'm saying is: Provide a reproduction that I can access to play with, if possible. If not possible, investigate further on your own, I suppose. I'll try to experiment on my side whenever I have the time, but I don't think I'll have time any time soon (3 weeks).

1 reply

Khodidas-withLoveKD Jul 12, 2024
Author

Sure @webJose here is the link for the repo which replicates this issue: https://github.com/Khodidas-withLoveKD/debug-base-issue-vite-single-spa

Meanwhile, I will try to check what you said about resolving module IDs and other such things

webJose · 2024-07-13T03:04:39Z

webJose
Jul 13, 2024
Maintainer

There are a few things wrong in your files. For example, the shared import map should not have paths that point to things in the /src folder. Those belong in the DEV import map. Then you have the origin set to localhost on port 9010, don't know why since the project is running from port 9000.

Then in the utility project, you're setting the server port, but that's unnecessary as vite-plugin-single-spa sets it for you. What's the point of asking the developer to specify the port in two places, right? My plug-in takes care of the preview and server ports for you, as well as server.origin.

Anyway, your problem comes from how vite-plugin-externalize-dependencies work, plus how Vite works. The externalize plug-in simply cheats Vite so no errors are thrown, but Vite ends up adding the base to the ID. I am unsure if the externalize plug-in can stop this or not.

In the end, you can make it work if your import map changes the key "@kd/utility" for "/admin@kd/utility". Generally speaking, any externalized ID will get the base prepended. Raise an issue here. It is out my hands.

BTW, you can also delete the proxy settings in the root config project. Not needed.

0 replies

MilanKovacic · 2024-07-24T02:23:59Z

MilanKovacic
Jul 24, 2024

@Khodidas-withLoveKD New version of vite-plugin-externalize-dependencies plugin has been released, with a fix for correctly handling base paths.

2 replies

webJose Jul 24, 2024
Maintainer

Thanks for dropping the note for the user. Very kind of you.

Khodidas-withLoveKD Jul 24, 2024
Author

Thank you @MilanKovacic for the info. And thankyou @webJose for all the efforts 🙇

PS: Sorry for late reply was busy in some work

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to handle Vite's `base` config while importing utility modules in `serve` mode? #170

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 7 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to handle Vite's base config while importing utility modules in serve mode? #170

Khodidas-withLoveKD Jul 11, 2024

Replies: 7 comments · 3 replies

webJose Jul 11, 2024 Maintainer

Khodidas-withLoveKD Jul 11, 2024 Author

webJose Jul 11, 2024 Maintainer

Khodidas-withLoveKD Jul 11, 2024 Author

webJose Jul 11, 2024 Maintainer

Khodidas-withLoveKD Jul 12, 2024 Author

webJose Jul 13, 2024 Maintainer

MilanKovacic Jul 24, 2024

webJose Jul 24, 2024 Maintainer

Khodidas-withLoveKD Jul 24, 2024 Author

How to handle Vite's `base` config while importing utility modules in `serve` mode? #170

Khodidas-withLoveKD
Jul 11, 2024

Replies: 7 comments 3 replies

webJose
Jul 11, 2024
Maintainer

Khodidas-withLoveKD
Jul 11, 2024
Author

webJose
Jul 11, 2024
Maintainer

Khodidas-withLoveKD
Jul 11, 2024
Author

webJose
Jul 11, 2024
Maintainer

Khodidas-withLoveKD Jul 12, 2024
Author

webJose
Jul 13, 2024
Maintainer

MilanKovacic
Jul 24, 2024

webJose Jul 24, 2024
Maintainer

Khodidas-withLoveKD Jul 24, 2024
Author