Vuetable-2: Module build failed: Error: Couldn't find preset "es2015"

[ahmedfaical]

Hello Ratiw, i get this error in console and in npm run watch and really i don't found how can i resolve it ?

Uncaught Error: Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/mac/webSto/node_modules/vuetable-2"
at /Users/mac/webSto/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/Users/mac/webSto/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/mac/webSto/node_modules/babel-loader/lib/index.js:46:20)
at /Users/mac/webSto/node_modules/babel-loader/lib/fs-cache.js:79:18
at ReadFileContext.callback (/Users/mac/webSto/node_modules/babel-loader/lib/fs-cache.js:15:14)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:359:13)
at /Users/mac/webSto/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/Users/mac/webSto/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/Users/mac/webSto/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/mac/webSto/node_modules/babel-loader/lib/index.js:46:20)
at /Users/mac/webSto/node_modules/babel-loader/lib/fs-cache.js:79:18
at ReadFileContext.callback (/Users/mac/webSto/node_modules/babel-loader/lib/fs-cache.js:15:14)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:359:13)
at Object.<anonymous> (http://localhost/assets/js/section/caproducts.js:30452:7)
at __webpack_require__ (http://localhost/assets/js/section/caproducts.js:20:30)
at Object.module.exports.render._vm (http://localhost/assets/js/section/caproducts.js:30461:3)
at __webpack_require__ (http://localhost/assets/js/section/caproducts.js:20:30)
at Object.<anonymous> (http://localhost/assets/js/section/caproducts.js:30823:93)
at __webpack_require__ (http://localhost/assets/js/section/caproducts.js:20:30)
at Object.module.exports.render._vm (http://localhost/assets/js/section/caproducts.js:31021:3)
at __webpack_require__ (http://localhost/assets/js/section/caproducts.js:20:30)
at Object.defineProperty.value (http://localhost/assets/js/section/caproducts.js:30801:36)
at __webpack_require__ (http://localhost/assets/js/section/caproducts.js:20:30)

I use this commande to resolve the probleme :
npm install babel-plugin-transform-runtime babel-preset-stage-2 --save-dev
But nothing resolved

[ratiw]

@leonfather Have you try the solution in this issue?

I might not be able to help you much as I don't know much about babel and webpack. I just use the vue-cli to generate the project for me.

[cristijora]

Can you detail on what setup you use for building vue components and how did you import the component?
I guess the main issue is that for the current version the importing of vue-table requires importing the .vue files and assumes an ES2015 setup.
@ratiw I think that when you publish the new npm version we have the main file pointing to the built js file from dist folder. The import of the components can now become:

import Vuetable from 'vuetable-2' 
//or
var Vuetable = require('vuetable-2')
Vue.use(Vuetable)

and from there on you don't really care if you have es2015 installed or any kind of internal stuff that is used in the vue-table .vue files. If you need more control then you can import the vue files
import Vuetable from 'vuetable-2/src/components/Vuetable' and this would assume that you need es2015 or whatever the vuetable repo uses internally.

[ratiw]

@cristijora Already did as you suggested here.

I think I'll have to merge the develop branch back to master and publish it now. At first, I think I'm going to wait until all the documentation is finished.

[cristijora]

Yeah that would solve config issues across different vue setups because the bundle is a simple js file.
Also you might want to take a look at #123 as it reduces the bundle size by half

[ratiw]

@cristijora Many thanks 👍

[ianrussel]

Having same issue here..

[ianrussel]

Having same issue here.. It took me a week to solve this problem that I almost give up vuetable-2 , as I dig deeper, I realised that this errors does not show in vue-cli, . So if your using Symfony or Laravel, you can just

yarn add babel-preset-es2015

Then create a .babelrc file in your root folder

{ "presets": ["es2015"] }

This solves my problem

[chenbuer]

I encounter the same problem, and @ianrussel solution solve my problem.
thx

[atav32]

Similar to https://github.com/JeffreyWay/laravel-mix/issues/158

add a .babelrc or use

{
    "presets": [
        ["es2015", { "modules": false }]
    ]
}

[cristijora]

@atav32 Would suggest babel-preset-env instead of es2015. Babel pretty much moved to a single preset which is env and supports most of the new js features

"presets": [
        ["env", { "modules": false }]
    ]

[Greko2017]

This command solved my issue :
npm install babel-preset-es2015
from habouthnnah in stackoverfow
https://stackoverflow.com/questions/40188578/webpack-babel-couldnt-find-preset-es2015-relative-to-directory#