locked
App.vue “Module parse failed: Unexpected token (1:0)” RRS feed

  • Question

  • User1993186009 posted

    Summary of the problem I am having:

    Hi,

    I am facing the following issue while running ASPNET.Core+VUE project in VS2017:

    Error I am receiving:

    Microsoft.AspNetCore.NodeServices:Error: [31m×[39m [90m「wdm」[39m: Hash: e6a503266120f3b04101
    Version: webpack 4.28.4
    Time: 13045ms
    Built at: 01/17/2019 2:22:50 PM
    Asset Size Chunks Chunk Names
    main.js 263 KiB 0 main
    main.js.map 849 KiB 0 main
    Entrypoint main = main.js main.js.map

    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

    ERROR in ./src/App.vue 1:0
    Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    > <template>
    | <div id="app">
    | <div class="container-fluid">
    @ ./src/main.ts 2:0-28 9:21-24
    @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./src/main.ts

    My code:

    my packages.json:

    {
    "name": "weatherapp2",
    "private": true,
    "version": "0.0.0",
    "scripts": {
    "serve": "vue-cli-service serve",
    "serve-browser": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "postinstall": "webpack --config webpack.config.vendor.js"
    },
    "dependencies": {
    "aspnet-webpack": "^3.0.0",
    "autoprefixer": "^9.4.5",
    "awesome-typescript-loader": "^5.2.1",
    "boostrap": "^2.0.0",
    "bootstrap": "^4.2.1",
    "bootstrap-vue": "^2.0.0-rc.11",
    "event-source-polyfill": "^1.0.5",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.3.1",
    "node-sass": "^4.11.0",
    "sass": "^1.16.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "vue": "^2.5.21",
    "vue-class-component": "^6.0.0",
    "vue-loader": "^14.2.2",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.2",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-middleware": "^3.5.0",
    "webpack-hot-middleware": "^2.24.3"
    },
    "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-typescript": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "css-loader": "^2.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.5.21"
    },
    "postcss": {
    "plugins": {
    "autoprefixer": {}
    }
    },
    "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
    ]
    }

    My webpack.config.js:

    const path = require('path');
    const webpack = require('webpack');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
    const bundleOutputDir = './wwwroot/dist';

    module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    return [{
    stats: { modules: false },
    context: __dirname,
    resolve: { extensions: [ '.js', '.ts' ] },
    entry: { 'main': './src/main.ts' },
    module: {
    rules: [
    { test: /\.vue\.html$/, include: /src/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
    { test: /\.ts$/, include: /src/, 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' }
    ]
    },
    output: {
    path: path.join(__dirname, bundleOutputDir),
    filename: '[name].js',
    publicPath: 'dist/'
    },
    plugins: [
    new CheckerPlugin(),
    new webpack.DefinePlugin({
    'process.env': {
    NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
    }
    }),
    new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./wwwroot/dist/vendor-manifest.json')
    })
    ].concat(isDevBuild ? [
    // Plugins that apply in development builds only
    new webpack.SourceMapDevToolPlugin({
    filename: '[file].map', // Remove this line if you prefer inline source maps
    moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
    })
    ] : [
    // Plugins that apply in production builds only
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin('site.css')
    ])
    }];
    };

    What am I doing wrong?

    Thursday, January 17, 2019 2:12 PM

All replies

  • User-474980206 posted

    you don't show your src, but it looks like you are using inline templates without adding a compiler support for it.  I  use react / babel /webpack rather than vue or typescript (), but you probably a missing a typescript plugin as looks like you are using typescript rather than babel.

    but your setup is odd. your package says you are using the vue cli for build, and web pack for post processing. but your web pack is also trying to build typescript? it also looks like you are using a an old web pack template for an early version of vue.

    I'd start over with the vue-ci as you have it installed.

    vue create <appname>

    hint: if you are using the spa static file handler, the app name should be clientapp, and you run it from the root of your project. 

     

    Thursday, January 17, 2019 4:55 PM