-
Notifications
You must be signed in to change notification settings - Fork 6
Resolution for @types/react for checkout ui ext #315
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the eventual solution to this will just be to upgrade @remote-ui/react
to depend on react^18.0.0
, but I am not sure when we will be able to get around to that, so I like this fix in the meantime. Left a couple of notes, though!
@@ -14,5 +14,8 @@ | |||
"scripts": { | |||
"build": "shopify-cli-extensions build", | |||
"develop": "shopify-cli-extensions develop" | |||
} | |||
}{{ if and .Development.UsesTypeScript .Development.UsesReact }}, | |||
"resolutions": { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
resolutions
is just for Yarn. I don't know what the current CLI's policy is on supporting other package managers, but I know for CLI 3.0 they intend to support the "big three" (npm, pnpm, yarn). npm and pnpm both use overrides
instead. Is it possible for us to detect and provide only the correct field?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like this is possible:
shopify-cli-extensions/create/tasks.go
Lines 52 to 69 in 8071eed
func (path InstallDependencies) Run() error { | |
var package_manager string | |
if yarn, err := LookPath("yarn"); err == nil { | |
package_manager = yarn | |
} else if npm, err := LookPath("npm"); err == nil { | |
package_manager = npm | |
} else { | |
return errors.New("package manager not found") | |
} | |
cmd := Command(string(path), package_manager) | |
output, err := cmd.CombinedOutput() | |
if err != nil { | |
return fmt.Errorf("failed to install dependencies: %s", output) | |
} | |
return nil | |
} |
We can probably refactor the package_manager
resolver and use the same logic when building the package.json.tpl
(with the package_manager
passed as an argument to the template).
Worth noting this may not be a critical priority for editions if we do not ship with Typescript template support. |
@lemonmade I think we can close this PR now since its no longer relevant to CLI 3.0? Do we have this captured elsewhere for CLI 3.0? |
Yeah we can close this now (😢) |
Closing since this is no longer relevant. |
Fixes #290.
Problem
When creating a new typescript react checkout extension, all react components show typescript errors.
Solution
Added a specific resolution to the
package.json
template for"@types/react": "17.0.2"
. This will only be added if the extension being created is Typescript + React.🎩Tophatting
shopify-cli
.shopify-cli-extensions
checkout this patch.shopify-cli-extensions
runmake boostrap
.shopify-cli
runbundle install
followed byrake extensions:symlink
(this will link your localshopify-cli-extensions
build.alias shopifyls="SHOPIFY_CLI_DEVELOPMENT=1 SSL_VERIFY_NONE=1 $HOME/src/github.com/Shopify/shopify-cli/bin/shopify"
shopifyls extension create
and selecttypescript-react
as the option for a checkout extension.