Nuxt.js: flowtype support

[coolguy1990]

I'm trying to include flowtype support in my app, but its throwing error and so far i have been unable to solve the issue. P.S. I do have a vue.js project with this exact same config and it works.

.babelrc
{
  "presets": [
    ["env", { "modules": false }],
    "stage-2",
    ["es2015", {"modules": false }],
    "flow-vue"
  ],
  "plugins": [
    "transform-runtime",
    "babel-plugin-transform-class-properties",
    "syntax-flow",
    "babel-plugin-transform-flow-strip-types"
  ],
  "comments": false
}

.eslintrc.js
// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: [
    'standard',
    'plugin:flowtype/recommended'
  ],
  // required to lint *.vue files
  plugins: [
    'html',
    'flowtype-errors',
    'flowtype'
  ],
  // add your custom rules here
  'rules': {
    'flowtype-errors/show-errors': 2,
    // allow paren-less arrow functions
    'arrow-parens': 0,
    'semi': ["error", "always"],
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

.flowconfig
[include]
pages/**/.*
components/**/.*
plugins/.*

[ignore]
.*/build/.*
.*/config/.*
.*/dist/.*
.*/node_modules/.*
.*/static/.*
.*/test/.*
.*/ssl/.*

[libs]
./flow/

[options]
emoji=true
module.file_ext=.vue
module.file_ext=.js
server.max_workers=3
log.file=./flow.log
suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
unsafe.enable_getters_and_setters=true
module.system.node.resolve_dirname=node_modules
module.name_mapper='^.*\.css$' -> 'empty/object'
module.name_mapper='^.*\.js$' -> 'empty/object'



md5-a684efb701c8f1221ede583d8cc751f7



pages/index.vue
methods: {
    testing(param: Object) {

    }
  }

On running npm run dev

this is the error i get.

Also, if i run node_modules/.bin/flow check it works properly. And if i remove the flowtypes, eslint throws error to add flowtype annotations.

_{This bug report is available on Nuxt.js community (#c1417)}

[dohomi]

I'd be interested in a solution as well +1. Maybe a module which covers all setup for flow support would be great

[coolguy1990]

Update: nuxt seems to work properly when i run npm run build throws errors perfectly and all. But it seems to fail only on running npm run dev . I believe the way the dev build is being handled, its somehow not parsing flowtype annotations i guess.

[qm3ster]

I see how your plain vue app was set up, but can you please post exactly what modifications you did to your nuxt app?

[qm3ster]

Also, why are you using babel-preset-env and babel-preset-es2015 together?

[adi-zz]

@alexchopin are you aware of any project using this stack: webpack + babel + eslint + flow + nuxt? Just like OP I can't make flow and nuxt work together and I'm wondering if someone made it.

[dohomi]

@alexchopin is there any example available for the right usage of flow? Thanks

[nandordudas]

I made a very simple config and its working - it works on adonuxt too, but only in the nuxt part (for time being 😄)

https://gist.github.com/nandordudas/9f6c8d4ea04b99010a102bb0faf5fd3f

[adi-zz]

@nandordudas
By "it works [..] only in the nuxt part" you mean that you can not benefit of flow in <script> tag of a *.vue component? That's where I am stuck now. If the answer is yes, did you see this article? I wasn't able to successfully implement what the article says, I'm curious if you could do that.

[nandordudas]

You'r right, hm I'm looking for the good answer and I will be back soon 💣

[Extarys]

Hmm where did you get flowtype for nuxt/vue? :smile: I'm very interested!

[nandordudas]

@Extarys me too :( - only one case if i separate a vue file (but in this case i literally do nothing)

[Extarys]

@nandordudas Yesterday I played a little.
My current kind-of working solution
yarn global add flow-typed
flow-typed create-stub Create any type for every modules

nuxt.config.js

build: {
        babel: {
            presets: [ 'env', 'flow', 'vue-app' ],
            plugins: [ 'transform-flow-strip-types' ],
        },
...

In my store/index.js:

setLogoutTimer ({ dispatch }: {dispatch: object}, expirationTime: number) {
                                               ^ required-current wokring solution, still have discution on flow on how to manage this.
        // TODO: check if Remember Me is checked, verify the expirationTime is indeed an integer
        setTimeout(() => {
            dispatch('logout');
        }, expirationTime * 1000);
    },

[sobolevn]

For anyone having problems setting up nuxt + flow - here's the template that does it pretty well: https://github.com/wemake-services/wemake-vue-template

[nandordudas]

@sobolevn Thank You!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.