webpack Module parse failed

[sdemch]

Version
3.0.0-beta.7 - work fine
but "ol-mapbox-style": "^3.0.0-beta.9" - generate errors

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

ERROR Failed to compile with 7 errors13:15:45

error in ./node_modules/@mapbox/mapbox-gl-style-spec/util/color.js

Module parse failed

: Unexpected token (17:5)
You may need an appropriate loader to handle this file type.
| */
| class Color {
| r: number;
| g: number;
| b: number;

@ ./node_modules/ol-mapbox-style/index.js 23:0-60
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/pages/OlMap/OlMap.vue
@ ./src/components/pages/OlMap/OlMap.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?https://localhost:8080 webpack/hot/dev-server ./src/main.js

and etc. see atachment
rr.txt

[ahocevar]

This is not an issue with ol-mapbox-style. You'll need to modify your babel and/or webpack configuration to support ES2015 features like class. In addition, the config also needs to strip flow types (which are used by some dependencies).

For inspiration, take a look at the lib's .babelrc and webpack.config.js.

[nicky-dev]

I got same problem.
in Version 3.0.0-beta.7 - work fine (no need to config anything)

but in Version 3.0.1 - ERROR !!!!

[ahocevar]

Correct. The new expression parser was introduced with v3.0.0-beta.9. Make sure you use e.g. babel-loader or buble-loader for ol-mapbox-style's dependencies.

[nicky-dev]

how to solve it. if babel version is different.

"@babel/core": "7.0.0-beta.42",

.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-flow"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime"
]
}

[ahocevar]

@nicky-dev babel-plugin-transform-flow-strip-types is available for Babel 7, see https://www.npmjs.com/package/@babel/plugin-transform-flow-strip-types. It should be enough to add it to your plugins config section.

[nicky-dev]

Now it's work with this webpack config ...

thank you @ahocevar

[fatalcaron]

I have the same issue with Angular 6. I try to target es2015 in my tsconfig but it still doesn't work. Any advice for Angular user ?