React.NET: Require is not define: Trying to use loadable-components
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
{
///
/// <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
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 17 (5 by maintainers)
@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-e42b1b7acd57@felipetoffolo1 Yes, I was able to get imported css files (inside a loadable component ) split in the output
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.
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,