const { override, addWebpackPlugin, addBabelPlugin } = require("customize-cra");
const LoadablePlugin = require("@loadable/webpack-plugin");

module.exports = override(
  addBabelPlugin("@loadable/babel-plugin"),
  addWebpackPlugin(new LoadablePlugin())
);

plugins: ["@loadable/babel-plugin"],

plugins: [new LoadablePlugin()],

// This is the stats file generated by webpack loadable plugin.
  // It's very important that you use the web stats instead of node stats,
  // so use /build/loadable-stats.json instead of /build/server/loadable-stats.json
  const statsFile = path.resolve("./build/loadable-stats.json");

  // We create an extractor from the statsFile
  const extractor = new ChunkExtractor({ statsFile });

  // Wrap your application using "collectChunks"
  const jsx = extractor.collectChunks(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  // Render your application
  const html = ReactDOMServer.renderToString(jsx);

  // You can also collect your "preload/prefetch" links
  const linkTags = extractor.getLinkTags(); // or extractor.getLinkElements();
  // console.log(linkTags);

  // And you can even collect your style tags (if you use "mini-css-extract-plugin")
  const styleTags = extractor.getStyleTags(); // or extractor.getStyleElements();
  // console.log(styleTags);

  // You can now collect your script tags
  // I removed async from script tags as it wasn't working as expected when the scripts were loaded asynchronously
  const scriptTags = extractor.getScriptTags().replace(/async /g, ""); // or extractor.getScriptElements();
    const indexFile = path.resolve("./build/index.html");

  fs.readFile(indexFile, "utf8", (err, data) => {
    if (err) {
      console.error("Something went wrong:", err);
      return res.status(500).send("Oops, better luck next time!");
    }
    return res.send(
      data
        .replace('<div id="root"></div>', `<div id="root">${html}</div>`)
        .replace(
          '<script>console.log("loadable tags placeholder")</script>',
          `${linkTags}\n${styleTags}\n${scriptTags}`
        )
    );
  });