Importing children components. Module not found: Error: Can't resolve

To start, I’ve been successful with all of vue-styleguidist up to this point. The moment I imported a component into another component I’m met with Module not found.

Dependencies:

"typescript": "~4.5.2",
"vue-loader": "^15.0.0",
"vue": "2.6.14",
"vue-property-decorator": "^9.1.2",
"vue-style-loader": "^4.1.3",
"vue-styleguidist": "^4.45.1",
"ts-loader": "^9.3.1",
"webpack": "^5.0.0",

Full error:

Module not found: Error: Can't resolve '../ui-comp-chip' in '/correct/path/to/component'
[tsl] ERROR in /correct/path/to/ui-comp/UiComp.ts(8,26)
      TS2307: Cannot find module '../ui-comp-child/UiCompChild.vue' or its corresponding type declaration

Below is the file directory with corresponding files that may paint a picture of what I am doing. For the sake of brevity, I’ve removed any information that is unnecessary to solve the problem.

lib/
├─ ui-comp/
│  ├─ index.ts
│  ├─ UiComp.ts
│  ├─ UIComp.Vue
├─ ui-comp-child/
│  ├─ index.ts
│  ├─ UiCompChild.ts
│  ├─ UiCompChild.vue

// ui-comp/UiComp.ts

import { Vue, Component, Prop } from 'vue-property-decorator';

import UiCompChild from '../ui-comp-child';

@Component({
  components: {
      UiChipAction,
  },
})
export default class UiComp extends Vue {}

// ui-comp/UiComp.vue

<template>
  <span>
      <ui-comp-child></ui-comp-child>
  </span>
</template>

<script lang="ts" src="./UiComp.ts"></script>

// ui-comp/index.ts

import UiComp from './UiComp.vue';
export default UiComp;

// styleguide.config.js
module.exports = {
  ...
  components: [
    path.join(process.cwd(), 'path/to/files/', '**/*.vue')
  ],
  webpackConfig() {
    return {
      module: {
        rules: [
          {
            test: /\.ts$/,
            loader: 'ts-loader',
            options: { appendTsSuffixTo: [/\.vue$/] }
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          {
            test: /\.scss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ]
          }
        ]
      },
      plugins: [ new VueLoaderPlugin() ],
    }
  }
}

[elevatebart]

hello @whosdustin,

The investigation is going well:

• The error you get points to the missing shims-vue.d.ts. Perhaps this file is in your project but not in scope of the tsconfig.json.
• Once that’s taken care of, I get another error: The loader does not resolve ../ui-child to ../ui-child/index.ts. I think it has to do with the tsconfig. Let me check.

[whosdustin]

Thank you so much! It’s always the simplest things that one can miss. I appreciate you taking the time to help me.