Migrate from Yarn to npm

Edit on GitHub

This document provides instructions for migrating from Yarn to npm.

Since the beginning of the Merchant Portal project, Yarn v2 has been used to install dependencies. If the package versions differ between some packages, it can not install all dependencies correctly. The issue has been managed internally by updating all package versions simultaneously, but when customers develop the project, this cannot be guaranteed. Since Yarn has not responded to the reported issue for more than a year, we must switch back to npm v9, which also supports workspaces.

Estimated migration time: 2h

1) Update modules

composer update spryker/chart spryker/dashboard-merchant-portal-gui spryker/discount spryker/gui spryker/gui-table spryker/merchant-profile-merchant-portal-gui spryker/product-merchant-portal-gui spryker/product-offer-merchant-portal-gui spryker/product-relation-gui spryker/sales-merchant-portal-gui spryker/security-merchant-portal-gui spryker/state-machine spryker/user-merchant-portal-gui spryker/zed-ui spryker-shop/product-review-widget spryker-shop/shop-ui

2) Update configuration files

  1. Set up new versions of node/npm in the main *.yml files, like deploy.yml, deploy.dev.yml, and deploy.ci.yml:
image:
    ...
    node:
        version: 18
        npm: 9
Note

To ensure the CI jobs run successfully, add the same config part to all deploy.*.yml files used by the frontend.

  1. The following commands are deprecated and work correctly only with the previous versions (using Yarn): frontend:yves:install-dependencies, frontend:zed:install-dependencies, frontend:mp:install-dependencies. Therefore, in all *.yml files at the project level, do the following:

    1. Remove the deprecated frontend:yves:install-dependencies and frontend:zed:install-dependencies commands.
    2. Replace the frontend:mp:install-dependencies command with frontend:project:install-dependencies.
  2. Pass all (yves, zed, and mp) frontend dependencies:

frontend:project:install-dependencies
  1. Pull the latest docker-sdk version:
cd docker && git pull origin master
git log
  1. The git log command prints the table with the last three commits. Copy the hash of the first commit and replace the content in the .git.docker file:
// paste `hash` text here
Note

The minimum hash text should be e9ebb666feccae1754792d41e49df3b9f95ef0aa or higher.

  1. Update the package.json:
{
    ...
    "workspaces": [
        "vendor/spryker/*",
        "vendor/spryker/*/assets/Zed"
    ],
    ...
    "engines": {
        "node": ">=18.0.0",
        "npm": ">=9.0.0"
    },
    ...
    "devDependencies": {
        ...
        "@babel/plugin-proposal-class-properties": "~7.17.12",
        "@babel/plugin-transform-runtime": "~7.17.12",
        "@babel/preset-typescript": "~7.17.12",
        "@spryker/oryx-for-zed": "~3.0.0",
        "babel-loader": "~8.2.5",
        "sass": "~1.51.0",
        ...
    },
    ...
}
  1. Update the .travis.yml:
before_install:
  ...
  - nvm install 18 > /dev/null
  - nvm use 18
  ...
  1. In the root directory, create a new .npmrc file with the following content:
legacy-peer-deps=true
  1. Delete the following folders and files from the root directory:
  • .yarn folder
  • .yarnrc.yml file
  • yarn.lock file

3) Build the project

  1. Apply the docker changes:
docker/sdk boot deploy.dev.yml
docker/sdk up
  1. Regenerate package-lock.json:
rm -rf package-lock.json
docker/sdk cli npm install
  1. Build the project using npm v9:
rm -rf node_modules && docker/sdk cli rm -rf node_modules
docker/sdk boot deploy.dev.yml
docker/sdk up --build --assets --data
Note

If you use Node.js and npm locally, make sure their versions are correct:

node -v
npm -v

To update the versions, use official documentation: