I'm trying to share code between two apps in the same repository with the goal of avoiding having to create a private npm module to share code. I thought with Vite we could have a directory structure something like
- common
- webapp1
- webapp2
and then use relative paths to import shared code. This worked fine for simple cases where it was just javascript/typescript or a view component. However, once I started moving over coder that uses other public npm packages (axios) it worked at first but if you delete the node modules folder which I assume deletes the npm cache it started breaking with the error below.
VITE v3.0.4 ready in 428 ms
➜ Local: http://localhost:8081/
➜ Network: http://192.168.254.3:8081/
Failed to resolve import "axios" from "../common/infrastructure/http/index.js". Does the file exist?
3:56:43 PM [vite] Internal server error: Failed to resolve import "axios" from "../common/infrastructure/http/index.js". Does the file exist?
Plugin: vite:import-analysis
File: /Users/ryan/code/analyzer-app/common/infrastructure/http/index.js
1 | import axios from "axios";
| ^
2 | import * as Sentry from "@sentry/vue";
3 |
at formatError (file:///Users/ryan/code/analyzer-app/webapp/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:35035:46)
at TransformContext.error (file:///Users/ryan/code/analyzer-app/webapp/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:35031:19)
at normalizeUrl (file:///Users/ryan/code/analyzer-app/webapp/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:40181:33)
at async TransformContext.transform (file:///Users/ryan/code/analyzer-app/webapp/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:40315:47)
at async Object.transform (file:///Users/ryan/code/analyzer-app/webapp/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:35284:30)
at async loadAndTransform (file:///Users/ryan/code/analyzer-app/webapp/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:39812:29)
Shared Code
// common/infrastructure/http/index.js
import axios from "axios";
import * as Sentry from "@sentry/vue";
let handleErrorMessage;
let handleSuccessMessage;
// removed for brevity
const configure = ({ onErrorMessage, onSuccessMessage} = {}) => {
handleErrorMessage = onErrorMessage;
handleSuccessMessage = onSuccessMessage;
}
export default {
// removed for brevity
configure
};
** Consuming Code **
// common/infrastructure/http/index.js
// removed for brevity
import { configure as configureDoAsync } from "../../common/infrastructure/doAsync";
// removed for brevity
// Configure doAsync for error and success message handling
configureDoAsync({
onErrorMessage: message => store.dispatch("toastMessage/notifyError", { message }, { root: true }),
onSuccessMessage: message => store.dispatch("toastMessage/notifySuccess", { message: message }, { root: true })
});
// removed for brevity