Vuetable-2: Unknown plugin "transform-runtime"

[Shhu]

Hi,

I'm trying to use vuetable-2 but after yarn add vuetable-2 i have this error :

ERROR in ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vuetable-2/src/components/Vuetable.vue

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "F:\\dev\\Project\\node_modules\\vuetable-2\\.babelrc" at 0, attempted to resolve relative to "F:\\dev\\Project\\node_modules\\vuetable-2"

[ratiw]

@Shhu There's probably something wrong with the webpack config file. Try reinstall dependencies again using yarn upgrade or default back to npm update

[Shhu]

@ratiw I'm using Laravel Mix

"dev": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

https://github.com/JeffreyWay/laravel-mix/blob/master/setup/webpack.config.js

Dependencies :
"animate.css": "^3.5.2",
"axios": "^0.15.2",
"laravel-mix": "^0.2.8",
"lodash": "^4.16.2",
"materialize-css": "^0.97.8",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"vuetable-2": "^1.1.0"

I added vue-resource just in case but the error remain.

I even try to remove the node_modules folder to be sure.

[ratiw]

@Shhu I still haven't try Laravel Mix, so I cannot say for sure. But from the error message it looks like the babel plugin is missing. I'm not an expert on webpack at all, but I think you will need to add

"babel-plugin-transform-runtime": "^6.0.0",

to your devDependencies in packages.json as well as add a line

"plugins": ["transform-runtime"],

in your .bablerc file.

see https://babeljs.io/docs/plugins/transform-runtime/ for more info.

[Shhu]

i added "babel-plugin-transform-runtime": "^6.0.0",

Module build failed: Error: Couldn't find preset "stage-2" relative to directory "F:\\dev\\Project\\node_modules\\vuetable-2"

[Shhu]

Editing "presets": ["es2015", "stage-2"], to "presets": ["es2015"], in file vuetable-2\.babelrc
And no more errors, using https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/lesson-01.md as test and it works.

[brandonferens]

I had the same issue and also had to run

npm install --save-dev babel-preset-stage-2

[Maximus1000]

Same issue. Laravel 5.4, Vue 2.x.

run both:
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-stage-2

50k plus dl on these per day. this is a common issue. seems like not a big deal.

[itelmenko]

The same problem.

After

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-stage-2
yarn run dev

I get

error in ./~/vuetable-2/src/components/Vuetable.vue

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/vagrant/sites/vuetable-2-laravel-example/node_modules/vuetable-2"

[ratiw]

Try

npm install --save-dev babel-preset-es2015

[itelmenko]

Yes, thanks, I have already installed it. Now I have not this error.
"yarn run dev " works now.
I think it must be in documentation.

[arturhood]

Did you add vue-fuse inside of main.js?

I had problems with Babel when I placed the import/Vue.use initialization code inside of a single page template *.vue file (which gets processed by Babel/Webpack)

But if you put it in main.js, you avoid a bunch of complexity.

[austenc]

@ratiw with Laravel 5.4 and mix I had to run all three:

npm i babel-plugin-transform-runtime
npm i babel-preset-stage-2
npm i babel-preset-es2015

For what it's worth, I had a similar problem with matfish/vue-tables-2 a couple months ago, but that repo was fixed via including the proper deps always as seen here: https://github.com/matfish2/vue-tables-2/commit/37183386ec339ed367dac18bbd101fe519364695#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R39

[ratiw]

Thanks, @austenc. Can you please help by submitting the PR for that. It's really difficult for me to find time to work on the repo at the moment.

[austenc]

I'll see what I can do @ratiw -- excellent job so far!

[mailnike]

This needs to be in the docs :). Please add this in both tutorial and GitHub doc.

[Peace-N]

Mine Worked with both:

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-stage-2

Took me hours to get this ..