NextJS React - WebpackError：未定义窗口

Question

我正在尝试使用 React。我遵循了 NextJs（链接）的“入门”教程，并成功创建了新项目。

一旦我尝试导入诸如current-devices或smooth-scrollbar 之类的第三方插件，我就会收到以下错误：

ReferenceError: window is not defined
(anonymous function)
/c/xampp/htdocs/nextjs/node_modules/smooth-scrollbar/dist/smooth-scrollbar.js:1:262
Module._compile
module.js:652:30
Module._extensions..js
module.js:663:10
Module.load
module.js:565:32
tryModuleLoad
module.js:505:12
Function.Module._load
module.js:497:3
Module.require
module.js:596:17
require
internal/module.js:11:18
smooth-scrollbar
webpack:/external "smooth-scrollbar":1
> 1 | module.exports = require("smooth-scrollbar");
View compiled
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 |  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 |  threw = false;
  23 | } finally {
  24 |  if(threw) delete installedModules[moduleId];
View compiled
Module../pages/index.js
/_next/development/server/static/development/pages/index.js:221:74
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 |  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 |  threw = false;
  23 | } finally {
  24 |  if(threw) delete installedModules[moduleId];
View compiled
3
/_next/development/server/static/development/pages/index.js:383:18
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 |  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 |  threw = false;
  23 | } finally {
  24 |  if(threw) delete installedModules[moduleId];
View compiled
? 2 stack frames were collapsed.

我在文件 C:\xampp\htdocs\nextjs\pages\index.js 中所做的导入

只是：

import Scrollbar from 'smooth-scrollbar';
import device from 'current-device'

非常感谢您的帮助！

Answer 1

Next.js 有一个服务器端和一个客户端，窗口没有在服务器端定义，'smooth-scrollbar' 和 'current-device' 可能都使用了窗口，你可以使用 next with 的动态导入ssr: false来只使用clinet端的一些包：

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('package'),
  { ssr: false }
)

// ...


// use it in render like:
<DynamicComponentWithNoSSR />

有关更多信息，请访问文档

Answer 2

就我而言，只做 Nextjs 动态导入是不够的。

例子

动态导入 TVChart.js

import dynamic from "next/dynamic"
import * as React from "react"

const TVChartContainer = dynamic(() => import("./TVChart"), { ssr: false })

export default () => {
  return <TVChartContainer />
}

如果您仍然收到 > ReferenceError: window is not defined错误，即使在已接受的答案中提到使用没有 ssr 的动态导入后，则可能是由于依赖关系，需要窗口存在并在顶层导入。

就我而言，我正在导入 TradingView Charting Library小部件对象，如下所示：

TVChart.js -不工作

import { widget } from "../public/static/charting_library/charting_library.min" //did not work

class TVChart extends Component {

    tvWidget = null

    componentDidMount() {
        const widgetOptions = {} //ChartingLibraryWidgetOptions
        this.tvWidget = new widget(widgetOptions)
    }

    render() {
        <div id="tv_chart_container" className="TVChartContainer" />
    }
}
export default TVChart;

TVChart.js - 工作

// import { widget } from "../public/static/charting_library/charting_library.min" // <-- Remove this line

class TVChart extends Component {

    tvWidget = null

    async componentDidMount() {
        const { widget } = await import("../public/static/charting_library/charting_library.min") // <-- Import asynchronously
        const widgetOptions = {} //ChartingLibraryWidgetOptions
        this.tvWidget = new widget(widgetOptions)
    }

    render() {
        <div id="tv_chart_container" className="TVChartContainer" />
    }

}
export default TVChart;

希望能帮助到你。