search

carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
597 stars 176 forks source link

<cv-file-uploader> Failed to resolve import #1573

Open krko12345 opened 4 months ago

krko12345 commented 4 months ago

Failed to resolve import

Detailed description

Describe in detail the issue you're having.

CvFileUploader throws error when used in my project. The error is "Failed to resolve import", which is related to CvForm component import in the file-uploader component.

In my env.d.ts I have declared the path as "declare module '@carbon/vue/src/components/*'", and I tried with different variations as well.

Still getting error: image

What works for me is to modify the CvFileUploader component and remove the CvForm wrapper inside, but of course that's not permanent solution.

Any recommendation? Is this a bug?

Is this a feature request (new component, new icon), a bug, or a general issue? issue

Is this issue related to a specific component? CvFileUploader

What did you expect to happen? What happened instead? What would you like to see changed? Expected the component to load, instead it throws error.

What browser are you working in? Edge

What version of the Carbon Design System are you using? 3.0.12

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

  1. Step one
  2. Step two
  3. Step three
  4. etc.

Additional information

krko12345 commented 4 months ago

The problem seems to move to next line if I modify it to use parent directory path (instead of current directory) for the import

image

davidnixon commented 3 months ago

Hmm I cannot reproduce this. I think you are correct that its may have something to do with 'env.d.ts' file. What happens if you remove the "declare module " statement?

krko12345 commented 2 months ago

@davidnixon Error remained even after removal of all declarations from "env.d.ts". It wouldn't be a solution anyway because without declarations the code would fail to compile from typescript.

I also must say that I use there practically all carbon components, and cv-file-uploader is the only one having this issue.

github-actions[bot] commented 2 weeks ago

This issue has been marked as stale because it has required additional info or a response from the author for over 14 days. When you get the chance, please comment with the additional info requested. Otherwise, this issue will be closed in 14 days.

krko12345 commented 2 weeks ago

Not sure what more should I include in my response. The problem still persists as described.

I only managed to avoid the problem by having a modified copy of CvFileUploader component, where I have removed the CvForm wrapper. As mentioned, other carbon components work for me as expected.

davidnixon commented 1 week ago

I do not think I fully understand the use case but I think I do see the issue. Several index files import like this:

import CvForm from './CvForm';

Notice the lack of ".vue" extension! I updated those places to import like this:

import CvForm from './CvForm.vue';

Could you try this patch? carbon-vue-3.0.16-5f775.tgz

npm remove @carbon/vue 
npm add ./carbon-vue-3.0.16-5f775.tgz

Another possible fix. Can you remove "declare module '@carbon/vue/src/components/*'"? I think maybe your use case is related to an issue @OlkaB resolved in April. #1578 which nows allow you to import individual components. So this should work without the declare module.

import { CvFileUploader } from '@carbon/vue';
krko12345 commented 1 week ago

@davidnixon I confirm, the CvFileUploader component worked as expected while using carbon-vue-3.0.16-5f775.tgz