scandipwa / scandipwa

Next-generation front-end for Magento 2

Home Page:https://scandipwa.com/?utm_source=github&utm_medium=readme&utm_campaign=general

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Parent theme component override causes TypeError and missing component in child theme

infinityredux opened this issue · comments

Steps to reproduce:
This is written under the assumption that both themes will be created under the same root folder for simplicity in replicating this.

  • Create a parent theme by executing yarn create scandipwa-app parent.
  • Create a child theme by executing yarn create scandipwa-app child.
  • Link the child to the parent.
    • In the child folder run yarn add link:../parent to create a parent dependency.
    • Update the scandipwa.parentTheme configuration to parent in the child package.json.
    • To be safe, run yarn install to verify that everything is already up to date in the child (it should be.)
  • In the parent folder run yarn add --dev scandipwa-clito ensure the latest version is available as a dev dependency.
  • In the parent folder, set the scandipwa.themeAlias setting of the package.json file to Parent.
  • In the parent folder override a component, for this example we use the Footer via the yarn scandipwa override component Footer command. (This ensures we are using the latest cli, instead of any globally installed version.)
    • I don't imagine it should make a difference for this error, but in this case I selected the following:
      • FooterComponent
      • Extend
      • COLUMN_MAP
      • FooterContainer
      • FooterComponentProps and FooterContainerPropsKeys
    • This should result in 5 files overriding all files in the original scandipwa theme except the index; but will not immediately work.
    • Fix the created theme override file, so that it will compile, by adding something to the scss file, my typical method is normally as below.
    • Fix the type definitions by re-implementing the FooterComponentProps type, as below, and changing the export for the majority of the types to export type instead.
    • Run eslint to fix the styling issues in the parent directory yarn eslint --fix src/component/Footer/*(this will still report a warning about an unexpected token in the style override file, but that appears to be a false positive.)
  • Verify that the parent work as expected via yarn start in the parent folder, and allow the localhost to open in a browser. (Ending the development session when done to free up the port.)
  • Change to the child folder, run yarn start and allow the localhost to open in a browser.
  • Observe the problem with the footer.
.Footer {
    --does-nothing: 0;
}
...
import {Device} from "@scandipwa/scandipwa/src/type/Device.type";
declare module 'SourceComponent/Footer/Footer.type' {
    export interface FooterComponentProps {
        copyright: string;
        isVisibleOnMobile: boolean;
        device: Device;
        newsletterActive: boolean;
        onItemClick: () => void;
    }
}
...

Actual result
The store displays without a footer.

Only other difference between parent in development mode and child in development mode in terms of browser output appears to be child adding a console error - a TypeError about a variable being undefined. Exact variable name and message varies, depending on the build and the browser.

Expected result
Footer should still be present, correctly utilising the parent override in the absence of any change by the child.

Testing details
Have tested this in Firefox, Chromium and Opera on Linux, plus Edge and Chrome on Window; issue happens each time.

Using a yarn file: instead of link: still causes the issue. Since that actually copies the code instead of adding a symlink, I assume that this would equally fail with an external repository, but that seems overkill for testing this bug.

Versions

  • No magento installation (aside from the proxy supplied by default.)
  • Yarn version 1.22.19
  • "@scandipwa/scandipwa": "6.2.1"
  • "@scandipwa/scandipwa-scripts": "2.4.24"
  • "scandipwa-cli": "^0.4.2"
  • As per testing above, browser and OS not directly relevant to the error.

Additional context
Have not yet found an obvious workaround for this, but would appreciate any guidance on finding one.

References used:

Repository with code resulting from the steps above: https://github.com/infinityredux/scandipwa-5445-bug-demo

As an addendum to this, the issue appears to lie with the override on the FooterContainer. Either removing the footer container override or creating another override (even if it's just "empty") in the child resolves the problem.

This also appears to occur with functional components and any use of hooks in the parent theme.