Question

我正在尝试玩React。我遵循了NextJ（link）的“入门”教程，并且已经成功创建了新项目。

当我尝试导入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具有服务器端和客户端，窗口未在服务器端定义，“平滑滚动条”和“当前设备”可能都使用窗口，您可以在import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; class _ListOptionState extends State<ListOption> { @override Widget build(BuildContext context) { return ListTile( title: widget.title, subtitle: widget.subtitle, onTap: (widget.handler.value == true ) ? (){print("Test");} : null ); } } class ListOption extends StatefulWidget { ListOption(this.title, this.subtitle, this.handler); bool _toggle = false; final ValueListenable<bool> handler; final Widget title; final Widget subtitle; @override _ListOptionState createState() => _ListOptionState(); }中使用next动态导入next，以便仅在clinet端使用某些软件包：

ssr: false

有关更多信息，请访问docs

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

如果仍然按照接受的答案中的说明使用dynamic imports with no ssr后，仍然出现> ReferenceError：未定义窗口错误，则可能是由于依赖项需要窗口存在，并在顶层导入。

就我而言，我正在导入TradingView图表库小工具对象，如下所示：

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;

希望有帮助。

NextJS React-WebpackError：未定义窗口

2 个答案: