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 aparent
dependency. - Update the
scandipwa.parentTheme
configuration toparent
in the childpackage.json
. - To be safe, run
yarn install
to verify that everything is already up to date in the child (it should be.)
- In the child folder run
- In the parent folder run
yarn add --dev scandipwa-cli
to ensure the latest version is available as a dev dependency. - In the parent folder, set the
scandipwa.themeAlias
setting of thepackage.json
file toParent
. - In the parent folder override a component, for this example we use the
Footer
via theyarn 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
andFooterContainerPropsKeys
- 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 theexport
for the majority of the types toexport 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.)
- I don't imagine it should make a difference for this error, but in this case I selected the following:
- 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:
- https://docs.scandipwa.com/getting-started-1/storefront-mode
- https://docs.scandipwa.com/developing-with-scandi/override-mechanism
- https://docs.scandipwa.com/developing-with-scandi/override-mechanism/parent-themes
- https://docs.create-scandipwa-app.com/themes/extensions-and-themes
- https://docs.create-scandipwa-app.com/themes/parent-themes
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.