Vue-loader: need an appropriate loader to handle this file type.

[Doogiemuc]

After upgrading my project from Vue 1.0 to Vue 2.0 I get the following error when runnin npm run dev

Full Stack Trace:

 ERROR  Failed to compile with 1 errors

 error  in ./src/services/LiquidoApiClient.js

Module parse failed: C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\babel-loader\lib\index.js!C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido
\LiquidoApiClient.js Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:5)
    at Parser.pp$4.raise (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp.expect (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:597:28)
    at Parser.pp$3.parseParenAndDistinguishExpression (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:1852:40)
    at Parser.pp$3.parseExprAtom (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:1796:19)
    at Parser.pp$3.parseExprSubscripts (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExpression (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:1573:21)
    at Parser.pp$1.parseStatement (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:638:25)
    at Parser.parse (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:516:17)
    at Object.parse (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.evaluate (C:\Doogie\Coding\IntelliJ_Doogie_Workspace\liquido-vue-frontend\node_modules\webpack\lib\Parser.js:927:18)

 @ ./src/main.js 23:24-62

> Listening at http://localhost:3001

The file LiquidoApiClient.js only contains comments on line 1 ????

To me it looks like that vue-loader has some problems loading that plain JS file? All my configs are just exactly as they are in the webpack-tempalte.

Extract from build\webpack.base.conf.js

var projectRoot = path.resolve(__dirname, '../')
[...]
module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: [
          path.join(projectRoot, 'src')
        ],
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
    [...]

Here is my full repo if that helps: https://github.com/Doogiemuc/liquido-vue-frontend

There are other very comparable issues, e.g. https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/25 but they do not give any new information: Why is babel not compiling my JS files under my own /src folder?

[Doogiemuc]

Found the solution: https://github.com/babel/babel-loader/issues/291

I inject a custom environment variable into my process.env. And when you do that with webpack-mergethen you need double quotes:

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  backendBaseURL: '"http://localhost:8080/liquido/v2"'     // NOTE THE DOUBLE QUOTES !!!
})