Repository navigation
Require is not define: Trying to use loadable-components #731
Description
Hi guys.
I'm trying to use the loadable-components library.
I'm created a render function and it was going fine.
namespace React.RenderFunctions { /// <summary> /// Render functions for React-JSS. https://github.com/cssinjs/react-jss /// Requires react-jssto be exposed globally asReactJss`
///
public class LoadableComponents : RenderFunctionsBase
{
///
/// HTML style tag containing the rendered styles
///
public string RenderedStyles { get; private set; }
/// <summary>
/// Implementation of PreRender
/// </summary>
/// <param name="executeJs"></param>
public override void PreRender(Func<string, string> executeJs)
{
string json = File.ReadAllText(System.AppDomain.CurrentDomain.BaseDirectory + @"frontend/js/server-side-app/loadable-stats.json");
executeJs($"var extractor = new ChunkExtractor({ json });");
}
/// <summary>
/// Implementation of WrapComponent
/// </summary>
/// <param name="componentToRender"></param>
/// <returns></returns>
public override string WrapComponent(string componentToRender)
{
return ($"extractor.collectChunks({componentToRender})");
}
/// <summary>
/// Implementation of PostRender
/// </summary>
/// <param name="executeJs"></param>
public override void PostRender(Func<string, string> executeJs)
{
RenderedStyles = executeJs(" extractor.getStyleTags()");
}
}
}`
my problem is that the loadable/server library add on the code a
return require(modulePath)
that the javascript engine is giving a error: Require is not defined
Just wanna ask if anyone has any idea of what i can do to solve this,
Thanks very much
Activity
dustinsoftware commentedon Feb 14, 2019
There isn’t (yet) an API that lets you load arbitrary chunks from disk, but I made a branch here that demonstrates how this could be accomplished.
https://github.com/dustinsoftware/React.NET/tree/react-loadable
dustinsoftware commentedon Feb 23, 2019
Took another look React loadable and Loadable Components appear to be very similar in design so in theory it won't take much to support this.
@felipetoffolo1 would you be willing to try out a debug build? Can you pull that branch and see if it's what you're looking for?
felipetoffolo1 commentedon Feb 23, 2019
@dustinsoftware sure I can give it a try this week.
Would be great to use Loadable Components.
I wish I could help on the code part too. But my .net experience is quite short. I'm a frontend dev. But I'm happy to help as possible.
xtroncode commentedon May 10, 2019
Hey @felipetoffolo1 , I stumbled upon this as I was facing the same issue. After struggling a lot I fixed it by making the following change in PreRender Hook
executeJs(@"var extractor = new ChunkExtractor({ stats: "+ json +@"});");I think the issue is the way the stats were passed to the ChunkExtractor,
dustinsoftware commentedon May 19, 2019
Per the loadable-components docs it looks like there is support for Babel 7 which has been merged already in this repo.. so I am planning on updating this branch to get it working with loadable-components and then releasing it as an experimental feature.
felipetoffolo1 commentedon Jun 10, 2019
Hey @xtroncode is it working well for you? I'm thinking about giving it another go, Is the css been splitted too?
xtroncode commentedon Jun 11, 2019
@felipetoffolo1 Yes, I was able to get imported css files (inside a loadable component ) split in the output
felipetoffolo1 commentedon Jun 14, 2019
that is great @xtroncode for some reason I keep getting a error saying windows are not defined.
Did you had to do something for that?
felipetoffolo1 commentedon Jun 19, 2019
@xtroncode can you share your webpack and babel config with me please?
xtroncode commentedon Jun 19, 2019
@felipetoffolo1
Here's my test project
ReactTest.zip
You have be careful with using DOM apis (eg.
window) as they are not available on the server, here's a good explanation https://itnext.io/tips-for-server-side-rendering-with-react-e42b1b7acd57felipetoffolo1 commentedon Jun 24, 2019
@xtroncode big thanks. That helped me a lot. I had limiting the number of chunks on ssr build to 1. And use loadable-stats file generated by the client side for the extractor in the server side.
xtroncode commentedon Jun 25, 2019
@felipetoffolo1 happy to help 👍
johannesaxner-valtech commentedon Oct 9, 2019
Is there any way to get this running with a stable release of React.NET or do I need to mess around with a fork?
xtroncode commentedon Oct 9, 2019
dustinsoftware commentedon Oct 10, 2019
Just an update, I haven’t had the time to revisit this. I’d love to see a PR if someone figures out a way to get this working. Would plan to flag it behind an experimental flag as we figure out the right API.
WesselKroos commentedon May 4, 2020
I was able to make this work without a custom implementation of the RenderFunctionsBase class.
See my answer here for the implementation:
#1098 (comment)
dustinsoftware commentedon Aug 18, 2020
At this point I'm going to close the code-splitting issues; it's likely this library will never support that use case for SSR. It's possible today for your components to use dynamic import after the main component has loaded (the webpack example does this).