Vue with Webpack: Options should NOT have additional properties - vue.js

While I was trying to update npm packages, this error popped up which doesn't give any details. I tried to check if is because of my webpack config, but is not because I tried running webpack without using my config.
I saw on other forums this error but it was thrown one or two times, not 30 times like in my case.
These are my dependencies and I'm guessing one of this package versions throws this error without other details:
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/plugin-proposal-class-properties": "^7.2.0",
"#babel/plugin-proposal-decorators": "^7.4.0",
"#babel/plugin-proposal-export-namespace-from": "^7.2.0",
"#babel/plugin-proposal-function-sent": "^7.2.0",
"#babel/plugin-proposal-json-strings": "^7.2.0",
"#babel/plugin-proposal-numeric-separator": "^7.2.0",
"#babel/plugin-proposal-object-rest-spread": "^7.4.3",
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"#babel/plugin-proposal-throw-expressions": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-import-meta": "^7.2.0",
"#babel/plugin-syntax-jsx": "^7.2.0",
"#babel/plugin-transform-modules-commonjs": "^7.4.3",
"#babel/plugin-transform-react-jsx": "^7.3.0",
"#babel/plugin-transform-runtime": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/register": "^7.4.0",
"#babel/runtime": "^7.4.3",
"#babel/runtime-corejs3": "^7.4.3",
"#soda/friendly-errors-webpack-plugin": "^1.8.1",
"#testing-library/dom": "^7.2.2",
"#types/jest": "^25.1.4",
"#types/node": "^11.15.39",
"#vue/test-utils": "^1.0.0-beta.31",
"async": "^2.6.2",
"autoprefixer": "^9.5.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^26.6.3",
"babel-loader": "^8.0.0",
"babel-plugin-transform-vue-jsx": "^4.0.1",
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"chalk": "^2.4.2",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^5.2.0",
"css-loader": "^6.7.2",
"css-minimizer-webpack-plugin": "4.2.2",
"csso-webpack-plugin": "^1.0.0-beta.10",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"eventsource-polyfill": "^0.9.6",
"exports-loader": "^0.7.0",
"expose-loader": "^4.0.0",
"file-loader": "^6.2.0",
"glob": "^7.1.6",
"html-webpack-plugin": "^5.5.0",
"imports-loader": "^0.8.0",
"jest": "^26.6.3",
"jest-canvas-mock": "^2.3.1",
"jest-date-mock": "^1.0.8",
"jest-expect-message": "^1.0.2",
"jest-serializer-vue": "^2.0.2",
"jest-sonar-reporter": "^2.0.0",
"jquery-mockjax": "^2.5.0",
"jsdoc": "^3.6.5",
"mini-css-extract-plugin": "^2.7.2",
"node-notifier": "^5.4.0",
"node-sass": "^4.11.0",
"ol": "6.5.0",
"ora": "^3.3.0",
"portfinder": "^1.0.20",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"resolve-url-loader": "^3.0.1",
"rimraf": "^2.6.3",
"sass-loader": "^13.2.0",
"semver": "^6.0.0",
"shelljs": "^0.8.3",
"terser-webpack-plugin": "4.2.3",
"ts-loader": "^5.3.3",
"typescript": "^4.9.4",
"uglify-js": "3.2.0",
"url-loader": "^4.1.1",
"vue-class-component": "^7.0.2",
"vue-eslint-parser": "^6.0.3",
"vue-jest": "^3.0.7",
"vue-loader": "^15.7.0",
"vue-property-decorator": "^8.1.0",
"vue-style-loader": "^4.1.2",
"vue-styleguidist": "^4.56.3",
"vue-template-compiler": "^2.6.1",
"vuedraggable": "^2.20.0",
"webpack": "^5.62.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^3.3.1",
"webpack-merge": "^4.2.1",
"whatwg-fetch": "^3.0.0",
"write-file-webpack-plugin": "^4.5.0" },

It seems my issue was related to the cli itself. I needed to downgrade the webpack-cli package from v5 to v4 and it removed the error. Unfortunate fix though.

Related

Vue Cli Error: Rule can only have one resource source (provided resource and test + include + exclude)

Npm run serve is not working after I freshly installed npm in the project folder. I am using the latest webpack. Also tried uninstalling and installing npm gloabally. Though this was running before npm install. Nothing has changes in package.json since begining. I don't have idea whats going wrong here. Gives error below
at checkResourceSource (E:\projects\project-emr\emr\node_modules#vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
{
"dependencies": {
"#fortawesome/fontawesome-free": "^5.11.2",
"#toast-ui/vue-calendar": "^1.1.1",
"animate.css": "^3.7.2",
"auth0-js": "^9.12.2",
"autoprefixer": "latest",
"axios": "^0.19.2",
"bootstrap-vue": "^2.1.0",
"cache-loader": "^4.1.0",
"classnames": "2.2.6",
"core-js": "^3.3.2",
"css-loader": "^3.2.0",
"highcharts": "^8.0.0",
"highcharts-vue": "^1.3.5",
"instantsearch.css": "^7.3.1",
"instantsearch.js": "^3.6.0",
"jquery": "^3.4.1",
"js-cookie": "^2.2.1",
"lodash": "latest",
"lottie-web": "^5.5.10",
"material-design-icons-iconfont": "^6.1.0",
"moment": "^2.24.0",
"node-snackbar": "^0.1.16",
"postcss-loader": "^3.0.0",
"ramda": "^0.26.1",
"register-service-worker": "^1.6.2",
"smooth-scrollbar": "^8.5.1",
"swiper": "^5.3.0",
"url-loader": "^3.0.0",
"vee-validate": "^3.2.2",
"vue": "^2.6.10",
"vue-class-component": "^7.2.3",
"vue-file-agent": "^1.7.3",
"vue-flatpickr-component": "^8.1.5",
"vue-form-wizard": "^0.8.4",
"vue-i18n": "^8.15.3",
"vue-instantsearch": "^2.6.0",
"vue-morris": "^1.1.0",
"vue-photo-grid": "^1.0.2",
"vue-property-decorator": "^8.3.0",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.3",
"vue-select": "^3.4.0",
"vue-slick": "^1.1.15",
"vue-slider-component": "3.0.32",
"vuedraggable": "^2.23.2",
"vuefire": "^2.2.1",
"vuetify": "^2.3.10",
"vuex": "^3.0.1",
"webpack": "latest",
"wowjs": "^1.1.3"
},
"devDependencies": {
"#babel/polyfill": "^7.7.0",
"#fullcalendar/list": "^4.3.0",
"#mdi/font": "^5.6.55",
"#vue/cli-plugin-babel": "~4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-plugin-pwa": "^4.1.2",
"#vue/cli-plugin-router": "^4.1.0",
"#vue/cli-plugin-vuex": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.3",
"bootstrap": "^4.3.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"lint-staged": "^9.5.0",
"mutationobserver-shim": "^0.3.3",
"node-sass": "^4.13.1",
"popper.js": "^1.16.0",
"portal-vue": "^2.1.6",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-bootstrap-vue": "^0.6.0",
"vue-cli-plugin-i18n": "~0.6.1",
"vue-clipboard2": "^0.3.1",
"vue-loader": "^15.7.2",
"vue-template-compiler": "^2.6.10"
}

vue-styleguidist can not build documentation since V4.0.3

I'm trying to migrate to the last vue-styleguidist but since v4.0.0 i can't.
With the 3.26.2 it's working fine.
I have this error :
(node:11764) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 6)
There is a guide for the migration?
It's very strange since the babel typescript snafu everything is fine, maybe i need to add something inside babel configuration?
i'm working with :
NodeJS 10.15.1
My dependencies :
"dependencies": {
"async-validator": "^1.12.2",
"cleave.js": "^1.5.3",
"color": "^3.1.2",
"ie11-custom-properties": "^2.3.0",
"interactjs": "^1.7.2",
"lodash": "^4.17.15",
"lodash.orderby": "^4.6.0",
"mobile-device-detect": "^0.2.3",
"normalize-wheel": "^1.0.1",
"portal-vue": "^1.5.1",
"throttle-debounce": "^1.0.1",
"vue": "^2.6.10",
"vue-avatar": "^2.1.8",
"vue-i18n": "^7.4.1",
"vue-infinite-scroll": "^2.0.2",
"vue-lorem-ipsum": "0.0.1",
"vue-router": "^3.1.3",
"vue-styleguidist": "4.0.3",
"vue-svgicon": "^2.1.3",
"vuebar": "^0.0.20"
},
"devDependencies": {
"#babel/core": "^7.7.4",
"#vue/babel-preset-app": "^3.12.1",
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-unit-jest": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"#vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^8.2.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.2",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^22.4.4",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.26.0",
"cheerio": "^1.0.0-rc.3",
"connect-history-api-fallback": "^1.6.0",
"cross-env": "^5.2.1",
"css-loader": "^0.28.9",
"deepmerge": "^2.0.1",
"eslint": "^4.16.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-loader": "^2.2.1",
"eslint-plugin-html": "^4.0.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-vue": "^4.4.0",
"express": "^4.17.1",
"favicons-webpack-plugin": "0.0.8",
"file-loader": "^1.1.11",
"highlight.js": "^9.16.2",
"html-webpack-plugin": "^3.1.0",
"http-proxy-middleware": "^0.18.0",
"jest": "^24.9.0",
"jest-cucumber": "^2.0.11",
"jest-html-reporters": "^1.2.0",
"jest-serializer-vue": "^2.0.2",
"json-loader": "^0.5.7",
"markdown-it": "^8.4.0",
"markdown-it-container": "^2.0.0",
"mini-css-extract-plugin": "^0.2.0",
"node-sass": "^4.13.0",
"nodemon": "^1.19.4",
"normalize.css": "^8.0.0",
"npm-run-all": "^4.1.2",
"ora": "^2.0.0",
"postcss-loader": "^2.0.10",
"postcss-url": "^7.3.0",
"raw-loader": "^0.5.1",
"resolve-url-loader": "^2.3.2",
"sass-loader": "^6.0.6",
"shelljs": "^0.8.1",
"style-loader": "^0.20.3",
"ts-jest": "^24.2.0",
"tslint": "^5.20.1",
"typescript": "^3.7.2",
"url-loader": "^1.0.1",
"vue-clipboards": "^1.3.0",
"vue-html-loader": "^1.2.4",
"vue-jest": "^3.0.5",
"vue-loader": "^14.2.4",
"vue-markdown-loader": "^2.4.0",
"vue-server-renderer": "^2.6.10",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.2",
"webpack-bundle-analyzer": "^2.9.2",
"webpack-cli": "^3.3.10",
"webpack-dashboard": "^1.1.1",
"webpack-dev-middleware": "^3.7.2",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2",
"yaml-loader": "^0.5.0"
}

VueJS and Jest : Cannot find module 'babel-core'

I'm trying to use Jest with VueJS, however I'm getting Cannot find module 'babel-core' at Object.<anonymous> (node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15).
The only way I could fix this was adding
"#babel/core": "^7.7.5",
"babel-core": "^7.0.0-beta.47",
Then test pass, but I do not want to keep the 'beta' version in my package.json, and it is weird to have #babel/core and babel-core together, knowing they are the same package in different versions.
I see the error seems to be in Vue-Jest, but it is already in last version.
Below is my current package.json that breaks (without "babel-core": "^7.0.0-beta.47")
"dependencies": {
"#vue/babel-preset-app": "^3.12.1",
"axios": "^0.19.0",
"chai": "^4.2.0",
"date-fns": "^1.30.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"register-service-worker": "^1.5.2",
"v-click-outside": "^2.1.5",
"vue": "^2.6.10",
"vue-alertify": "^1.1.0",
"vue-body-class": "^2.0.0-beta.2",
"vue-clipboard2": "^0.3.1",
"vue-mq": "^0.1.3",
"vue-multiselect": "^2.1.6",
"vue-recaptcha-v3": "^1.8.0",
"vue-router": "^3.1.3",
"vue-the-mask": "^0.11.1",
"vuelidate": "^0.7.4",
"vuex": "^3.1.2",
"vuex-persist": "^2.2.0"
},
"devDependencies": {
"#babel/core": "^7.7.5",
"#babel/plugin-transform-modules-commonjs": "^7.7.5",
"#babel/polyfill": "^7.7.0",
"#babel/preset-env": "^7.7.5",
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-plugin-pwa": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.30",
"babel-eslint": "^10.0.3",
"copy-webpack-plugin": "^5.0.5",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"eslint-plugin-vue-libs": "^3.0.2",
"jest": "^24.9.0",
"vue-jest": "^3.0.5",
"vue-svg-loader": "^0.12.0",
"vue-template-compiler": "^2.6.10"
}
Any help would be appreciated.
just use babel-bridge . from github issue
npm install babel-core#^7.0.0-bridge.0 --save-dev

Cannot create property 'inject' on string 'reactiveData'

After updating to vue 2.5.8 I've started getting this error: Cannot create property 'inject' on string 'reactiveData'
My dependencies are as follows:
"axios": "^0.16.2",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"buefy": "^0.5.3",
"chart.js": "^2.7.0",
"cross-env": "^5.0.1",
"element-ui": "^2.0.5",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"moment-timezone": "^0.5.13",
"pusher-js": "^4.2.1",
"vanilla-tilt": "^1.4.1",
"vue": "2.5.8",
"vue-chartjs": "^2.8.7",
"vue-router": "^2.7.0",
"vue2-google-maps": "0.8.0",
"vuex": "^2.4.1"
Would love to know how I can get around this one.

React-Native: Constantly get XCode break stops

I have upgraded an older React Native project to 0.47, 0.48 and then 0.49.x. Since I've done so, I keep getting XCode breaking at random moments with the following breakpoint (sometimes others).
My dependencies
"dependencies": {
"autobind-decorator": "^2.1.0",
"cheerio-without-node-native": "^0.20.2",
"diacritic": "0.0.2",
"expect": "^1.20.2",
"harmony-proxy": "^1.0.1",
"hoist-non-react-statics": "^2.3.1",
"immutable": "^3.8.1",
"lodash": "^4.17.4",
"lodash-es": "^4.17.4",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.mergewith": "^4.6.0",
"lodash.sorteduniq": "^4.2.0",
"lodash.sorteduniqby": "^4.7.0",
"lodash.union": "^4.6.0",
"lodash.unionwith": "^4.6.0",
"lodash.uniqby": "^4.7.0",
"mime-types": "^2.1.17",
"moment": "^2.18.1",
"normalizr": "^3.2.3",
"normalizr-immutable": "0.0.4-beta12",
"path": "^0.12.7",
"react": "16.0.0-alpha.12",
"react-immutable-proptypes": "^2.1.0",
"react-intl": "^2.4.0",
"react-intl-redux": "^0.6.0",
"react-native": "^0.49.3",
"react-native-action-button": "^2.7.2",
"react-native-animatable": "^1.2.3",
"react-native-autolink": "^1.1.1",
"react-native-code-push": "5.1.3-beta",
"react-native-cookies": "^3.2.0",
"react-native-deprecated-custom-components": "^0.1.1",
"react-native-drawer": "^2.3.0",
"react-native-fetch-blob": "^0.10.8",
"react-native-fs": "^2.5.2",
"react-native-google-analytics-bridge": "^5.3.3",
"react-native-image-crop-picker": "^0.17.2",
"react-native-image-picker": "^0.26.7",
"react-native-immutable-list-view": "^0.6.2",
"react-native-invertible-scroll-view": "^1.0.0",
"react-native-keyboard-aware-scroll-view": "0.3.0",
"react-native-keychain": "2.0.0-rc",
"react-native-lightbox": "^0.7.0",
"react-native-linear-gradient": "^2.3.0",
"react-native-material-kit": "^0.4.1",
"react-native-modalbox": "^1.4.1",
"react-native-parallax-scroll-view": "^0.19.0",
"react-native-photo-view": "^1.5.2",
"react-native-popup-menu": "^0.8.0",
"react-native-progress": "^3.3.0",
"react-native-scrollable-tab-view": "^0.6.7",
"react-native-sglistview": "^0.4.3",
"react-native-share": "^1.0.23",
"react-native-store": "^0.4.1",
"react-native-swiper": "^1.5.12",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "1.0.0-beta.13",
"react-redux": "^5.0.5",
"react-swipeable-views": "^0.12.5",
"react-swipeable-views-native": "^0.12.5",
"realm": "^1.13.0",
"redux": "^3.7.2",
"redux-form": "^7.0.3",
"redux-logger": "^3.0.6",
"redux-middleware-oneshot": "^0.1.1",
"redux-persist": "^4.8.2",
"redux-persist-immutable": "^4.3.0",
"redux-persist-transform-immutable": "^4.3.0",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"route-parser": "0.0.5",
"webstomp-client": "^1.0.8"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^21.2.0",
"babel-plugin-module-resolver": "3.0.0-beta.5",
"babel-plugin-react-intl": "^2.3.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-preset-airbnb": "^2.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"babel-register": "^6.24.1",
"chai": "^4.1.0",
"chai-as-promised": "^7.1.1",
"chai-enzyme": "^0.8.0",
"chai-immutable": "^1.6.0",
"commitizen": "^2.9.6",
"cz-conventional-changelog": "^2.0.0",
"enzyme": "^3.0.0",
"eslint": "^4.7.2",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-native": "^3.1.0",
"expect.js": "^0.3.1",
"flow": "^0.2.3",
"flow-bin": "^0.56.0",
"immutablediff": "^0.4.3",
"jest": "^21.2.1",
"jest-serializer-enzyme": "^1.0.0",
"jshint": "^2.9.5",
"mocha": "^3.4.2",
"react-addons-test-utils": "^15.6.2",
"react-dom": "16.0.0-beta.5",
"react-intl-cra": "^0.2.8",
"react-native-mock": "^0.3.1",
"react-test-renderer": "^16.0.0",
"redux-debounce": "^1.0.1",
"redux-debounced": "^0.4.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"redux-mock-store": "^1.2.3",
"remote-redux-devtools": "^0.5.12",
"sinon": "^4.0.0",
"why-did-you-update": "0.0.8"
}
Other symptoms:
- react-native run-ios completes with BUILD SUCCEEDED but the app opens and immediately closes on the simulator (works ok from Xcode)
In order to eliminate "old file issues", I created a new react-native project and copied over the newly created xcodeproj file over. To no avail.
Any suggestions?
So, the resolution was executing pod init in the ios directory.
The script identifies some erroneous links that don't become apparent in Xcode. Probably the result of react-native upgrades over a significant amount of time.