Vue.js issue with typescript - alias has no error in code but when running shows an error that can't resolve alias

Question

I have created the most basic app to test this issue, not sure if I haven't configured something right, but the issue is that importing a typescript file into my .vue component will create no error and the compiler can find it, however when typing npm run serve an error will appear saying Can't resolve '@logic/enemy-repository' in '~\enemytest\src\views. Have recreated the app many times with diffrent configurations but still the same issue. Any ideas?

This is all being done in VS Code, Vue.js 3 and on windows. Just to note:

I'm referencing like so import EnemyRepository from '@logic/enemy-repository'
Doing relative referencing of the file causes no issue such as import EnemyRepository from '../logic/enemy-repository'
Doing the import from the route absolutely also works import EnemyRepository from '@/logic/enemy-repository'
Because of this the issue is most likely to do with the tsconfig.json file. My paths and baseurl are set up like so...
```
 "baseUrl": ".",
 "paths": {
    "@/*": [
       "src/*"
    ],
    "@logic/*": ["src/logic/*"],

 },
```

Steps to recreate:

vue create enemytest
Manually select features
Babel, Typescript, Router, vuex, linter/formatter selected.
3.x
USe class-style component syntax
Use babel alongside typescript
Use history mode
ESLint with error prevention only
Lint on save
In dedicated config file
Open in vs code.
Create a new file in folder structure /src/loci/enemy-repository.ts and export method.
Import repository into HomeView.vue.
In tsconfig.json add a path new item to paths "@logic/": ["src/logic/"],
Type in console npm run serve
Error shows in terminal 'Module not found: Error: Can't resolve '@logic/enemy-repository' in '~\enemytest\src\views''

Have attached a repo here GitHub Repo

Yeah that's my work around for the time being just trying to get alias to work. — Lewis
– Lewis, Commented Jun 8, 2023 at 17:05
The alias is defined in either vite.config.js or webpack.config.js (or .ts), depending on whether you use @vue/cli or vite — tao
– tao, Commented Jun 8, 2023 at 17:08
Search for "define import alias in vite" ( or @vue/cli). — tao
– tao, Commented Jun 8, 2023 at 17:09

tao · Accepted Answer · 2023-06-08 17:23:33Z

4

for @vue/cli projects:

// vue.config.js

const path = require('path');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@logic": path.resolve(__dirname, 'src/logic/'),
        "@": path.resolve(__dirname, 'src/')
      }
    }
  }
}

for vite projects: (resolve.alias)

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

export default defineConfig({
  resolve:{
    alias:{
      '@logic': path.resolve(__dirname, './src/logic')
      '@' : path.resolve(__dirname, './src')
    },
  },
  plugins: [vue()]
})

edited Jun 8, 2023 at 17:23

answered Jun 8, 2023 at 17:12

tao

91k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lewis Over a year ago

appreciate the help but am getting an error 'Invalid options in vue.config.js: "resolve" is not allowed' Am using @vue/cli. Doesn't say about alias tag here 'cli.vuejs.org/config/#publicpath' am fairly new to vue.js so i assume this is where the docs are for it?

tao Over a year ago

My bad, copy/pasted the wrong thing. Updated with working code. Note: the order matters. If you let @ first, it will resolve before it gets to @logic and @logic will never match (because @ it's already transformed into src/).

Collectives™ on Stack Overflow

Vue.js issue with typescript - alias has no error in code but when running shows an error that can't resolve alias

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related