require config to map a certain sub URL to a submodule of the same bundle [confusing?]
Apologies for a misleading title, I didn't know how to explain the problem in one sentence.
Here's an example of my simplified requirejs config:
paths:
...
"@material-ui/core": "http://localhost:3000/assets/vendor/@material-ui/core/material-ui.development"
...
material-ui.development.js is a umd bundle containing everything needed for material-ui except the icons.
This requirejs config is being loaded at startup of the main script and all other bundles (umd webpack bundles) loaded on the page rely on these paths to work.
The plan is as follows:
- have all bundles import
@material-ui/corecomponents through the main entrypoint like so:import Button from '@material-ui/core';. and have@material-ui/coreexternalized completely.- No problems here. this seems to work as expected!
- have all bundles bundle their own icons (
@material-ui/icons). Might contain some duplications of icons across multiple bundles, but that is negligible. In the future if this becomes out of hand, I can create a new custom bundle with a set of commonly used icons to avoid duplication.- The problem with 2. is this:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-icons/src/utils/createSvgIcon.js#L3
Each icon uses the createSvgIcon utility to wrap the svg in the SvgIcon component. But look at the require statement at the top! it asks for @material-ui/core/SvgIcon which if I externalize in my webpack config, require will try to fetch it by calling http://localhost:3000/assets/vendor/@material-ui/core/material-ui.development/SvgIcon (!!!)
So now the question:
- Is there a way to somehow map
@material-ui/core/SvgIconto look for the bundle that is already externalized with@material-ui/coreand read the propertySvgIcon? Are shims capable of something like that?.
Of course, my fear with making a special bundle exclusively for SvgIcon is that I will have to do the same thing with every outlier component like this and this not an acceptable solution.
Also I could of course bundle the createSvgIcon utility in each one of the bundles, but:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/SvgIcon/SvgIcon.js#L4
that means withStyles will be packaged as well, which pulls in a million other things:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/withStyles.js#L10
Looking for suggestions,
Thanks to anyone looking at this.
webpack requirejs material-ui
asked Nov 14 '18 at 1:49
Trevor DonahueTrevor Donahue
496429
add a comment |
Apologies for a misleading title, I didn't know how to explain the problem in one sentence.
Here's an example of my simplified requirejs config:
paths:
...
"@material-ui/core": "http://localhost:3000/assets/vendor/@material-ui/core/material-ui.development"
...
material-ui.development.js is a umd bundle containing everything needed for material-ui except the icons.
This requirejs config is being loaded at startup of the main script and all other bundles (umd webpack bundles) loaded on the page rely on these paths to work.
The plan is as follows:
- have all bundles import
@material-ui/corecomponents through the main entrypoint like so:import Button from '@material-ui/core';. and have@material-ui/coreexternalized completely.- No problems here. this seems to work as expected!
- have all bundles bundle their own icons (
@material-ui/icons). Might contain some duplications of icons across multiple bundles, but that is negligible. In the future if this becomes out of hand, I can create a new custom bundle with a set of commonly used icons to avoid duplication.- The problem with 2. is this:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-icons/src/utils/createSvgIcon.js#L3
Each icon uses the createSvgIcon utility to wrap the svg in the SvgIcon component. But look at the require statement at the top! it asks for @material-ui/core/SvgIcon which if I externalize in my webpack config, require will try to fetch it by calling http://localhost:3000/assets/vendor/@material-ui/core/material-ui.development/SvgIcon (!!!)
So now the question:
- Is there a way to somehow map
@material-ui/core/SvgIconto look for the bundle that is already externalized with@material-ui/coreand read the propertySvgIcon? Are shims capable of something like that?.
Of course, my fear with making a special bundle exclusively for SvgIcon is that I will have to do the same thing with every outlier component like this and this not an acceptable solution.
Also I could of course bundle the createSvgIcon utility in each one of the bundles, but:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/SvgIcon/SvgIcon.js#L4
that means withStyles will be packaged as well, which pulls in a million other things:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/withStyles.js#L10
Looking for suggestions,
Thanks to anyone looking at this.
webpack requirejs material-ui
asked Nov 14 '18 at 1:49
Trevor DonahueTrevor Donahue
496429
add a comment |
Apologies for a misleading title, I didn't know how to explain the problem in one sentence.
Here's an example of my simplified requirejs config:
paths:
...
"@material-ui/core": "http://localhost:3000/assets/vendor/@material-ui/core/material-ui.development"
...
material-ui.development.js is a umd bundle containing everything needed for material-ui except the icons.
This requirejs config is being loaded at startup of the main script and all other bundles (umd webpack bundles) loaded on the page rely on these paths to work.
The plan is as follows:
- have all bundles import
@material-ui/corecomponents through the main entrypoint like so:import Button from '@material-ui/core';. and have@material-ui/coreexternalized completely.- No problems here. this seems to work as expected!
- have all bundles bundle their own icons (
@material-ui/icons). Might contain some duplications of icons across multiple bundles, but that is negligible. In the future if this becomes out of hand, I can create a new custom bundle with a set of commonly used icons to avoid duplication.- The problem with 2. is this:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-icons/src/utils/createSvgIcon.js#L3
Each icon uses the createSvgIcon utility to wrap the svg in the SvgIcon component. But look at the require statement at the top! it asks for @material-ui/core/SvgIcon which if I externalize in my webpack config, require will try to fetch it by calling http://localhost:3000/assets/vendor/@material-ui/core/material-ui.development/SvgIcon (!!!)
So now the question:
- Is there a way to somehow map
@material-ui/core/SvgIconto look for the bundle that is already externalized with@material-ui/coreand read the propertySvgIcon? Are shims capable of something like that?.
Of course, my fear with making a special bundle exclusively for SvgIcon is that I will have to do the same thing with every outlier component like this and this not an acceptable solution.
Also I could of course bundle the createSvgIcon utility in each one of the bundles, but:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/SvgIcon/SvgIcon.js#L4
that means withStyles will be packaged as well, which pulls in a million other things:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/withStyles.js#L10
Looking for suggestions,
Thanks to anyone looking at this.
webpack requirejs material-ui
asked Nov 14 '18 at 1:49
Trevor DonahueTrevor Donahue
496429
Apologies for a misleading title, I didn't know how to explain the problem in one sentence.
Here's an example of my simplified requirejs config:
paths:
...
"@material-ui/core": "http://localhost:3000/assets/vendor/@material-ui/core/material-ui.development"
...
material-ui.development.js is a umd bundle containing everything needed for material-ui except the icons.
This requirejs config is being loaded at startup of the main script and all other bundles (umd webpack bundles) loaded on the page rely on these paths to work.
The plan is as follows:
- have all bundles import
@material-ui/corecomponents through the main entrypoint like so:import Button from '@material-ui/core';. and have@material-ui/coreexternalized completely.- No problems here. this seems to work as expected!
- have all bundles bundle their own icons (
@material-ui/icons). Might contain some duplications of icons across multiple bundles, but that is negligible. In the future if this becomes out of hand, I can create a new custom bundle with a set of commonly used icons to avoid duplication.- The problem with 2. is this:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-icons/src/utils/createSvgIcon.js#L3
Each icon uses the createSvgIcon utility to wrap the svg in the SvgIcon component. But look at the require statement at the top! it asks for @material-ui/core/SvgIcon which if I externalize in my webpack config, require will try to fetch it by calling http://localhost:3000/assets/vendor/@material-ui/core/material-ui.development/SvgIcon (!!!)
So now the question:
- Is there a way to somehow map
@material-ui/core/SvgIconto look for the bundle that is already externalized with@material-ui/coreand read the propertySvgIcon? Are shims capable of something like that?.
Of course, my fear with making a special bundle exclusively for SvgIcon is that I will have to do the same thing with every outlier component like this and this not an acceptable solution.
Also I could of course bundle the createSvgIcon utility in each one of the bundles, but:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/SvgIcon/SvgIcon.js#L4
that means withStyles will be packaged as well, which pulls in a million other things:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/withStyles.js#L10
Looking for suggestions,
Thanks to anyone looking at this.
webpack requirejs material-ui
webpack requirejs material-ui
asked Nov 14 '18 at 1:49
Trevor DonahueTrevor Donahue
496429
asked Nov 14 '18 at 1:49
Trevor DonahueTrevor Donahue
496429
asked Nov 14 '18 at 1:49
Trevor DonahueTrevor Donahue
496429
asked Nov 14 '18 at 1:49
Trevor DonahueTrevor Donahue
496429
asked Nov 14 '18 at 1:49
Trevor DonahueTrevor Donahue
496429
496429
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292052%2frequire-config-to-map-a-certain-sub-url-to-a-submodule-of-the-same-bundle-confu%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292052%2frequire-config-to-map-a-certain-sub-url-to-a-submodule-of-the-same-bundle-confu%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
