javascript - How to use webpack with babel-loader and flow - Stack Overflow

admin管理员组

文章数量:1306926

I'm struggling with what I feel shouldn't be too hard of a setup. I want these three technologies to work together:

• webpack to bundle code
• babel so that I'm able to write modern JavaScript
• flow because type checking is helpful just like tests and linter

I've already gone trough several setups of this but none of the articles I've found on the web appears to be helpful.

---

I've defined 3 scripts in my package.json, run, flow and build. Typechecking with yarn run flow works perfectly, and so does executing the script trough babel-node using yarn run start.

But when I execute yarn run build the following error appears trough webpack:

$ ./node_modules/webpack/bin/webpack.js
Hash: 207d42dac5784520fc99
Version: webpack 3.10.0
Time: 49ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.65 kB       0  [emitted]  main
   [0] ./src/main.js 181 bytes {0} [built] [failed] [1 error]

ERROR in ./src/main.js
Module parse failed: Unexpected token (3:5)
You may need an appropriate loader to handle this file type.
| // @flow
|
| type Foo = {
|   foo: string,
| };
error Command failed with exit code 2.

It appears to me that the type annotations don't get removed correctly at the right point. Sadly this also happend if I specify the babel options in webpack directly as opposed to the .babelrc.

This currently defeats me in bundling up a bunch of .js files whilst using flow and while I found several plugins that supposedly strip flow annotations simply using the flow preset is what flowtype appears to remend.

---

For reproducibillity, my project files look like this:

package.json:

{
  …
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-flow": "^6.23.0",
    "flow-bin": "^0.60.1",
    "webpack": "^3.9.1"
  },
  "scripts": {
    "build": "./node_modules/webpack/bin/webpack.js",
    "start": "./node_modules/babel-cli/bin/babel-node.js src/main.js",
    "flow": "./node_modules/flow-bin/cli.js"
  }
}

.flowconfig:

[include]
./src

[ignore]

[libs]

[lints]

[options]

.babelrc:

 {
   "presets": ["env", "flow"]
 }

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js',
  },
  resolve: {
    modules: [
      path.resolve('./src/'),
      'node_modules',
    ],
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: '/.js$/',
        loader: 'babel-loader',
      },
    ],
  },
};

src/main.js:

// @flow

type Foo = {
  foo: string,
};

const defaultFoo: Foo = {
  foo: 'bar',
};

console.log(defaultFoo);

I'm struggling with what I feel shouldn't be too hard of a setup. I want these three technologies to work together:

• webpack to bundle code
• babel so that I'm able to write modern JavaScript
• flow because type checking is helpful just like tests and linter

I've already gone trough several setups of this but none of the articles I've found on the web appears to be helpful.

---

I've defined 3 scripts in my package.json, run, flow and build. Typechecking with yarn run flow works perfectly, and so does executing the script trough babel-node using yarn run start.

But when I execute yarn run build the following error appears trough webpack:

$ ./node_modules/webpack/bin/webpack.js
Hash: 207d42dac5784520fc99
Version: webpack 3.10.0
Time: 49ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.65 kB       0  [emitted]  main
   [0] ./src/main.js 181 bytes {0} [built] [failed] [1 error]

ERROR in ./src/main.js
Module parse failed: Unexpected token (3:5)
You may need an appropriate loader to handle this file type.
| // @flow
|
| type Foo = {
|   foo: string,
| };
error Command failed with exit code 2.

It appears to me that the type annotations don't get removed correctly at the right point. Sadly this also happend if I specify the babel options in webpack directly as opposed to the .babelrc.

This currently defeats me in bundling up a bunch of .js files whilst using flow and while I found several plugins that supposedly strip flow annotations simply using the flow preset is what flowtype appears to remend.

---

For reproducibillity, my project files look like this:

package.json:

{
  …
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-flow": "^6.23.0",
    "flow-bin": "^0.60.1",
    "webpack": "^3.9.1"
  },
  "scripts": {
    "build": "./node_modules/webpack/bin/webpack.js",
    "start": "./node_modules/babel-cli/bin/babel-node.js src/main.js",
    "flow": "./node_modules/flow-bin/cli.js"
  }
}

.flowconfig:

[include]
./src

[ignore]

[libs]

[lints]

[options]

.babelrc:

 {
   "presets": ["env", "flow"]
 }

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js',
  },
  resolve: {
    modules: [
      path.resolve('./src/'),
      'node_modules',
    ],
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: '/.js$/',
        loader: 'babel-loader',
      },
    ],
  },
};

src/main.js:

// @flow

type Foo = {
  foo: string,
};

const defaultFoo: Foo = {
  foo: 'bar',
};

console.log(defaultFoo);

• javascript
• webpack
• babeljs
• flowtype
• babel-loader

Share Improve this question Follow asked Dec 13, 2017 at 22:27 Fiona RungeFiona Runge 2,31177 gold badges3838 silver badges5151 bronze badges 2

• 2 Try to specify presets in loader options in webpack.config: test: '/.js$/', use: { loader: 'babel-loader', options: { presets: ['env', 'flow',] } } – Aleksey L. Commented Dec 14, 2017 at 6:51
• I've tried that (before and again now), and I get the same error. I've also tried using only the flow preset without env or switching their order. – Fiona Runge Commented Dec 14, 2017 at 7:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Download the relevant presets and add them to the webpack.config.js as follows:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_ponents)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'stage-0', 'react']
        }
      }
    }
  ]
}

I was able to find a quick and easy way also....

https://babeljs.io/docs/babel-preset-flow

My .babelrc file looks like this

{
 "presets": [["@babel/preset-env"],["@babel/preset-flow"]]
}

and Install the Flow preset

npm install --save-dev @babel/preset-flow

本文标签： javascriptHow to use webpack with babelloader and flowStack Overflow