madskristensen / WebPackTaskRunner

A Visual Studio extension
Other
39 stars 16 forks source link

Compile Issue with latest Vue.js #47

Closed prindacerk closed 6 years ago

prindacerk commented 6 years ago

Installed product versions

Description

Created a Project using the .NET Core Templates for Vue.js. Tried building and compiling. It works fine. It builds the js files and everything. Then I updated the packages to the latest versions. Run Webpack in Task Runner again. This time, I get Syntax errors on the html files. I haven't changed the code at all. Just updated the package versions. So I have no idea why it is not compiling anymore.

Steps to recreate

1) Run dotnet new --install Microsoft.AspNetCore.SpaTemplates::* in command line to update the templates. 2) Run dotnet new vue in the folder where project should be created. 3) Open project in Visual Studio. 4) Use Webpack Task Runner to Run - Development. It should compile and output successfully. 5) Update the packages to the following versions.

{
  "name": "vue",
  "private": true,
  "version": "0.0.0",
  "devDependencies": {
    "@types/webpack-env": "^1.13.2",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^3.4.0",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.9",
    "vue": "^2.5.8",
    "vue-loader": "^13.5.0",
    "vue-property-decorator": "^6.0.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.8",
    "webpack": "^2.7.0",
    "webpack-hot-middleware": "^2.20.0"
  },
  "dependencies": {
    "@types/jquery": "^3.2.16",
    "bootstrap": "^4.0.0-beta.2",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.9",
    "typescript": "^2.6.1"
  }
}

6) Use Webpack Task Runner to Run - Development. It will throw syntax error at this stage.

Current behavior

It seems to compile the js files successfully but the html files get thrown with an error. The error message I get is the following.

cmd /c SET NODE_ENV=development&& webpack --color
Hash: 7bd19ba239f372863391
Version: webpack 2.7.0
Child
    Hash: 7bd19ba239f372863391
    Time: 7370ms
          Asset     Size  Chunks             Chunk Names
        main.js  30.6 kB       0  [emitted]  main
    main.js.map  18.8 kB       0  [emitted]  main

ERROR in ./ClientApp/components/home/home.vue.html
    Module build failed: SyntaxError: Unexpected token {
        at exports.runInThisContext (vm.js:53:16)
        at Module._compile (module.js:373:25)
        at Object.Module._extensions..js (module.js:404:10)
        at Module.load (module.js:343:32)
        at Function.Module._load (module.js:300:12)
        at Module.require (module.js:353:17)
        at require (internal/module.js:12:17)
        at Object.<anonymous> (D:\Vue\node_modules\vue-loader\index.js:1:18)
        at Module._compile (module.js:397:26)
        at Object.Module._extensions..js (module.js:404:10)
        at Module.load (module.js:343:32)
        at Function.Module._load (module.js:300:12)
        at Module.require (module.js:353:17)
        at require (internal/module.js:12:17)

Expected behavior

cmd /c SET NODE_ENV=development&& webpack --color
Hash: 43d8bab34bcf9ab07cc2
Version: webpack 2.6.1
Child
    Hash: 43d8bab34bcf9ab07cc2
    Time: 6468ms
          Asset    Size  Chunks             Chunk Names
        main.js  109 kB       0  [emitted]  main
    main.js.map  132 kB       0  [emitted]  main
Process terminated with code 0.

I don't know why this is happening and how to resolve it. But if I execute the commands manually in Powershell, it runs successfully.

PS D:\Vue> cmd /c SET NODE_ENV=development
PS D:\Vue> webpack --color
Hash: a6abe152b7b6bdb8f7ad
Version: webpack 2.7.0
Child
    Hash: a6abe152b7b6bdb8f7ad
    Time: 2175ms
          Asset    Size  Chunks             Chunk Names
        main.js  126 kB       0  [emitted]  main
    main.js.map  149 kB       0  [emitted]  main

So I don't think it's the webpack itself is the issue. It's something else and I need your help determining what the issue and how to resolve it.

prindacerk commented 6 years ago

It seems the issue is resolved based on the instructions for another topic. https://github.com/madskristensen/NpmTaskRunner/issues/47#issuecomment-277488231

By doing what is instructed there as the solution, this issue is resolved as well.