Comments (12)
Hi sorry for my late appearance. Wonderful that you made it work 🚀!
Also thanks for your PR - much appreciated 🍻!
from parcel-plugin-externals.
Hm can the rxReact
catch React at all? It seems to be able to catch things like react-dom
, but not react
(it requires another part after a dash).
The other thing is that you may want to exclude @wordpress/element
. If I understand this one brings React and React-DOM as globals already (but maybe I misunderstand).
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!
from parcel-plugin-externals.
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 path
never starts with this. console.log( path );
worked a treat to see this.
from parcel-plugin-externals.
your repo's (and this discussion's initial) code snippet includes "node_modules" in the regex match rule
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.
Any ideas why not???
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:
- "Hack" the
react-notifications-component
in your node_modules to useimport * as React from 'react'
instead ofimport React from 'react'
- Place in some code before
react-notifications-component
is imported / running the following snippet:require('react').default = require('react');
If either one or the other is suddenly working this is indeed the case. The second approach could be a way to circumvent this.
from parcel-plugin-externals.
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 npm install
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.
from parcel-plugin-externals.
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.
from parcel-plugin-externals.
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 React
is resolved there. Is it coming from the global? What name should be used there? Check the dependencies
of the package.json of the external package, too - React should not be bundled in and marked as a peer dependency.
from parcel-plugin-externals.
Tyvm. Yes it has react as a peer dependency:
https://github.com/teodosii/react-notifications-component/blob/master/package.json
from parcel-plugin-externals.
Removing the "alias"
from package.json
seems to be the best out-of-the-box quick fix (i.e. no custom Externals JS and no modifying the npm dependency).
6min trial and error video, if you care to review: https://share.getcloudapp.com/5zuyOqkD
from parcel-plugin-externals.
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!
from parcel-plugin-externals.
I submitted #14 -- thanks much for this package and your assistance!
from parcel-plugin-externals.
With your help:
https://github.com/cliffordp/cliff-wp-plugin-boilerplate#march-22-2020
Improve the JavaScript build for WordPress React, reducing the admin-settings.js file size:
- Minified: from 265.91 KB to 35.16 KB (87% reduction)
- Unminified: from 803.68 KB to 48.15 KB (94% reduction)
from parcel-plugin-externals.
Related Issues (17)
- External syntax HOT 4
- Ignores hoisted modules HOT 1
- Broken output with "--bundle-node-modules" option HOT 7
- (Node 8.16.x) SyntaxError: Unexpected token { ... HOT 1
- Help how to 'externalize' all of WordPress' globals HOT 7
- How use parcel-plugin-externals properly in development/production mode ? HOT 4
- HTML Externals HOT 3
- Use @parcel/logger instead of console HOT 1
- Uncaught ReferenceError: React is not defined HOT 3
- Bundling fails when [email protected] is added to external HOT 1
- Can't tell if plugin is running HOT 2
- Question: Is there a way to set all modules to be externals? HOT 8
- Parcel v2 HOT 3
- Exception on browser property set to false HOT 5
- How to make dependencies with slash "/" as external? HOT 4
- Support for fake modules? HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from parcel-plugin-externals.