How to fix error “This relative module was not found: * ./src/main.js in multi (webpack)-dev-server” on npm run serve in vue3.x with typescript?

Question

i m using vue3.x and also vuex 4 with typescript , i did all things which are mentioned in https://github.com/ChrisShank/vue-next-webpack-preview but when i try to run vue app with serve cmd i get this error : *ERROR Failed to compile with 2 errors

This relative module was not found: ./src/main.js in multi (webpack)-dev-server/client?http://192.168.100.38:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js, multi (webpack)/hot/dev-server.js (webpack)-dev-server/client?http://192.168.100.38:8081&sockPath=/sockjs-node ./src/main.js*

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { store } from "./store";

createApp(App)
  .use(store)
  .mount("#app");

store/index.ts

import { createStore } from "vuex";

export type State = { counter: number };

const state: State = { counter: 0 };

export const store = createStore({
  state,
  mutations: {
    increment(state, payload) {
      state.counter++;
    }
  },
  actions: {
    increment({ commit }) {
      commit("increment");
    }
  },

  getters: {
    counter(state) {
      return state.counter;
    }
  },
  modules: {}
});

package.json

{
  "name": "vue3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.5.3",
    "core-js": "^3.6.5",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "vue": "^3.0.0",
    "vuex": "^4.0.0-rc.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
    ],
    "exclude": [
        "node_modules"
    ]
}

plus,i have shims files too though im getting error, help me to resolve it please?

no need to use webpack you could use vue cli 4, check the installed version installed in your computed by typing vue --version in command line — Boussadjra Brahim
well yeah that i use manually though i check vue cli version its @vue/cli 4.5.9 — Gunaraj Khatri
if you want to configure vue 3 + webpack check my answer here then you could add vuex and TS, but i recommend to use vue cli — Boussadjra Brahim
i have just added tsconfig.json manually as i see in github github.com/ChrisShank/vue-next-webpack-preview just hoping it may work though it did not — Gunaraj Khatri

Nitesh Raut Kshettri Nitesh Raut Kshettri · Accepted Answer · 2020-11-21T03:03:02

Have you installed typescript ? I don't see typescript in the dev dependencies, this might help you to solve your problem.

How to fix error “This relative module was not found: * ./src/main.js in multi (webpack)-dev-server” on npm run serve in vue3.x with typescript?

1 Answers