New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to alias React and ReactDOM as wp.element
?
#13
Comments
Hm can the The other thing is that you may want to exclude Would it be possible to make a MWE of your solution? I'd like to better understand the current setup to give you a better advice. Maybe we can also enhance the API of the plugin to cover this case. Hope that helps! |
OK, I've made progress! :) Reference: https://parceljs.org/module_resolution.html#aliases "alias": {
"react": "@wordpress/element",
"react-dom": "@wordpress/element"
},
"externals": {
"@wordpress/element": "wp.element"
} Now the issue is my 3rd party component isn't satisfied :( https://www.npmjs.com/package/react-notifications-component Any ideas why not??? FYI: your repo's (and this discussion's initial) code snippet includes "node_modules" in the regex match rule but |
That's a great catch. Do you want to contribute a PR for this? Would be awesome to improve the docs. Otherwise, I'll correct this.
Hm since we take the React UMD I could assume it does not come with a default export. Not sure though. To see if this is indeed the case you can try two things:
If either one or the other is suddenly working this is indeed the case. The second approach could be a way to circumvent this. |
I'll do PR after I get things straight here in case there are any other tips to add to the readme. Man, nothing I tried worked... I'm not sure how I can edit what comes down from The github repo does not come down raw but instead already built by webpack so I don't know how it could be edited. And the 2nd idea you had didn't fix it either. |
I'm facing a deadline and really appreciate your quick help :D Do you think https://parceljs.org/cli.html#expose-modules-as-umd is relevant at all? A quick try didn't work quite as well as yours but maybe I'm not using it correctly for my use case. |
Ok that it was prebuilt using Webpack may explain this. I would need to study the code, but unfortunately I am fully covered with meetings today - so I'll either catch a look later tonight or tomorrow ... sorry! You can have a look at the code from the package how |
Tyvm. Yes it has react as a peer dependency: https://github.com/teodosii/react-notifications-component/blob/master/package.json |
Removing the 6min trial and error video, if you care to review: https://share.getcloudapp.com/5zuyOqkD |
Great news! I got it sorted out. It was as simple as this: "externals": {
"@wordpress/element": "wp.element"
} No "alias" or anything else! I think the issues I was experiencing that caused me to think something wasn't working correctly was that my API validation was incorrect so stuff wasn't working because of that. THANK YOU! |
I submitted #14 -- thanks much for this package and your assistance! |
Hi sorry for my late appearance. Wonderful that you made it work 🚀! Also thanks for your PR - much appreciated 🍻! |
With your help: https://github.com/cliffordp/cliff-wp-plugin-boilerplate#march-22-2020
|
Continuing from parcel-bundler/parcel#144 (comment)
Maybe I'm not doing it just right or not understanding how things work, but here's what I've got so far:
The issue here is that WordPress is already loading React and ReactDOM via the
@wordpress/element
package fromyoursite-com/wp-includes/js/dist/element.js
(WordPress core, not my own path, as you can see).Here's my
package.json
:Here's the
.externals.js
that mypackage.json
runs:The text was updated successfully, but these errors were encountered: