ERROR in ./node_modules/vue-crono/index.js

[1Mpuls3]

Hi,

I get this error when I run my app 👍

ERROR in ./node_modules/vue-crono/index.js Module parse failed: Unexpected token (61:53) You may need an appropriate loader to handle this file type. | if (cron.method === method){ | locatedCronMethod = true; | createTimer.call(this, { ...cron, autoStart: true}); | } | }); @ ./src/main.js 111:16-36 @ multi ./build/dev-client ./src/main.js

main.js

// cron job
import crono from 'vue-crono'
Vue.use(crono)

tpl.vue

...
methods: {
  test () {
    console.log(new Date().toLocaleTimeString())
  },
},
cron:{
  time: 1000,
  method: 'test'
}

Any idea why this is happening?

[BrianRosamilia]

You are using node <=8.2.1 aren't you? (type node --version in console if you aren't sure how to see this)

I believe webpack is not sure what to do with the object spread and thinks you are trying to load a pre-transpiled file. (since line 61 is an object spread in index.js of vue-crono)

https://node.green/#ES2018-features-object-rest-spread-properties-object-spread-properties

I should add the minimum node version in package.json. It's probably 8.6.0

[1Mpuls3]

My node version is higher though

XXXXX\Projects\bulk>node --version v10.15.1

[BrianRosamilia]

Wow, evidently Webpack doesn't care (use parcel instead if you have a choice lol)

https://stackoverflow.com/questions/42506994/you-may-need-an-appropriate-loader-to-handle-this-file-type-error

https://github.com/webpack/webpack/issues/5548

You can see that this is the issue if you put this into your webpack entrypoint. You will get the same error unless your configuration is changed :/ probably better to fix this now and be able to use modern JS features 👍

const x = { a: 1, b: 2};
const y = { c: 3 };
const z = { ...x, ...y };

[BrianRosamilia]

Happy to help you if you see something I'm not seeing (or just need help with your next steps even though I don't use webpack) but I'll close this for now just to keep things clean 👍

[rljoia]

Hi,

I am having exactly the same problem. I am using vue 2, node 12.10.0, npm 7.5.2, and the latest version of vue-crono. It is important to say that webpack comes with vue and is included on every project created by command line.

[1Mpuls3]

Apologize, I forgot to answer at the time, it's a little far in my memory now, but i believe babel config is what fixed my issue as you can read in the stackoverflow @BrianRosamilia linked.

You will probably need to install the preset too : npm install babel-preset-es2015 --dev

my .babelrc looks like this

{ "presets": ["es2015", "stage-2"], "plugins": ["transform-vue-jsx", "transform-runtime"] }

you should just need the es2015 line though.

{ "presets": ["es2015", }

I hope it helps, I've been using vue-crono for a while now so it should work with this.

[rljoia]

@1Mpuls3 thanks for the comment.

I installed babel-preset-es2015 and updated my .babelrclike you said, but I my error still remains:

ERROR in ./node_modules/vue-crono/index.js
Module parse failed: Unexpected token (60:45)
You may need an appropriate loader to handle this file type.
|                 if (cron.method === method){
|                     locatedCronMethod = true;
|                     createTimer.call(this, { ...cron, autoStart: true });
|                 }
|             });
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 67:16-36
 @ ./src/App.vue
 @ ./src/main.js

It is occurs if I include the import below:

import { crono } from 'vue-crono';

[1Mpuls3]

My babel loader version in case it can help :

"babel-loader": "^7.1.5"

And inside my webpack.base.config

module: { rules: [ { test: /.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, ] }

if that's not enough maybe you can try with babel-preset-stage-2 too

[rljoia]

I updated my babel-loader to the 7.1.5 version, changed the webpack.base.conf.js to (following the Webpack 3.X Doc(https://webpack-v3.netlify.app/loaders/babel-loader/#usage))

{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/,
        include: [resolve('src'), resolve('test')],
      },

, but the error still occurs.

[1Mpuls3]

https://github.com/babel/babel-loader/issues/798

Here they talk about webpack and acorn needing to be updated too, maybe find the first webpack version that support spreading operator

[rljoia]

My dependency tree for webpack is:

 map-widget > webpack@3.12.0

and for acorn is:

map-widget > webpack > acorn@5.7.4
map-widget > webpack > acorn-dynamic-import > acorn@4.0.13
map-widget > webpack-bundle-analyzer > acorn@5.7.4

according to this (https://github.com/babel/babel-loader/issues/798#issuecomment-536601365), the acorn version 5.7.4 already have object spread support.

Unfortunately I have to use vue 2 in my project because vue 3 does not prepared yet for other specific functionality that I need to use. Additionally, vue 2, by default, generate projects using webpack 3.X.

The problem still occurs, I do not finding any other solution to solve this problem with 'vue-crono'. Maybe I will try to use other cron package.

[1Mpuls3]

I'm on vue 2.6 too, but "webpack": "^4.46.0" here is my full package.json

{ "dependencies": { "axios": "^0.21.1", "moment": "^2.29.1", "qs": "^6.9.6", "vue": "^2.6.12", "vue-axios": "^3.2.4", "vue-crono": "^2.0.9", "vue-i18n": "^8.22.4", "vue-idb": "^0.2.0", "vue-router": "^3.5.1", "vue-socket.io": "^3.0.10", "vue-upload-component": "^2.8.22", "vue-video-player": "^5.0.2", "vuetify": "^1.5.24", "vuex": "^3.6.2", "vuex-map-fields": "^1.4.1", "vuex-persistedstate": "^2.7.1" }, "devDependencies": { "@mdi/font": "^5.9.55", "autoprefixer": "^9.8.6", "babel-core": "^6.26.3", "babel-eslint": "^7.1.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.5", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.7.0", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "babel-preset-latest": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^4.1.0", "connect-history-api-fallback": "^1.6.0", "copy-webpack-plugin": "^6.4.1", "css-loader": "^0.28.11", "eslint": "^7.19.0", "eslint-config-standard": "^16.0.2", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^3.0.4", "eslint-plugin-html": "^6.1.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.8.0", "eslint-plugin-standard": "^3.1.0", "eventsource-polyfill": "^0.9.6", "express": "^4.17.1", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.11", "friendly-errors-webpack-plugin": "^1.7.0", "html-webpack-plugin": "^4.5.1", "http-proxy-middleware": "^1.0.6", "mini-css-extract-plugin": "^1.3.5", "opn": "^6.0.0", "optimize-css-assets-webpack-plugin": "^5.0.4", "ora": "^5.3.0", "portfinder": "^1.0.28", "rimraf": "^3.0.2", "sass-loader": "^7.3.1", "semver": "^7.3.4", "shelljs": "^0.8.4", "url-loader": "^1.1.2", "vue-loader": "^14.2.4", "vue-style-loader": "^3.1.2", "vue-template-compiler": "^2.6.12", "webpack": "^4.46.0", "webpack-bundle-analyzer": "^3.9.0", "webpack-dev-middleware": "^3.7.3", "webpack-hot-middleware": "^2.25.0", "webpack-merge": "^4.2.2", "webpack-node-externals": "^1.7.2" }, "engines": { "node": ">= 10.0.0", "npm": ">= 6.0.0", "yarn": ">= 1.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }

maybe that will help you

[rljoia]

@1Mpuls3 Thanks for the help. You gave me an insight, so I decided to remove all those generated stuffs from vue cli. My final package.json is:

{
  "name": "map-widget",
  "version": "1.0.0",
  "description": "BBBBB",
  "author": "BBBBBB",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "document-register-element": "^1.14.10",
    "leaflet": "^1.7.1",
    "moment": "^2.29.1",
    "vue": "^2.6.12",
    "vue-crono": "^2.0.9",
    "vue-custom-element": "^3.2.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.1",
    "@vue/cli-plugin-eslint": "^3.4.1",
    "@vue/cli-service": "^3.5.3",
    "@vue/eslint-config-standard": "^3.0.0-rc.5",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "vue-template-compiler": "^2.5.16"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Note: I noticed that your package.json has a dependency with extract-text-webpack-plugin (deprecated), that is not compatible with webpack 4.46.0