$ is not defined
#65032
-
Summary看图片
import Script from "next/script";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<Script strategy="beforeInteractive" src="/js/jquery-3.4.1.min.js" />
<div id="app">
{children}
</div>
</body>
</html>
);
}Isn't jquery here a global reference? And except for Layout.tsx, all my pages are added with 'use client' '. Even if I added 'use client' at the top of webpack.ProvidePluginAnd when I use webpack.ProvidePlugin like this: /** @type {import('next').NextConfig} */
import { error } from "node:console";
import fs from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";
import fastSafeStringify from "fast-safe-stringify";
import {
PHASE_DEVELOPMENT_SERVER,
PHASE_PRODUCTION_BUILD,
} from "next/dist/shared/lib/constants.js";
import CopyWebpackPlugin from "copy-webpack-plugin";
import webpack from "webpack";
import { merge } from "webpack-merge"; // 不同于lodash.merge，不会更改源对象，且数组会智能合并
import HtmlWebpackPlugin from 'html-webpack-plugin'
const __dirname = path.dirname(fileURLToPath(import.meta.url));
console.log(process.env.NODE_ENV)
const nextConfig = (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
reactStrictMode: false,
output: "export",
distDir: 'dist',
images: {
unoptimized: true,
},
sassOptions: {
additionalData: `@import "@/scss/variable.scss";`
},
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
if (phase === PHASE_DEVELOPMENT_SERVER) {
} else if (phase === PHASE_PRODUCTION_BUILD) {
}
const originalHtmlWebpackPlugin = config.plugins.find(plugin => plugin instanceof HtmlWebpackPlugin);
// console.log('originalHtmlWebpackPlugin', originalHtmlWebpackPlugin)
// console.log(config.plugins)
return merge(config, {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
}),
]
});
},
};
return nextConfig;
};
export default nextConfig;It's another fucking error
I'm confused. Additional informationNo response ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 10 replies
-
|
Hi,
You should maybe defer the allocation of SectionTree, so that it doesn't run in the server. I am not sure about what you are doing there, but if its top level code, accessing $ raw, then it is bound to have problems, just as accessing window/document or their APIs would cause issues. |
Beta Was this translation helpful? Give feedback.
-
|
Oh thanks! |
Beta Was this translation helpful? Give feedback.
-
|
I understand what you said, but what I understand is that the difference between the usereffect and the uselayouteffect is not the time different? Uselayouteffect will block the browser rendering. I see.useEffect can help us get the latest DOM, including layout size, right? I took a look at my code, and I noticed that at the top level, there were actually references to jquery outside of effect and that's probably what caused it |
Beta Was this translation helpful? Give feedback.
-
|
But I still don’t understand why it operates in useLayoutEffect better than in useEffect |
Beta Was this translation helpful? Give feedback.
-
|
Yes that the issue then, those unchecked references to $, which is not available in the global scope of SSR The reason why useLayoutEffect exists, is to do work on the DOM, imperatively, before the browser paints, so that you don't show the UI before doing the modifications you need. useEffect can also see the DOM already, but then React has already yielded so that the browser can paint. Whether or not to use either, is almost a matter of business logic, is it ok for users to see the DOM before you go and do modifications to it? You might not see them now, but in production, in slower devices, or with other things happening in your application, it is possible to see this flashes of content. |
Beta Was this translation helpful? Give feedback.
Yes that the issue then, those unchecked references to $, which is not available in the global scope of SSR
The reason why useLayoutEffect exists, is to do work on the DOM, imperatively, before the browser paints, so that you don't show the UI before doing the modifications you need.
useEffect can also see the DOM already, but then React has already yielded so that the browser can paint. Whether or not to use either, is almost a matter of business logic, is it ok for users to see the DOM before you go and do modifications to it? You might not see them now, but in production, in slower devices, or with other things happening in your application, it is possible to see this flashes of content.