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 { ///

/// 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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 17 (5 by maintainers)

Most upvoted comments

@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,