npm compile errors: .babelrc, transform-runtime, stage-2

[bubjavier]

hi,

first of all, thanks for this great project and all the great work the team put on this.

so I've been playing around on some of the tutorials and decided to add it as a nodejs package to my test project using Laravel 5.4, I am using webpack and vuejs2. I have no problem installing vuetable-2 via npm, but when I try to import it to my app.js:

import Vuetable from 'vuetable-2/src/components/Vuetable'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'

.. and try to compile it (npm run dev), I am getting an error causing the bundle to prevent from compiling. here's the exact error message I got: (stripped paths to my local dirs)

bub:~/vrs $ npm run watch

> @ watch /full/path/to/my/project
> node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 1/1 modules 0 active
Webpack is watching the files…

 95% emitting
 ERROR  Failed to compile with 3 errors

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

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/full/path/to/my/project/node_modules/vuetable-2/.babelrc" at 0, attempted to resolve relative to "/full/path/to/my/project/node_modules/vuetable-2"
    at /full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:233:36)
    at OptionManager.init (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
    at File.initOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (/full/path/to/my/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/full/path/to/my/project/node_modules/babel-loader/lib/index.js:38:20)
    at /full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:78:18
    at ReadFileContext.callback (/full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:14:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)

 @ ./~/vuetable-2/src/components/Vuetable.vue 7:2-170
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

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

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/full/path/to/my/project/node_modules/vuetable-2/.babelrc" at 0, attempted to resolve relative to "/full/path/to/my/project/node_modules/vuetable-2"
    at /full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:233:36)
    at OptionManager.init (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
    at File.initOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (/full/path/to/my/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/full/path/to/my/project/node_modules/babel-loader/lib/index.js:38:20)
    at /full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:78:18
    at ReadFileContext.callback (/full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:14:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)

 @ ./~/vuetable-2/src/components/VuetablePagination.vue 3:2-180
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

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

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/full/path/to/my/project/node_modules/vuetable-2/.babelrc" at 0, attempted to resolve relative to "/full/path/to/my/project/node_modules/vuetable-2"
    at /full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:233:36)
    at OptionManager.init (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
    at File.initOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (/full/path/to/my/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/full/path/to/my/project/node_modules/babel-loader/lib/index.js:38:20)
    at /full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:78:18
    at ReadFileContext.callback (/full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:14:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)

I tried to look for any guide related to proper npm installation, cause I might missing something that causes the error, but cant find unfortunately, so I tried to open the files involved and play a bit on the terms mentioned on the error (not an expert on nodejs), so I tried playing on the values inside node_modules/vuetable-2/.babelrc file, I tried to drop the: "plugins": ["transform-runtime"], line completely, and removed stage-2 from presets field. so the new value would be:

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

again, am a BEGginer for nodejs, and I dont quite understand yet the full extend of the changes i did, but it works, and I can successfully run vuetable-2 with laravel and webpack. just thought it might be helpful for the team or whoever encounters the same error I did, It's just I dont feel comfortable making any custom changes on vendor library files, and would rather report it to the authors.

[ratiw]

@bubjavier Many thanks for your input!

I haven't had time to play around with Laravel 5.4 yet, so I haven't learned about this until you created the issue. I'm not an expert on the webpack related issues as well.

The Vuetable component is build using vue-cli which creates most of the boilerplate for me and transform-runtime and stage-2 was included by default. I'm not sure if they are required or not, but I think the appropriate way of fixing this is to install those 2 babel libraries using this command:

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

After that, laravel-mix should compile successfully.

[mevtho]

I had the same issue, running the command @ratiw mentioned fixed it.

Thanks

[acacha]

Error here after:

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

Error: Couldn't find preset "es2015" relative to directory "/home/sergi/Code/acacha/users/sandbox/node_modules/vuetable-2"

[acacha]

@bubjavier

Solved adding:

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

Maybe it could be useful not to suppose all this package are installed? Not everyone will use vue-cli for using vuetable-2 so it could be useful that all this dependencies appears at vuetable-2 package.json?

[cristijora]

You can always use

import VueTable from 'vuetable-2'
Vue.use(VueTable)

and not worry about any presets or loader related stuff.

[viewplatgh]

@cristijora Using import VueTable from 'vuetable-2' can work for Vuetable, but what to use to import VuetablePagination and VuetablePaginationInfo then?

[rafadpedrosa]

having the same issue from @cristijora (u solve this?)

[cristijora]

@viewplatgh @rafadpedrosa you can look at the main file which declares the exports https://github.com/ratiw/vuetable-2/blob/master/src/index.js

you can import some components like this import {VuetablePagination, VuetablePaginationInfo} from 'vuetable-2' You can basically import all components listed here

PS: The default behavior for Vue.use(VueTable) will basically run this function and register these 3 components globally

Vue.component("vuetable", Vuetable);
  Vue.component("vuetable-pagination", VuetablePagination);
  Vue.component("vuetable-pagination-dropdown", VuetablePaginationDropDown);
  Vue.component("vuetable-pagination-info", VuetablePaginationInfo);

If you don't want that you could import them separately as shown above :) Hope this helps

[bubjavier]

thanks for all your inputs. the succeeding release of babel and vue fixed my issue without using my (hacked and unsure) solution. closing this issue.