getChildRoutes dynamically
0
In react-router examples, have following code for dynamic load children, but I want to dynamic calculate the dependencies. However, it seems NOT work. forEach loop will throw error, says "Cannot find module xxx"
getChildRoutes(location, callback) {
require.ensure(, function (require) {
callback(null, [
require('./routes/Announcements'),
require('./routes/Assignments')
])
})
},
----###############################################----
getChildRoutes(location, callback) {
require.ensure(, function (require) {
var appsRoutes = ['routes/Announcements', 'routes/Assignments'].forEach(item=>{
return require('./' + item);
});
callback(null, appRoutes)
})
},
reactjs react-router
edited Nov 22 '18 at 2:34
Cœur
18.9k9112154
asked Jun 7 '16 at 8:08
jasonjason
94641735
add a comment |
0
In react-router examples, have following code for dynamic load children, but I want to dynamic calculate the dependencies. However, it seems NOT work. forEach loop will throw error, says "Cannot find module xxx"
getChildRoutes(location, callback) {
require.ensure(, function (require) {
callback(null, [
require('./routes/Announcements'),
require('./routes/Assignments')
])
})
},
----###############################################----
getChildRoutes(location, callback) {
require.ensure(, function (require) {
var appsRoutes = ['routes/Announcements', 'routes/Assignments'].forEach(item=>{
return require('./' + item);
});
callback(null, appRoutes)
})
},
reactjs react-router
edited Nov 22 '18 at 2:34
Cœur
18.9k9112154
asked Jun 7 '16 at 8:08
jasonjason
94641735
add a comment |
0
0
0
In react-router examples, have following code for dynamic load children, but I want to dynamic calculate the dependencies. However, it seems NOT work. forEach loop will throw error, says "Cannot find module xxx"
getChildRoutes(location, callback) {
require.ensure(, function (require) {
callback(null, [
require('./routes/Announcements'),
require('./routes/Assignments')
])
})
},
----###############################################----
getChildRoutes(location, callback) {
require.ensure(, function (require) {
var appsRoutes = ['routes/Announcements', 'routes/Assignments'].forEach(item=>{
return require('./' + item);
});
callback(null, appRoutes)
})
},
reactjs react-router
edited Nov 22 '18 at 2:34
Cœur
18.9k9112154
asked Jun 7 '16 at 8:08
jasonjason
94641735
In react-router examples, have following code for dynamic load children, but I want to dynamic calculate the dependencies. However, it seems NOT work. forEach loop will throw error, says "Cannot find module xxx"
getChildRoutes(location, callback) {
require.ensure(, function (require) {
callback(null, [
require('./routes/Announcements'),
require('./routes/Assignments')
])
})
},
----###############################################----
getChildRoutes(location, callback) {
require.ensure(, function (require) {
var appsRoutes = ['routes/Announcements', 'routes/Assignments'].forEach(item=>{
return require('./' + item);
});
callback(null, appRoutes)
})
},
reactjs react-router
reactjs react-router
edited Nov 22 '18 at 2:34
Cœur
18.9k9112154
asked Jun 7 '16 at 8:08
jasonjason
94641735
edited Nov 22 '18 at 2:34
Cœur
18.9k9112154
asked Jun 7 '16 at 8:08
jasonjason
94641735
edited Nov 22 '18 at 2:34
Cœur
18.9k9112154
edited Nov 22 '18 at 2:34
Cœur
18.9k9112154
edited Nov 22 '18 at 2:34
Cœur
18.9k9112154
18.9k9112154
asked Jun 7 '16 at 8:08
jasonjason
94641735
asked Jun 7 '16 at 8:08
jasonjason
94641735
asked Jun 7 '16 at 8:08
jasonjason
94641735
94641735
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Does the following variation work?
const dynamicRoutes = [
'./routes/Announcements',
'./routes/Assignments'
];
...
getChildRoutes(location, callback) {
require.ensure(dynamicRoutes, function (require) {
var appsRoutes = dynamicRoutes.map(item => require(item));
callback(null, appRoutes);
});
},
I think webpack needs to be able to calculate which modules to create dynamic hooks on to during compile time, which it isn't able to resolve due to your concat forEach loop approach.
This alternative could possibly work too:
getChildRoutes(location, callback) {
require.ensure(, function (require) {
var appsRoutes = [
require('./routes/Announcements'),
require('./routes/Assignments')
];
callback(null, appRoutes);
});
},
Read here for more info: https://webpack.github.io/docs/code-splitting.html
answered Jun 7 '16 at 8:27
ctrlplusbctrlplusb
8,34643948
It seems not work. When compile, webpack will throw a warning: "the request of a dependency is an expression". When run it, webpack will throw error "can't find module"
– jason
Jun 7 '16 at 12:39
For the alternative option too?
– ctrlplusb
Jun 7 '16 at 12:40
in fact, the appRoutes is calculated dynamic, something like var config = ['Annoucements', 'Assignments']; appRoutes = config.map(item=>{return './routes/' + item})
– jason
Jun 7 '16 at 12:45
Do you mean that theconfigarray (i.e.var config = ['Announcements', 'Assignments']) is mutated at run time? So you could for example during another route resolution have a variable ofvar config = ['Announcements', 'Assignments', 'Foo']). i.e. values get appended/removed from the array during run time?
– ctrlplusb
Jun 7 '16 at 12:50
<code>config</code>is not mutated. But <code>appRoutes</code> is calculated by <code>config</code>.
– jason
Jun 7 '16 at 14:04
|
show 3 more comments
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
});
}
});
draft saved
draft discarded
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%2f37673852%2fgetchildroutes-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Does the following variation work?
const dynamicRoutes = [
'./routes/Announcements',
'./routes/Assignments'
];
...
getChildRoutes(location, callback) {
require.ensure(dynamicRoutes, function (require) {
var appsRoutes = dynamicRoutes.map(item => require(item));
callback(null, appRoutes);
});
},
I think webpack needs to be able to calculate which modules to create dynamic hooks on to during compile time, which it isn't able to resolve due to your concat forEach loop approach.
This alternative could possibly work too:
getChildRoutes(location, callback) {
require.ensure(, function (require) {
var appsRoutes = [
require('./routes/Announcements'),
require('./routes/Assignments')
];
callback(null, appRoutes);
});
},
Read here for more info: https://webpack.github.io/docs/code-splitting.html
answered Jun 7 '16 at 8:27
ctrlplusbctrlplusb
8,34643948
It seems not work. When compile, webpack will throw a warning: "the request of a dependency is an expression". When run it, webpack will throw error "can't find module"
– jason
Jun 7 '16 at 12:39
For the alternative option too?
– ctrlplusb
Jun 7 '16 at 12:40
in fact, the appRoutes is calculated dynamic, something like var config = ['Annoucements', 'Assignments']; appRoutes = config.map(item=>{return './routes/' + item})
– jason
Jun 7 '16 at 12:45
Do you mean that theconfigarray (i.e.var config = ['Announcements', 'Assignments']) is mutated at run time? So you could for example during another route resolution have a variable ofvar config = ['Announcements', 'Assignments', 'Foo']). i.e. values get appended/removed from the array during run time?
– ctrlplusb
Jun 7 '16 at 12:50
<code>config</code>is not mutated. But <code>appRoutes</code> is calculated by <code>config</code>.
– jason
Jun 7 '16 at 14:04
|
show 3 more comments
0
Does the following variation work?
const dynamicRoutes = [
'./routes/Announcements',
'./routes/Assignments'
];
...
getChildRoutes(location, callback) {
require.ensure(dynamicRoutes, function (require) {
var appsRoutes = dynamicRoutes.map(item => require(item));
callback(null, appRoutes);
});
},
I think webpack needs to be able to calculate which modules to create dynamic hooks on to during compile time, which it isn't able to resolve due to your concat forEach loop approach.
This alternative could possibly work too:
getChildRoutes(location, callback) {
require.ensure(, function (require) {
var appsRoutes = [
require('./routes/Announcements'),
require('./routes/Assignments')
];
callback(null, appRoutes);
});
},
Read here for more info: https://webpack.github.io/docs/code-splitting.html
answered Jun 7 '16 at 8:27
ctrlplusbctrlplusb
8,34643948
It seems not work. When compile, webpack will throw a warning: "the request of a dependency is an expression". When run it, webpack will throw error "can't find module"
– jason
Jun 7 '16 at 12:39
For the alternative option too?
– ctrlplusb
Jun 7 '16 at 12:40
in fact, the appRoutes is calculated dynamic, something like var config = ['Annoucements', 'Assignments']; appRoutes = config.map(item=>{return './routes/' + item})
– jason
Jun 7 '16 at 12:45
Do you mean that theconfigarray (i.e.var config = ['Announcements', 'Assignments']) is mutated at run time? So you could for example during another route resolution have a variable ofvar config = ['Announcements', 'Assignments', 'Foo']). i.e. values get appended/removed from the array during run time?
– ctrlplusb
Jun 7 '16 at 12:50
<code>config</code>is not mutated. But <code>appRoutes</code> is calculated by <code>config</code>.
– jason
Jun 7 '16 at 14:04
|
show 3 more comments
0
0
0
Does the following variation work?
const dynamicRoutes = [
'./routes/Announcements',
'./routes/Assignments'
];
...
getChildRoutes(location, callback) {
require.ensure(dynamicRoutes, function (require) {
var appsRoutes = dynamicRoutes.map(item => require(item));
callback(null, appRoutes);
});
},
I think webpack needs to be able to calculate which modules to create dynamic hooks on to during compile time, which it isn't able to resolve due to your concat forEach loop approach.
This alternative could possibly work too:
getChildRoutes(location, callback) {
require.ensure(, function (require) {
var appsRoutes = [
require('./routes/Announcements'),
require('./routes/Assignments')
];
callback(null, appRoutes);
});
},
Read here for more info: https://webpack.github.io/docs/code-splitting.html
answered Jun 7 '16 at 8:27
ctrlplusbctrlplusb
8,34643948
Does the following variation work?
const dynamicRoutes = [
'./routes/Announcements',
'./routes/Assignments'
];
...
getChildRoutes(location, callback) {
require.ensure(dynamicRoutes, function (require) {
var appsRoutes = dynamicRoutes.map(item => require(item));
callback(null, appRoutes);
});
},
I think webpack needs to be able to calculate which modules to create dynamic hooks on to during compile time, which it isn't able to resolve due to your concat forEach loop approach.
This alternative could possibly work too:
getChildRoutes(location, callback) {
require.ensure(, function (require) {
var appsRoutes = [
require('./routes/Announcements'),
require('./routes/Assignments')
];
callback(null, appRoutes);
});
},
Read here for more info: https://webpack.github.io/docs/code-splitting.html
answered Jun 7 '16 at 8:27
ctrlplusbctrlplusb
8,34643948
edited Jun 7 '16 at 12:46
answered Jun 7 '16 at 8:27
ctrlplusbctrlplusb
8,34643948
answered Jun 7 '16 at 8:27
ctrlplusbctrlplusb
8,34643948
answered Jun 7 '16 at 8:27
ctrlplusbctrlplusb
8,34643948
8,34643948
It seems not work. When compile, webpack will throw a warning: "the request of a dependency is an expression". When run it, webpack will throw error "can't find module"
– jason
Jun 7 '16 at 12:39
For the alternative option too?
– ctrlplusb
Jun 7 '16 at 12:40
in fact, the appRoutes is calculated dynamic, something like var config = ['Annoucements', 'Assignments']; appRoutes = config.map(item=>{return './routes/' + item})
– jason
Jun 7 '16 at 12:45
Do you mean that theconfigarray (i.e.var config = ['Announcements', 'Assignments']) is mutated at run time? So you could for example during another route resolution have a variable ofvar config = ['Announcements', 'Assignments', 'Foo']). i.e. values get appended/removed from the array during run time?
– ctrlplusb
Jun 7 '16 at 12:50
<code>config</code>is not mutated. But <code>appRoutes</code> is calculated by <code>config</code>.
– jason
Jun 7 '16 at 14:04
|
show 3 more comments
It seems not work. When compile, webpack will throw a warning: "the request of a dependency is an expression". When run it, webpack will throw error "can't find module"
– jason
Jun 7 '16 at 12:39
For the alternative option too?
– ctrlplusb
Jun 7 '16 at 12:40
in fact, the appRoutes is calculated dynamic, something like var config = ['Annoucements', 'Assignments']; appRoutes = config.map(item=>{return './routes/' + item})
– jason
Jun 7 '16 at 12:45
Do you mean that theconfigarray (i.e.var config = ['Announcements', 'Assignments']) is mutated at run time? So you could for example during another route resolution have a variable ofvar config = ['Announcements', 'Assignments', 'Foo']). i.e. values get appended/removed from the array during run time?
– ctrlplusb
Jun 7 '16 at 12:50
<code>config</code>is not mutated. But <code>appRoutes</code> is calculated by <code>config</code>.
– jason
Jun 7 '16 at 14:04
It seems not work. When compile, webpack will throw a warning: "the request of a dependency is an expression". When run it, webpack will throw error "can't find module"
– jason
Jun 7 '16 at 12:39
It seems not work. When compile, webpack will throw a warning: "the request of a dependency is an expression". When run it, webpack will throw error "can't find module"
– jason
Jun 7 '16 at 12:39
For the alternative option too?
– ctrlplusb
Jun 7 '16 at 12:40
For the alternative option too?
– ctrlplusb
Jun 7 '16 at 12:40
in fact, the appRoutes is calculated dynamic, something like var config = ['Annoucements', 'Assignments']; appRoutes = config.map(item=>{return './routes/' + item})
– jason
Jun 7 '16 at 12:45
in fact, the appRoutes is calculated dynamic, something like var config = ['Annoucements', 'Assignments']; appRoutes = config.map(item=>{return './routes/' + item})
– jason
Jun 7 '16 at 12:45
Do you mean that the
config array (i.e. var config = ['Announcements', 'Assignments']) is mutated at run time? So you could for example during another route resolution have a variable of var config = ['Announcements', 'Assignments', 'Foo']). i.e. values get appended/removed from the array during run time?– ctrlplusb
Jun 7 '16 at 12:50
Do you mean that the
config array (i.e. var config = ['Announcements', 'Assignments']) is mutated at run time? So you could for example during another route resolution have a variable of var config = ['Announcements', 'Assignments', 'Foo']). i.e. values get appended/removed from the array during run time?– ctrlplusb
Jun 7 '16 at 12:50
<code>config</code>is not mutated. But <code>appRoutes</code> is calculated by <code>config</code>.
– jason
Jun 7 '16 at 14:04
<code>config</code>is not mutated. But <code>appRoutes</code> is calculated by <code>config</code>.
– jason
Jun 7 '16 at 14:04
|
show 3 more comments
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f37673852%2fgetchildroutes-dynamically%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
