ScandiPWA MarketPlace Extension Manual Migration from ScandiPWA v3 to v4

Full Extension

  1. Order Extension ScandiPWA StoreFinder for v3
  2. Go To MyAccount -> My Downloadable Products
  3. Download All available Downloadables
    In our Case 
    1. Dependency <- Magento 2 Module which provides Extension Backend Features
    2. GraphQl <- Magento 2 Module which provides GraphQL interface and required communication customizations. In ScandiPWA version 3 also contained Frontend Extension
  4. Extract content
  5. Backend Modules StoreFinderGraphQl and StoreFinder need to be Placed into app/code/[VENDOR]/ How To get VENDOR name?
    • Open Module in our case first one StoreFinder Open File registration.php
    • Between \Magento\Framework\Component\ComponentRegistrar::MODULE, and    __DIR__  you will find Scandiweb_StoreFinder where first one is VENDOR second after underscore MODULE
    • In Our case in app code weed to create Scandiweb and ScandiPWA folders, and StoreFinderGraphQl will be Placed into ScandiPWA but StoreFinder into Scandiweb

  6. If you are running on CMA in project root run
    npm run cli 
    magento set:up
  7. If you are running the usual Magento setup run
    bin/magento set:up 
  8. Backend part should be setted 
  9. Now we going to setup ScandiPWA frontend extension
  10. First Let's Create a blank ScandiPWA extension, for that got to ScandiPWA Theme Root Folder and Execute
    scandipwa extension create scandipwa-storefinder
  11. Congrats Now we have a blank scandiPWA Extension in
  12. ScandiPWA v3 was stored right in Communication Module let’s move it to the newly created blank extension for that we need to copy all folders form
    StoreFinderGrpahQl/src/scandipwa/app 
    too
    scandipwa/packages/scandipwa-storefinder/src
  13. Now we going to check original frontend extension dependencies in
    app/code/ScandiPWA/StoreFinderGraphQl/package.json
    It has 2



  14. "dependencies": {

    "leaflet": "^1.6.0",

    "react-leaflet": "^2.7.0"

    },
  15.  Let’s move them to the newly created extension into
    scandipwa/packages/scandipwa-storefinder/package.json
    So our end file will look like so
  16. Now we need to install all dependencies by running
    npm install 
    In theme folder
    • If installation fails you may try to delete node_modules folder and packages-lock.json and run install again, but do it for your own risk.
  17. Everything should be set up now so we left only to build the frontend

    After running Storefront we received a couple of issues related to the ScandiPWA 3.x and 4.x incompatibility. Let’s Resolve Them


  18. That is the first type of issue, import approach change, to fix it just change

  19. The same in the StoreFinder.dispatcher

  20. Ok now Theme is building Successfully

    But navigating to the http://localhost:3000/stores we receive the following issue

    This issue related to the fact that Field Component got new required validation property let’s go and add them
  21. Success we migrated extension from ScandiPWA 3.x to ScandiPWA 4.x

  22. Enjoy))
© 2020 ScandiPWA Marketplace. All Rights Reserved