Develop Reference

TypeError: getAllByTestId(...).at is not a function locally but passes in Azure Pipeline

I am very new to programming and even greener when it comes to JS. I noticed when testing with jest, several of the tests failed even though they succeeded in the pipeline and were merged into the project. A coworker pulled my branch that had my revisions and the tests passed for him locally. The only tests that are failing use getAllByTestId from React Testing Library. Example test:
it('Should render component with text input change', () => {
Object.defineProperty(AppConfig, 'IS_WEB', { value: false });
const { getAllByTestId } = render(
<div>
<CaregiverEditAlert />
</div>
);
const elem = getAllByTestId('test-input').at(0);
elem && fireEvent.change(elem, { target: { value: 'test' } });
});
When run, the output is:
CaregiverEditAlert › Should render component with text input change
TypeError: getAllByTestId(...).at is not a function
79 | </div>
80 | );
> 81 | const elem = getAllByTestId('test-input').at(0);
| ^
82 | elem && fireEvent.change(elem, { target: { value: 'test' } });
83 | });
84 |
at Object.<anonymous> (src/components/__tests__/CaregiverEditAlert.test.tsx:81:47)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/#jest/core/build/cli/index.js:173:3)
If I log
console.log('GetAllByTestId is a', typeof(getAllByTestId));
it returns:
console.log
GetAllByTestId is a function
"dependencies": {
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#material-ui/core": "^4.12.4",
"#miblanchard/react-native-slider": "^2.1.0",
"#mui/material": "^5.9.1",
"#react-google-maps/api": "^2.13.1",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-community/netinfo": "^9.3.5",
"#react-native-community/picker": "^1.8.1",
"#react-native-community/slider": "4.1.12",
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/core": "^6.1.1",
"#react-navigation/material-top-tabs": "^6.1.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.1.1",
"#react-navigation/web": "^1.0.0-alpha.9",
"#testing-library/react": "12",
"#testing-library/react-native": "^9.0.0",
"#testing-library/user-event": "^14.4.3",
"#types/googlemaps": "^3.43.3",
"#types/react": "^18.0.7",
"#types/react-datepicker": "^4.3.4",
"#types/react-dom": "^18.0.0",
"#types/react-native": "^0.67.1",
"#types/react-native-vector-icons": "^6.4.10",
"#types/react-pdf": "^5.0.2",
"#types/styled-components": "^5.1.24",
"apisauce": "^2.1.5",
"aws-amplify": "^4.3.15",
"google-libphonenumber": "^3.2.27",
"jest-svg-transformer": "^1.0.0",
"modal-enhanced-react-native-web": "^0.2.0",
"moment": "^2.29.1",
"react": "17.0.1",
"react-datepicker": "^4.7.0",
"react-dom": "17.0.1",
"react-geocode": "^0.2.3",
"react-native": "0.65.1",
"react-native-actionsheet": "^2.4.2",
"react-native-communications": "^2.2.1",
"react-native-config": "^1.4.5",
"react-native-date-picker": "^4.2.0",
"react-native-geocoder": "^0.5.0",
"react-native-gesture-handler": "~2.1.0",
"react-native-image-crop-picker": "^0.37.3",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-modal": "^13.0.1",
"react-native-open-settings": "^1.0.1",
"react-native-pager-view": "5.4.9",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-splash-screen": "^3.3.0",
"react-native-tab-view": "^3.1.1",
"react-native-toast-message": "^2.1.2",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "^0.17.7",
"react-native-web-maps": "^0.3.0",
"react-pdf": "^5.4.1",
"react-portal": "^4.2.1",
"react-redux": "^7.2.6",
"react-test-renderer": "^17.0.2",
"reactotron-react-native": "^5.0.1",
"redux": "^4.1.2",
"redux-mock-store": "^1.5.4",
"redux-persist": "^6.0.0",
"redux-persist-transform-filter": "^0.0.20",
"redux-saga": "^1.1.3",
"reduxsauce": "^1.2.1",
"require": "^2.4.20",
"reselect": "^4.1.5",
"safe-buffer": "^5.2.1",
"seamless-immutable": "^7.1.4",
"ts-node": "^10.9.1"
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-class-properties": "^7.16.7",
"#babel/plugin-proposal-private-methods": "^7.16.11",
"#babel/plugin-proposal-private-property-in-object": "^7.16.7",
"#types/jest": "^27.4.1",
"#types/prop-types": "^15.7.4",
"#types/react-test-renderer": "^17.0.1",
"#typescript-eslint/eslint-plugin": "^5.20.0",
"#typescript-eslint/parser": "^5.20.0",
"babel-loader": "^8.2.4",
"babel-plugin-inline-dotenv": "^1.6.0",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-react-app": "^10.0.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"concurrently": "^7.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.6",
"dotenv-expand": "^8.0.3",
"eslint": "^8.14.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard": "^17.0.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-n": "^15.2.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"eslint-plugin-react-native": "^4.0.0",
"eslint-watch": "^8.0.0",
"eslint-webpack-plugin": "^3.1.1",
"fork-ts-checker-webpack-plugin": "^7.2.3",
"html-webpack-plugin": "^5.5.0",
"image-webpack-loader": "^8.1.0",
"jest": "^27.5.1",
"mini-css-extract-plugin": "^1.6.2",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"patch-package": "^6.4.7",
"pnp-webpack-plugin": "^1.7.0",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
"postcss-safe-parser": "^6.0.0",
"prettier": "^2.6.2",
"react-dev-utils": "^12.0.0",
"react-native-dotenv": "^3.3.1",
"reactotron-react-js": "^3.3.7",
"reactotron-redux": "^3.1.3",
"reactotron-redux-saga": "^4.2.3",
"rimraf": "^3.0.2",
"sass": "^1.52.3",
"sass-loader": "^10.1.1",
"style-loader": "^3.3.1",
"styled-components": "^5.3.3",
"ts-jest": "^27.1.3",
"ts-loader": "^9.2.8",
"typescript": "^4.6.2",
"url-loader": "^4.1.1",
"webpack": "^5.71.0",
"webpack-dev-server": "^4.8.1",
"webpack-manifest-plugin": "^5.0.0",
"workbox-webpack-plugin": "^6.5.2"
I have looked all over for a solution and asked some coworkers what they think the issue might be.
One mentioned it might be an issue with a version of a module I am using, but I haven't changed anything since I cloned the repo. I am also using linux and everyone else uses windows or Mac. Has anyone else come across an issue like this or know of a possible solution? Thank you. If I'm missing anything that you might need, I can include it.

Nodejs export aggregates throws syntax error [duplicate]

When running my gulp task, I get the following error:
SyntaxError in plugin "gulp-babel"
Message:
/Users/******/Repos/******/src/scripts/config/index.js: Unexpected export specifier type
> 1 | export * as constants from './constants';
^^^^^^^^^^^^^^
I'm not sure why this is as I am running the required plugins to allow ES6 imports/exports, or so I thought...
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"add-module-exports",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-export-default-from"
]
}
package.json - I've included the full list, most of it will probably be irrelevant but just in case there are any known package conflicts.
"dependencies": {
"#babel/polyfill": "^7.8.3",
"classnames": "^2.2.5",
"concurrent-transform": "^1.0.0",
"deep-freeze": "0.0.1",
"eslint": "^3.17.1",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-react": "^6.10.0",
"git-rev": "^0.2.1",
"gulp-awspublish": "^4.0.0",
"gulp-sftp": "^0.1.5",
"moment": "^2.18.1",
"moment-timezone": "^0.5.26",
"path": "^0.12.7",
"qs": "^6.4.0",
"react": "^16.8.4",
"react-addons-css-transition-group": "^15.0.2",
"react-dom": "^16.8.4",
"react-fastclick": "^3.0.2",
"react-redux": "^4.4.5",
"react-router": "^3.2.5",
"react-router-redux": "^4.0.8",
"react-string-replace": "^0.4.0",
"react-transition": "^1.0.3",
"react-transition-group": "^2.7.0",
"redux": "^3.5.2",
"redux-thunk": "^2.3.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"#babel/core": "^7.8.3",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.8.3",
"#babel/plugin-transform-modules-commonjs": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.8.3",
"axios": "^0.15.3",
"babel-core": "^6.26.3",
"babel-eslint": "^6.0.4",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-polyfill": "^6.26.0",
"babelify": "^9.0.0",
"chai": "^3.5.0",
"enzyme": "^2.7.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^8.0.0",
"gulp-browserify": "^0.5.1",
"gulp-clean": "^0.3.2",
"gulp-color": "0.0.1",
"gulp-connect": "^5.0.0",
"gulp-cssnano": "^2.1.2",
"gulp-htmlmin": "^3.0.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-mocha": "^4.3.0",
"gulp-param": "^0.6.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sass-glob": "^1.0.8",
"gulp-sourcemaps": "^2.4.1",
"gulp-ssh": "^0.6.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^2.1.0",
"gulp-watch": "^4.3.11",
"gulp-webserver": "^0.9.1",
"jest": "^25.1.0",
"jsdom": "^9.12.0",
"lint-staged": "^3.4.0",
"mocha": "^3.2.0",
"mocha-jsdom": "^1.1.0",
"mocha-junit-reporter": "^1.13.0",
"mock-require": "^2.0.1",
"pre-commit": "^1.2.2",
"prop-types": "^15.5.10",
"react-addons-create-fragment": "^15.6.0",
"react-addons-test-utils": "^15.6.0",
"react-tools": "^0.13.3",
"redux-mock-store": "^1.2.3",
"run-sequence": "^1.2.2"
}
Any help appreciated - I'm really at a loss for this one.
(Using node v9.11.2)

From this thread
The problem is that we added export * as ns from "foo" support by
default to #babel/parser (in #10521) but not to #babel/preset-env.
As a workaround, you can enable
#babel/plugin-proposal-export-namespace-from in your config.
So add #babel/plugin-proposal-export-namespace-from to your .babelrc and dev dependencies and you should be OK!
It looks like eventually this will be built into the preset-env so you won't have to use a plugin.

Webpack compiling throwing error with mobx

I am using webpack as module bundler and babel for transpiling.
My current npm version is 3.10.9 and node version is v6.9.2.
Package.json
"devDependencies": {
"axios": "^0.17.0",
"babel-eslint": "^8.0.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-preset-mobx": "^1.0.2",
"babel-preset-react": "^6.11.1",
"babel-register": "^6.26.0",
"babel-core": "^6.9.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-1": "^6.5.0",
"clean-webpack-plugin": "^0.1.17",
"compression": "^1.6.1",
"cors": "^2.8.4",
"cross-env": "^5.0.5",
"css-loader": "^0.23.1",
"csslint": "^1.0.5",
"csslint-loader": "^1.0.0",
"eslint": "^4.10.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.4.0",
"express": "^4.9.8",
"express-https-redirect": "^1.0.0",
"express-manifest": "^0.1.1",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^2.30.1",
"http2": "^3.3.7",
"https": "^1.0.0",
"image-webpack-loader": "^3.4.2",
"jasmine-core": "^2.8.0",
"json-loader": "^0.5.4",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.1",
"karma-webpack": "^2.0.9",
"less": "^3.0.0-alpha.3",
"less-loader": "^4.0.5",
"moment": "^2.19.2",
"node-sass": "^4.5.3",
"postcss": "^6.0.13",
"postcss-css-variables": "^0.8.0",
"postcss-cssnext": "^3.0.2",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.6",
"postcss-mixins": "^6.1.1",
"postcss-nested": "^2.1.2",
"postcss-start-to-end": "^1.0.1",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-doc-generator": "^1.2.5",
"react-docgen-plugin": "^0.1.1",
"react-dom": "^16.2.0",
"react-lazy-load": "^3.0.13",
"react-redux": "^5.0.6",
"react-responsive-carousel": "^3.1.28",
"redux": "^3.7.2",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.0.0",
"rollup-plugin-node-resolve": "^3.0.3",
"rollup-plugin-postcss": "^1.3.3",
"rollup-plugin-replace": "^2.0.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.19.0",
"stylelint": "^8.2.0",
"sw-precache-webpack-plugin": "^0.11.4",
"url-loader": "^0.6.2",
"webfonts-loader": "^4.0.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.1",
"webpack-node-externals": "^1.6.0",
"workbox-webpack-plugin": "^2.1.2",
"wrapper-webpack-plugin": "^1.0.0"
},
"dependencies": {
"expres": "0.0.5",
"express": "^4.14.0",
"express-minify-html": "^0.11.5",
"html-minifier": "^3.5.6",
"jade": "^1.11.0",
"mobx": "^3.0.0",
"mobx-react": "^4.1.0",
"pa11y-ci": "^1.3.1",
"redux-promise": "^0.5.3",
"stylelint-webpack-plugin": "^0.10.2"
},
"babel": {
"plugins": [
"transform-es2015-modules-commonjs"
]
},
when I compile I get below issue.
Using default export (`import mobx from 'mobx'`) is deprecated and wont work in mobx#4.0.0
Use `import * as mobx from 'mobx'` instead
D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\logger.js:41
throw new Constructor(this._buildMessage(msg));
^
ReferenceError: [BABEL] D:\mgm\dmp\fe-react\webpack.config.babel.js: Unknown option: base.Reaction. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.
at Logger.error (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
at OptionManager.init (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at Object.transformFileSync (D:\mgm\dmp\fe-react\node_modules\babel-core\lib\api\node.js:152:10)
at compile (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:118:20)
at loader (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (D:\mgm\dmp\fe-react\node_modules\babel-register\lib\node.js:154:7)
Please help.

First things first, remove mobx presets from your .babelrc.
{
"presets": ["mobx"]
}
then npm i --save-dev babel-plugin-transform-decorators-legacy and add below .babelrc configration.
{
"presets": ["react", "env", "stage-2"],
"plugins": [
"transform-decorators-legacy", // must on the top of plugins array.
... ...
]
}
finally, you must delete babel-preset-mobx that 0 start on the GitHub, I think it's unstable.

Uncaught ReferenceError: exports is not defined Vue + Webpack

I am trying to add Leaflet library source into my project, but I'm getting an error on statements.
window.L = exports;
Vue Import Statement, copy of leaflet folder is in my project src folder
import L from '#/leaflet/src/Leaflet'
The screenshot of the problem.
I've updated the vue, babel and webpack, but still the problem is not resolved, here is my configuration.
"dependencies": {
"bootstrap": "^3.3.7",
"jquery": "^3.3.1",
"leaflet": "^1.3.1",
"vue": "^2.5.2",
"vue-resource": "^1.3.5",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-umd": "^6.24.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
}
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
Thank you

Array in Vuex Store (state) throws error in Internet Explorer and Microsoft Edge

When defining an array in vuex store as follows:
const state = {
tags: [1, 2, 3]
}
Both Internet Explorer 11 and Micrsoft Edge give back a blank page and the following error message:
Error: “Unknown name” error in vue.esm.js
No problems with Chrome, Firefox, Safari, Opera.
When removing the values, it works:
const state = {
tags: []
}
I am using babel-polyfill (main.js: import 'babel-polyfill'). My package.json:
"dependencies": {
"#xkeshi/image-compressor": "^0.5.2",
"axios": "^0.17.1",
"bulma": "^0.6.1",
"bulma-extensions": "^0.5.2",
"cropperjs": "^1.2.1",
"vee-validate": "^2.0.0-rc.27",
"vue": "^2.5.13",
"vue-analytics": "^5.8.0",
"vue-awesome-swiper": "^3.0.6",
"vue-flatpickr-component": "^5.0.5",
"vue-goodshare": "^0.9.3",
"vue-masonry": "^0.10.16",
"vue-meta": "^1.4.0",
"vue-recaptcha": "^1.1.0",
"vue-router": "^3.0.1",
"vue-upload-component": "^2.7.4",
"vue2-editor": "^2.3.11",
"vue2-google-maps": "^0.8.4",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.4.2"
},
"devDependencies": {
"autoprefixer": "^7.2.3",
"babel-core": "^6.26.0",
"babel-eslint": "^8.1.2",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.1.0",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.3.1",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"eslint": "^4.14.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.6",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"node-sass": "^4.7.2",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.3.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"sw-precache-webpack-plugin": "^0.11.4",
"uglify-es": "^3.3.2",
"url-loader": "^0.6.2",
"vue-loader": "^13.6.1",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.2",
"webpack-hot-middleware": "^2.21.0",
"webpack-merge": "^4.1.0"
},
I get the same error when using vuex-persistedstate.

I have found the problem - this was my mistake - it was a syntax error in my v-for loop key...