ASP.NET Core with Vue.js doesn't accept my pure js component

Question

I used default "ASP.NET Core with Vue.js" template and wanted to write simple component that I'm using in normal Vue.js project, but I decided to use "pure" JS instead of typescript, but apparently my port does not work properly. What may be wrong?

in ./ClientApp/components/test/test.vue Module parse failed: ...\components
\test\test.vue Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
|   <template>  
|       <h3>Sign Up!</h3>  
|       <div class="form-group">
@ ./ClientApp/boot.ts 10:36-81 @ multi event-source-polyfill webpack-hot-
middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts

<template>
    <h3>Sign Up!</h3>
    <div class="form-group">

        <label>Username:</label>
        <input type="text" placeholder="Username" v-model="user.login">

        <button @click="submit">Submit</button>
    </div>    
</template>


<script>
export default 
{
    data() {
        return{
            user:{
                login: ''
            }
        };
    },
    methods:{
        submit(){
            this.$http.post('http://API:1234/post', this.user)
                        .then (response => {
                                console.log(response);
                              },
                              error =>{
                                console.log(error);
                              });
        }    
    }
}
</script>

boots ts

import './css/site.css';
import 'bootstrap/dist/js/npm';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [
    { path: '/', component: require('./components/home/home.vue.html') },
    { path: '/counter', component: require('./components/counter/counter.vue.html') },
    { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') },
    { path: '/test', component: require('./components/test/test.vue') }
];

new Vue({
    el: '#app-root',
    router: new VueRouter({ mode: 'history', routes: routes }),
    render: h => h(require('./components/app/app.vue.html'))
});

Check your webpack configuration. Renaming .ts to .js is insufficient as webpack is looking for .ts files. Actually, just post it here. — Slava Knyazev
– Slava Knyazev, Commented Aug 2, 2018 at 14:07
"You may need an appropriate loader to handle this file type" indicates that you need the proper webpack loader. — reinerBa
– reinerBa, Commented Aug 2, 2018 at 14:07
@SlavaKnyazev here's webpack config pastebin.com/raw/iPZ57B4k — UbuntuCore
– UbuntuCore, Commented Aug 2, 2018 at 14:12
Thanks guys, it worked. If you want, then write your comments as an answer, so I'mma accept it. — UbuntuCore
– UbuntuCore, Commented Aug 2, 2018 at 14:16

UbuntuCore · Accepted Answer · 2018-08-02 14:15:52Z

2

Solution:

I added

{ test: /.vue$/, loader: 'vue-loader'},

to webpack.config.js in section: module, rules.

So, finally it is:

rules: [
    { test: /\.vue$/, loader: 'vue-loader'},
    { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
    { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
    { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
    { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]

answered Aug 2, 2018 at 14:15

UbuntuCore

4178 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

ASP.NET Core with Vue.js doesn't accept my pure js component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related