CODEWITHSUNDEEP
javascriptnode.jsvue.jswebpackwebpack-4
Shlomi Levi
Shlomi Levi

Reputation: 3315

Vue custom module resolution doesn't seem to work

UPDATE

I solved the problem. The answer here is below

Question

I create a new vue project via vue/cli: vue create hello-world (all the options he asks are selected).

Then I create a index.ts file in hello-world/libs/test-lib folder with the following content:

export const item = 1;

In main.ts and home.vue I imported this module to use them:

import {item} from '@libs/test-lib';

console.log('item', item);

and in my tsconfig.json I add:

 "@libs/*": [
   "libs/*"
  ]

My vscode is resolve this path. but when I try to run build or serve (npm run build) As a result, I am getting an error:

@libs/test-lib in ./src/main.ts, ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=ts&

To install it, you can run: npm install --save @libs/test-lib

I think I did everything according by the module-resolution guide from webpack.

enter image description here

Any help would be much appreciated.

Upvotes: 1

Views: 1325

Answers (1)

Shlomi Levi
Shlomi Levi

Reputation: 3315

I found it!

Because I use babel with typescript (from the configuration of vue/cli), then I need to use babel-plugin-module-resolver.

So to solve the problem, I created babel config file .babelrc, (in the root) with the following content:

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@libs": "./libs"
        }
      }
    ]
  ]
}

I ran the command again, And it worked!

Upvotes: 2

Related Questions