Bit: ResolveModules not working with vue compiler v0.1.8

[thibaultchazal]

2254 # Describe the bug

Neither webpack bundler nor vue compiler find components with aliases (@)
Same as #1195 ?

Steps to Reproduce

1. Init bit V
2. Add my component and its dependencies V
3. Import vue compiler V
4. Build X

Expected Behavior

Aliases to be handled

Screenshots, exceptions and logs

Here are my import
js import AuthenticationService from '@/services/AuthenticationService' import EmailService from '@/services/EmailService'
Here is my bit config (in package.json)
json "bit": { "env": { "compiler": "bit.envs/compilers/[email protected]" }, "componentsDefaultDirectory": "components/{name}", "packageManager": "npm", "resolveModules": { "modulesDirectories": ["src"], "aliases": { "@": "src" } }, "overrides": { "assets/*": { "env": { "compiler": "-" } } } }

And here is the log when I try to bit build
````shell
⢙ isolating component - authentication-service
WARN A new version of sass-loader is available. Please upgrade for best experience.
WARN A new version of sass-loader is available. Please upgrade for best experience.
WARN A new version of sass-loader is available. Please upgrade for best experience.
⡂⢘ isolating component - authentication-service

DONE Compiled successfully in 218ms 10:47:18

DONE Compiled successfully in 226ms 10:47:18

DONE Compiled successfully in 231ms 10:47:18

File Size Gzipped

dist/authentication-service.umd.min.js 172.23 KiB 34.76 KiB
dist/authentication-service.umd.js 172.23 KiB 34.76 KiB
dist/authentication-service.common.js 171.82 KiB 34.63 KiB

Images and other types of assets omitted.

⢋⠠ isolating component - authentication-service
WARN A new version of sass-loader is available. Please upgrade for best experience.
WARN A new version of sass-loader is available. Please upgrade for best experience.
WARN A new version of sass-loader is available. Please upgrade for best experience.
⠀⢙ isolating component - authentication-service

ERROR Failed to compile with 2 errors 10:47:27

These dependencies were not found:

• @/services/AuthenticationService in ./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/cache-loader/dist/cjs.js??ref--0-0!./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/vue-loader/lib??vue-loader-options!/var/folders/s8/z29sx1613vx3fn01crjnqkh00000gn/T/bit/capsule-31720/welcome.vue?vue&type=script&lang=js&
• @/services/EmailService in ./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/cache-loader/dist/cjs.js??ref--0-0!./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/vue-loader/lib??vue-loader-options!/var/folders/s8/z29sx1613vx3fn01crjnqkh00000gn/T/bit/capsule-31720/welcome.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save @/services/AuthenticationService @/services/EmailService

ERROR Failed to compile with 2 errors 10:47:27

These dependencies were not found:

• @/services/AuthenticationService in ./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/cache-loader/dist/cjs.js??ref--0-0!./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/vue-loader/lib??vue-loader-options!/var/folders/s8/z29sx1613vx3fn01crjnqkh00000gn/T/bit/capsule-31720/welcome.vue?vue&type=script&lang=js&
• @/services/EmailService in ./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/cache-loader/dist/cjs.js??ref--0-0!./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/vue-loader/lib??vue-loader-options!/var/folders/s8/z29sx1613vx3fn01crjnqkh00000gn/T/bit/capsule-31720/welcome.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save @/services/AuthenticationService @/services/EmailService

ERROR Failed to compile with 2 errors 10:47:27

These dependencies were not found:

• @/services/AuthenticationService in ./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/cache-loader/dist/cjs.js??ref--0-0!./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/vue-loader/lib??vue-loader-options!/var/folders/s8/z29sx1613vx3fn01crjnqkh00000gn/T/bit/capsule-31720/welcome.vue?vue&type=script&lang=js&
• @/services/EmailService in ./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/cache-loader/dist/cjs.js??ref--0-0!./.git/bit/components/compilers/vue/bit.envs/0.1.8/node_modules/vue-loader/lib??vue-loader-options!/var/folders/s8/z29sx1613vx3fn01crjnqkh00000gn/T/bit/capsule-31720/welcome.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save @/services/AuthenticationService @/services/EmailService
Build failed with errors.
macbook-pro-3:client sarahgoldfarb$ bit status
new components
(use "bit tag --all [version]" to lock a version with all your changes)

 > api ... ok
 > authentication-service ... ok
 > email-service ... ok
 > store ... ok
 > welcome ... ok

````

Specifications

Bit version: 14.8.6
Node version: 12.4.0
npm version: 6.11.2
Platform: Vue (vue cli 3 + webpack)
Bit compiler (include version): bit.envs/compilers/[email protected]
also tried with : bit.envs/bundlers/[email protected]
Bit tester (include version): none

[rakeshwfg]

Hi is there any resolution for this. I am using Bit in my react projects and my components have imports in form of aliases.

[giuseppemastrandrea]

Hi! I'm experiencing the same problem. Following the guide i found here:

https://docs.bit.dev/docs/vue-guidelines

Basically I try to use an alias defined in my package.json this way:

"resolveModules": { "aliases": { "@": "src" } }

and then i try to use this alias in a vue component:

export * from "@/scss/exported.scss"

the output of bit status command is telling me everything is ok. But then, when i try to tag or build the component i get these messages:

This dependency was not found:
* @/scss/exported.scss in /.../styles.js

To install it, you can run: npm install --save @/scss/exported.scss
Build failed with errors.

Instead, if i use a relative path in the style.js everything builds and is tagged properly.