Vue of Typescript. Error: Module not found: Error: Can't resolve './components/mycomponent.vue'

Question

I am using vue of typescript as well as typescript in Express. Everything worked until i want to use single file component in vue.js. Here is my component,

<template>
  <div>This is a simple component. {{msg}}</div> 
</template>

<script lang='ts'>
export default {
  data() {
    return {
      msg: "you"
    }
  }
}
</script>

My webpack file,

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');
const Webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        bundle: [
            './node_modules/bootstrap/dist/js/bootstrap.js',
            './dist/web/views/common/client/ts/_main.js',
            './web/views/common/client/style/main.scss'
        ]
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: '[name].js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        ts: 'ts-loader'
                    },
                    esModule: true
                }
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{
                        loader: 'css-loader',
                        options: {
                            minimize: false
                        }
                    }, {
                        loader: 'sass-loader'
                    }]
                })
            },
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader?$!expose-loader?jQuery'
            }
        ]
    },
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
        new HtmlWebpackPlugin({
            template: './web/views/common/_layout.pug',
            filename: '../web/views/common/layout.pug',
            filetype: 'pug'
        }),
        new HtmlWebpackPugPlugin(),
        new Webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            Popper: 'popper.js'
        })
    ]
};

If I don't use single file component, everything works, but when i introduce .vue file, it will show this error,

ERROR in ./dist/web/views/about/client/ts/_aboutController.js Module not found: Error: Can't resolve './components/mycomponent.vue' in '/Users/george/github/bochure/dist/web/views/about/client/ts' @ ./dist/web/views/about/client/ts/_aboutController.js 4:24-63 @ ./dist/web/views/common/client/ts/_main.js @ multi ./node_modules/bootstrap/dist/js/bootstrap.js ./dist/web/views/common/client/ts/_main.js ./web/views/common/client/style/main.scss

Can anyone help me? You can also download my source at github and help me out. Many thanks.

[email protected]:geforcesong/bochure.git

Answer 1

I'd suggest you to check the component path first. If you are embedding one vue component into another then check if both are on the same directory level.

If they are then you can use './component-name.vue' and you will be good to go.