vuestorefront / vue-storefront

Alokai is a Frontend as a Service solution that simplifies composable commerce. It connects all the technologies needed to build and deploy fast & scalable ecommerce frontends. It guides merchants to deliver exceptional customer experiences quickly and easily.
https://www.alokai.com
MIT License
10.63k stars 2.08k forks source link

Cannot assign to read only property 'storeCode' #3748

Closed tdugue closed 5 years ago

tdugue commented 5 years ago

Current behavior

In production mode so with yarn build and yarn start I have an error.

at each refresh of the website it is necessary to restart with pm2. I did not find a default error behavior on the front. It can be an infinite loop or a 404

I think this error is only when the multiStore is enable.

I have this error :

4|server   | 2019-10-24 16:17:15: TypeError: Cannot assign to read only property 'storeCode' of object '[object Object]'
4|server   |     at server-bundle.js:1:65979
4|server   |     at server-bundle.js:1:5557
4|server   |     at Object.next (webpack:/external "vue":1:0)
4|server   |     at server-bundle.js:1:4600
4|server   |     at new Promise (<anonymous>)
4|server   |     at Object.a (node_modules/tslib/tslib.es6.js:68:41)
4|server   |     at _ (core/lib/multistore.ts:17:40)
4|server   |     at server-bundle.js:1:104111
4|server   |     at server-bundle.js:1:5557
4|server   |     at Object.next (webpack:/external "vue":1:0)

I think the problem comes from the core/scripts/server.js file.

and more precisely the function :

const serve = (path, cache, options)

the use of get must generate an error that I do not see :

maxAge = config.expireHeaders.get(mimeType);

if I get proporty this way his walking :

maxAge = config.expireHeaders[mimeType];

But I'm not sure that's the solution, the problem may be from somewhere else. I would need a review

Expected behavior

Steps to reproduce the issue

Repository

Can you handle fixing this bug by yourself?

Which Release Cycle state this refers to? Info for developer.

Pick one option.

Environment details

Additional information

dz3n commented 5 years ago

Hey, @TigerWhite1

Can you give me more info how to reproduce this issue. Can you tell me which branch you are working on and also if it is possible your package json because right now I do not receive this error on master branch

tdugue commented 5 years ago

Hi @dz3n,

Thank you for your answer.

I work on the branch v1.10.4.

here is my package json :

{
  "name": "vue-storefront",
  "version": "1.10.4",
  "description": "A Vue.js, PWA eCommerce frontend",
  "private": true,
  "engines": {
    "node": ">=8.x"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/DivanteLtd/vue-storefront"
  },
  "keywords": [
    "vue",
    "vuex",
    "vue-router",
    "webpack",
    "starter",
    "server-side",
    "boilerplate"
  ],
  "author": "pkarw <pkarwatka@divante.pl> and contributors",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/DivanteLtd/vue-storefront/issues"
  },
  "homepage": "https://github.com/DivanteLtd/vue-storefront/README.md",
  "scripts": {
    "start": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" pm2 start ecosystem.json $PM2_ARGS",
    "start:inspect": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" node --inspect ./core/scripts/server.js",
    "installer": "node ./core/scripts/installer",
    "installer:ci": "yarn installer --default-config",
    "all": "cross-env NODE_ENV=development node ./core/scripts/all",
    "cache": "node ./core/scripts/cache",
    "dev": "npm run config && cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" ts-node ./core/scripts/entry.ts",
    "config": "nodemon --watch config/ --ignore config/local.json --exec \"sh config/buildConfig.sh\" &",
    "dev:sw": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" yarn build:sw && yarn dev",
    "dev:inspect": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" node --inspect -r ts-node/register ./core/scripts/entry",
    "build:sw": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.sw.config.ts --mode production --progress --hide-modules",
    "build:client": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.client.config.ts --mode production --progress --hide-modules",
    "build:server": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.server.config.ts --mode production --progress --hide-modules",
    "build": "rimraf dist && yarn build:client && yarn build:server && yarn build:sw",
    "test:unit": "jest -c test/unit/jest.conf.js",
    "test:unit:watch": "jest -c test/unit/jest.conf.js --watch",
    "test:e2e": "cypress open",
    "test:e2e:ci": "cypress run",
    "lint-fix": "eslint --ext .js,.vue,.ts core src --fix",
    "lint": "eslint --ext .js,.vue,.ts core src",
    "lerna": "lerna"
  },
  "pre-commit": [
    "lint"
  ],
  "dependencies": {
    "@types/webpack": "^4.4.23",
    "@types/webpack-dev-server": "^3.1.1",
    "apollo-cache-inmemory": "^1.2.5",
    "apollo-client": "^2.3.5",
    "apollo-link": "^1.2.2",
    "apollo-link-http": "^1.5.4",
    "bodybuilder": "2.2.13",
    "config": "^1.30.0",
    "cross-env": "^3.1.4",
    "dayjs": "^1.8.15",
    "es6-promise": "^4.2.4",
    "express": "^4.14.0",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "isomorphic-fetch": "^2.2.1",
    "js-sha3": "^0.8.0",
    "localforage": "^1.7.2",
    "magento2-rest-client": "github:DivanteLtd/magento2-rest-client",
    "ms": "^2.1.2",
    "pm2": "^2.10.4",
    "redis-tag-cache": "^1.2.1",
    "reflect-metadata": "^0.1.12",
    "register-service-worker": "^1.5.2",
    "ts-node": "^7.0.1",
    "vue": "^2.6.6",
    "vue-analytics": "^5.16.1",
    "vue-apollo": "^3.0.0-beta.19",
    "vue-carousel": "^0.6.9",
    "vue-gtm": "^2.0.0",
    "vue-i18n": "^8.0.0",
    "vue-lazyload": "^1.2.6",
    "vue-meta": "^1.5.3",
    "vue-no-ssr": "^0.2.2",
    "vue-observe-visibility": "^0.4.1",
    "vue-offline": "^1.0.8",
    "vue-router": "^3.0.1",
    "vue-server-renderer": "^2.6.6",
    "vuelidate": "^0.6.2",
    "vuex": "^3.0.1",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.3.4",
    "@types/jest": "^24.0.11",
    "@types/node": "^10.12.18",
    "@typescript-eslint/eslint-plugin": "^1.7.1-alpha.17",
    "@typescript-eslint/parser": "^1.7.1-alpha.17",
    "@vue/test-utils": "^1.0.0-beta.29",
    "app-root-path": "^2.0.1",
    "autoprefixer": "^8.6.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^24.1.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "command-exists": "^1.2.2",
    "commander": "^2.18.0",
    "css-loader": "^1.0.0",
    "cypress": "^3.1.5",
    "d3-dsv": "^1.0.8",
    "detect-installed": "^2.0.4",
    "empty-dir": "^1.0.0",
    "eslint": "^5.0.0",
    "eslint-config-standard": "^11.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.1.0",
    "eslint-plugin-vue": "^5.2.2",
    "eslint-plugin-vue-storefront": "^0.0.1",
    "file-loader": "^1.1.11",
    "fs-exists-sync": "^0.1.0",
    "html-webpack-plugin": "^3.2.0",
    "inquirer": "^3.3.0",
    "is-windows": "^1.0.1",
    "jest": "^24.8.0",
    "jest-serializer-vue": "^2.0.2",
    "jsonfile": "^4.0.0",
    "lerna": "^3.14.1",
    "mkdirp": "^0.5.1",
    "node-sass": "^4.12.0",
    "nodemon": "^1.19.2",
    "phantomjs-prebuilt": "^2.1.10",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "pre-commit": "^1.2.2",
    "print-message": "^2.1.0",
    "rimraf": "^2.6.0",
    "sass-loader": "^7.1.0",
    "shelljs": "^0.8.1",
    "sw-precache-webpack-plugin": "^0.11.5",
    "ts-jest": "^24.0.2",
    "ts-loader": "^5.3.0",
    "typescript": "^3.1.6",
    "url-loader": "^1.1.2",
    "url-parse": "^1.4.4",
    "vue-eslint-parser": "^2.0.3",
    "vue-jest": "^3.0.2",
    "vue-loader": "^15.4.2",
    "vue-ssr-webpack-plugin": "^3.0.0",
    "vue-template-compiler": "^2.6.6",
    "webpack": "^4.25.1",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-hot-middleware": "^2.24.3",
    "webpack-merge": "^4.1.4"
  },
  "peerDependencies": {
    "vue-template-compiler": "^2.6.6"
  },
  "browserslist": {
    "development": [
      "last 2 chrome versions",
      "last 2 firefox versions",
      "last 2 edge versions",
      "> 5%"
    ],
    "production": [
      ">5%",
      "last 4 versions",
      "Firefox ESR"
    ]
  },
  "workspaces": [
    "core",
    "core/i18n",
    "src/extensions/*",
    "src/modules/*",
    "src/themes/*",
    "docs",
    "core/modules/*",
    "packages/*",
    "test/unit"
  ]
}

but it's the same as on the config branch for the dev.

For information before the update of VSF I was in version 1.10.0-rc.1 and everything worked normally.

to reproduce just refresh the website and it does not work anymore.

gibkigonzo commented 5 years ago

Probably problem lies in prepareStoreView in multistore.ts. There is line that checks if storeCode exist (line 26). So if for example you pass there invalid storeCode (for example 'xyz'), then storeViewHasChanged (line 25) is true and app crash in line 37 because storeView is undefined (is set to undefined in line 27).

@TigerWhite1 Please check what value has storeCode, because maybe it's different problem. :)

yuriboyko commented 5 years ago

@gibkigonzo Please check this PR https://github.com/DivanteLtd/vue-storefront/pull/3783 i think it solves this issue.

andrzejewsky commented 5 years ago

@TigerWhite1 Can you check branch hotfix/v1.10.5 it should works there, could you confirm?