Error: WebPack

[ghost]

Hello,
I try to use your calendar but I get:

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&bustCache!./node_modules/vue-simple-calendar/src/components/calendar-month.vue Module build failed: Error: Couldn't find preset "stage-2" relative to directory "C:\\Users\\umignon\\projects\\capability\\node_modules\\vue-simple-calendar" at C:\Users\umignon\projects\capability\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19 at Array.map (<anonymous>) at OptionManager.resolvePresets (C:\Users\umignon\projects\capability\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20) at OptionManager.mergePresets (C:\Users\umignon\projects\capability\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10) at OptionManager.mergeOptions (C:\Users\umignon\projects\capability\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14) at OptionManager.init (C:\Users\umignon\projects\capability\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) at File.initOptions (C:\Users\umignon\projects\capability\node_modules\babel-core\lib\transformation\file\index.js:212:65) at new File (C:\Users\umignon\projects\capability\node_modules\babel-core\lib\transformation\file\index.js:135:24) at Pipeline.transform (C:\Users\umignon\projects\capability\node_modules\babel-core\lib\transformation\pipeline.js:46:16) at transpile (C:\Users\umignon\projects\capability\node_modules\babel-loader\lib\index.js:50:20) at C:\Users\umignon\projects\capability\node_modules\babel-loader\lib\fs-cache.js:118:18 at ReadFileContext.callback (C:\Users\umignon\projects\capability\node_modules\babel-loader\lib\fs-cache.js:31:21) at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:421:13) @ ./node_modules/vue-simple-calendar/src/components/calendar-month.vue 8:21-364 @ ./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&bustCache!./resources/assets/js/components/fullCalendar.vue @ ./resources/assets/js/components/fullCalendar.vue @ ./resources/assets/js/vue.js @ ./resources/assets/js/app.js @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\umignon\AppData\Roaming\npm-cache_logs\2017-12-15T14_48_05_818Z-debug.log
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

here is my app.vue:

<template>
        <calendar-month
                :show-date="showDate"
                @setShowDate="setShowDate"
                class="holiday-us-traditional holiday-us-official"
        />
</template>
<script>
    import CalendarMonth from 'vue-simple-calendar/src/components/calendar-month'
    require("vue-simple-calendar/static/css/default.css")
    require("vue-simple-calendar/static/css/holidays-us.css")

    export default {
        data: function() {
            return { showDate: new Date() }
        },
        components: {
            CalendarMonth
        },
        methods: {
            setShowDate(d) {
                this.showDate = d;
            },
        }
    }
</script>
<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        color: #2c3e50;
        height: 67vh;
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }
</style>

here is my app.js:

import Vue from 'vue';
import app from './components/app.vue';

new Vue({
    el: '#app',
    components: {
        app
    }
});

Thanks for your replys !

[jclark-mossio]

I am having the same issue

[richardtallent]

Seems like some sort of dev dependency issue... I probably broke something in package.jsom. I admit node and Babel stuff isn’t my strong suit, but I’ll see if I can reproduce and figure it out this weekend.

In the meantime, can you tell me your version of node and n0pm?

[richardtallent]

I believe I found the culprit... the babel config was referencing an unnecessary preset. Please update to version 1.7.1 and see if that resolves the issue. Thanks!

[jclark-mossio]

@richardtallent thanks for taking a look at this. Upgrading it on my end did not work. Hre is my log file

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'production' ]
2 info using npm@5.6.0
3 info using node@v7.4.0
4 verbose run-script [ 'preproduction', 'production', 'postproduction' ]
5 info lifecycle @~preproduction: @
6 info lifecycle @~production: @
7 verbose lifecycle @~production: unsafe-perm in lifecycle true
8 verbose lifecycle @~production: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/jeffclark/Documents/websites/projects/laravel/nucleus/node_modules/.bin:/Users/jeffclark/.phpbrew/php/php-7.0.16/bin:/Users/jeffclark/.phpbrew/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Frameworks/Mono.framework/Versions/Current/Commands
9 verbose lifecycle @~production: CWD: /Users/jeffclark/Documents/websites/projects/laravel/nucleus
10 silly lifecycle @~production: Args: [ '-c',
10 silly lifecycle 'cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js' ]
11 silly lifecycle @~production: Returned: code: 2 signal: null
12 info lifecycle @~production: Failed to exec production script
13 verbose stack Error: @ production: cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
13 verbose stack Exit status 2
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack at emitTwo (events.js:106:13)
13 verbose stack at EventEmitter.emit (events.js:191:7)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at emitTwo (events.js:106:13)
13 verbose stack at ChildProcess.emit (events.js:191:7)
13 verbose stack at maybeClose (internal/child_process.js:885:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
14 verbose pkgid @
15 verbose cwd /Users/jeffclark/Documents/websites/projects/laravel/nucleus
16 verbose Darwin 16.7.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "production"
18 verbose node v7.4.0
19 verbose npm v5.6.0
20 error code ELIFECYCLE
21 error errno 2
22 error @ production: cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
22 error Exit status 2
23 error Failed at the @ production script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

[jclark-mossio]

Also this is the error when building

ERROR Failed to compile with 1 errors 8:59:56 AM

error

/js/app.01fb2841f5c492f53950.js from UglifyJs
Unexpected token: punc (() [./~/vue-simple-calendar/src/components/mixin-calendarMath.js:16,0][/js/app.01fb2841f5c492f53950.js:32788,7]

[richardtallent]

What does your babel config look like? The second error suggests your environment isn't set up to build from ES6 / ECMAScript 2015 source code, since it's bailing on the shorthand notation for function declaration in the mixin.

We have the same version of npm, I'm using an older version of node but I can't imagine that would be the issue.

Reopening until we can figure it out...

[richardtallent]

Follow-up -- I just spent a few hours rebuilding my other component, vue-stars, because I was having trouble using it as well in a separate app. Decided to split the component from the sample app so the resulting npm package is dirt-easy to use. I think I'm going to do the same with this one. I'm still not exactly sure what the problem is, but I have some suspicions and I think this will clear up the issue.

[richardtallent]

I've split up the calendar component from its sample app... painful but I think necessary, the PWA template used for the sample app just isn't good for publishing a component. Please give the latest version a shot (1.8.1, live on npm). Your import and require statements should be adjusted (see the readme for the current sample code). I'll leave this open until you can confirm it's working...

[jclark-mossio]

@richardtallent Thanks for working on this! I will work on getting it updated on my end to see if we can build. We were able to build for production by manually running the mixin-calendarMath.js through a babel compiler then putting the file back in. Obviously not a good long-term solution for us, but allowed us to deploy. I really appreciate you working on this fix for us!

[ghost]

@richardtallent Works Fine thank's !