Replies: 1 comment 9 replies
-
|
I've tried to investigate this before, and even though I had a reproduction demo, I still found it hard to construct an answer. Pretty much, the problem is that WebPack uses require async when there's ES modules on the other side, or something like that.... https://webpack.js.org/blog/2020-10-10-webpack-5-release/#async-modules - and that was introduced somewhere in WebPack 5... |
Beta Was this translation helpful? Give feedback.
-
|
Ok I just double checked, it keeps working :) webpack: (config, { isServer, webpack }) => {
config.plugins = config.plugins || [];
config.plugins.push(
new webpack.DefinePlugin({
IS_SERVER: isServer,
})
);
return config;
},Then things like this work gladly as expected: const Router = IS_SERVER
? require('react-router-dom/server').StaticRouter
: require('react-router-dom').BrowserRouter; |
Beta Was this translation helpful? Give feedback.
-
|
Why not use Also why not just check Good that it works though! |
Beta Was this translation helpful? Give feedback.
-
|
You can't use As you know next executes the build twice, once for the server and once for the client. With the proper constant the code will be optimized and you will have // in your source code
const Router = IS_SERVER
? require('react-router-dom/server').StaticRouter
: require('react-router-dom').BrowserRouter;
// in the server build it results on
const Router = require('react-router-dom/server').StaticRouter;
// in the client build it results on
const Router = require('react-router-dom').BrowserRouter;By the way, if you don't like "magic constants" like the one defined by using // .env
IS_SERVER=1since it's not prefixed with |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for being a bit of a last word dummy here, but that doesn't make sense. import Head from "next/head";
const logger =
typeof window === "undefined"
? require("../private/server").ServerLogger
: require("../private/client").ClientLogger;
export const getStaticProps = () => {
logger();
return {
props: {},
revalidate: 1,
};
};
export default function Home() {
logger();
return (
<div>
<Head>
<title>Home title</title>
</Head>
<h1>home</h1>
</div>
);
}With both private server and client looking like: export const ClientLogger = () => console.log("Client");and export const ServerLogger = () => console.log("Server");Now I build it, and peek into the built files:
The top editor shows that, on the server we have code eliminated the right arm of the ternary, and as you can see, no surprise The bottom editor shows the client chunk. Notice how, even though, this run on Node.js, it still picked-up the client logger, and also inlined it. Does that mean that at build time, console.log("\nwindow:", typeof window, "\n");And we build again:
This is part of the client bundle making process, where the code is not really run, but it is compiled, minified, etc... and under that, What I think happened in your case is that the module you are requiring is just more complex, or perhaps both server and client bundles have a common dependency? Or rather, a more complex dependency structure that the regular bundling cannot do? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah... So I was thinking exactly the same. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I've been using this code in my previous projects from long time ago (last one was using next 11)
It was working pretty well, but now I tried installing next13 and it's failing because
requirereturns aPromise.Isn't
requirecoming from webpack? And wasn't it supposed to be a sync operation?In this other projects it was only transformed to async if it detected the syntax
require(...).thenWhat's changed now?
Beta Was this translation helpful? Give feedback.
All reactions