Getting error when trying to share code between two Vue and Vite apps in the same repository

Viewed 30

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 
0 Answers
Related