npm run watch doesn't work without babel-preset-stage-2 installed

[amadeann]

I am not an expert in npm/node, so please excuse me if I use wrong terms.

When I tried to compile assets in my app with npm run watch after pulling in vue-fullcalendar, I was getting the following error:

ERROR in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-
runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vue-full-calendar/components/FullCalendar.vue
Module build failed: Error: Couldn't find preset "stage-2" relative to directory "C:\\Users\\Amade\\MY_APP\\node_modules\\vue-full-calendar"

I was able to fix the issue by installing the missing babel preset:

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

[BrockReece]

Hey, thanks for letting us know. What babel presets did you have before installing that?

I am going to work on using Rollup to transpile this package into a UMD which should take care of all the babel stuff for you.

[emperorjm]

I was unable to compile without installing the "babel-preset-stage-2" package as well.

[amadeann]

@BrockReece Sorry for the super late reply. I missed your question somehow.

To be honest, I am not sure if even used any preset before. I had whatever comes by default with Laravel 5.5. Do you know by any chance how could I check it?

[bbashy]

Getting the same error. Had to yarn add babel-preset-stage-2 --dev

[steven87vt]

Tagging in on this topic as I feel it relates close enough to this issue I ran into, its along the lines of babble configurations. However, not with run watch as were using dotnet runtime. I was messing around with versions of fullcalendar and found with version ~4.0.0-0 if you do not have bable-preset-env installed my webpack build fails.

package.json:

"dependencies": {
    "vue-full-calendar": "~4.0.0-0"
    ...
 },
"devDependencies": {
    "aspnet-webpack": "^2.0.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-async-to-generator": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-register": "^6.18.0"
}

npm run cross-env NODE_ENV=development webpack --progress --hide-modules

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-full-calendar/components/FullCalendar.vue
Module build failed: Error: Couldn't find preset "env" relative to directory "C:\\somePath\\node_modules\\vue-full-calendar"
    at c:\\somePath\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19

Adding bable-preset-env to my dev dependencies solves the problem. Im wondering if the documentation should be updated to express that you need to provide a babble env configuration or accept the defaults?

[BrockReece]

Hi everyone, thanks for your feedback and patience with this.

Ideally we wouldn't have to depend on babel-preset-stage-2 and bable-preset-env at all, the only reason we are including it at that people still using browserify require a .babel.rc file at the root of the project for this to work in their projects.

Maybe the quickest resolution would be to add these to the dependencies of this project. Some other options would be to compile this package down to browser ready JS and pointing NPM at that or maybe I could re-evaluate the browserify use case, see if there is some magic I could pull in the package.json?

Looking at all of the other issues open at the moment, I think that creating a browser friendly js bundle would kill a lot of birds with one stone.