problem with flow?

[stlbucket]

https://github.com/stlbucket/vue-graphiql

in the above repo, i have created a new vue cli 3 app, then tried to incorporate the graphiql react component via vuera

i've been able to get past a number of webpack hurdles, but there seems to be a problem with some flow files when running yarn serve

 warning  in ./node_modules/graphql-language-service-interface/dist/getDiagnostics.js.flow

Module parse failed: Unexpected token (11:12)
You may need an appropriate loader to handle this file type.
|  */
|
> import type {
|   ASTNode,
|   DocumentNode,

 @ ./node_modules/graphql-language-service-interface/dist sync ^.*$
 @ ./node_modules/graphql-language-service-interface/dist/GraphQLLanguageService.js
 @ ./node_modules/graphql-language-service-interface/dist/index.js
 @ ./node_modules/codemirror-graphql/hint.js
 @ ./node_modules/graphiql/dist/components/QueryEditor.js
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/babel-loader/lib??ref--14!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.100:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

this happens for seven files, i believe, and always at the import directive.

https://github.com/vuejs/vue-cli/issues/1810 and https://www.npmjs.com/package/flow-babel-webpack-plugin

are the last two things i've come to, but the plugin seems to have no effect.

vue.config.js:

const FlowBabelWebpackPlugin = require('flow-babel-webpack-plugin');
const path = require('path')

module.exports = {
  pluginOptions: {
    apollo: {
      enableMocks: true,
      enableEngine: false
    }
  },
  devServer: {
    proxy: {
      "/graphql": {
        target: "http://localhost:5000"
      }
    }
  },
  configureWebpack: {
    plugins: [
      new FlowBabelWebpackPlugin()
    ],
    resolve: {
      alias: {
        graphql$: path.resolve(__dirname, 'node_modules/graphql/index.js')
      },
      extensions: [ '.flow', '.mjs', '.js', '.json', '.jsx', '.css' ]
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            cacheDirectory: true,
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      ]
    }
  }
}

package.json:

{
  "name": "vue-graphiql",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bfj": "^6.1.1",
    "graphiql": "^0.12.0",
    "graphql": "^13.0.2",
    "prop-types": "^15.6.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "vue": "^2.5.17",
    "vuera": "^0.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@vue/cli-plugin-babel": "^3.0.3",
    "@vue/cli-plugin-eslint": "^3.0.3",
    "@vue/cli-service": "^3.0.3",
    "babel-loader": "^8.0.2",
    "flow-babel-webpack-plugin": "^1.1.1",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

[akxcv]

Weird, will these errors disappear if you remove vuera?

[stlbucket]

well, i can't remove vuera since it is what i'm using to wrap the react component.... so i'm not sure exactly what you're asking.

[akxcv]

It looks like there's something not right with the Webpack/Babel config maybe? Because it's failing to parse Flow syntax, which should have nothing to do with vuera.

[akxcv]

It seems that vue-loader is trying (and failing) to parse Flow syntax. I'm not sure why that happens, though.