nextjs中使用打包时报错

[controZheng]

在nextjs中使用打包的时候会报错，尝试 dynamic import动态加载也不行

[SSShooter]

要写在 useEffect 里，写在外面是在服务器跑的，所以没 window

[controZheng]

要写在useEffect里，写在外侧是在服务器跑的，所以没窗口

引入的时候就报错了。。。

[SSShooter]

要写在useEffect里，写在外侧是在服务器跑的，所以没窗口

引入的时候就报错了。。。

那你可能要搜一下 nextjs 怎么绕过用了 window 对象的库😂

[shhonarmandi]

To disable pre rendering in a next js project follow the instruction in following link.

https://sentry.io/answers/window-is-not-defined/#:~:text=Why%20does%20it%20happen%3F,js%20page%20in%20our%20Next.

[chives-network]

之前的代码

import React, { useEffect, useRef, forwardRef } from 'react'
import MindElixir from 'mind-elixir'

之后的代码

import React, { useEffect, useRef, forwardRef } from 'react'

import dynamic from "next/dynamic";

const MindElixir = dynamic(
  () => {
    return import("mind-elixir");
  },
  { ssr: false }
);

这样写会提示 Unhandled Runtime Error TypeError: MindElixir is not a constructor

[SSShooter]

之前的代码

import React, { useEffect, useRef, forwardRef } from 'react'
import MindElixir from 'mind-elixir'

之后的代码

import React, { useEffect, useRef, forwardRef } from 'react'

import dynamic from "next/dynamic";

const MindElixir = dynamic(
  () => {
    return import("mind-elixir");
  },
  { ssr: false }
);

这样写会提示 Unhandled Runtime Error TypeError: MindElixir is not a constructor

应该是 MindElixir.default

[chives-network]

之前的代码

import React, { useEffect, useRef, forwardRef } from 'react'
import MindElixir from 'mind-elixir'

之后的代码

import React, { useEffect, useRef, forwardRef } from 'react'

let MindElixir;
import('mind-elixir').then((module) => { MindElixir = module.default; }).catch((error) => { console.error('Failed to import MindElixir:', error.message); MindElixir = null; });

这样修改,npm run dev工作正常,npm run build 和npm run export时也正常. REACT和NEXTJS下面工作正常 还有就是MindElixir的非null需要额外判断一下. 谢谢群主及时回复 下面是完整的 MindElixirReact.jsx 代码:

import React, { useEffect, useRef, forwardRef } from 'react'

let MindElixir;
import('mind-elixir').then((module) => { MindElixir = module.default; }).catch((error) => { console.error('Failed to import MindElixir:', error.message); MindElixir = null; });

function MindElixirReact(
  { style, data, options, plugins, onOperate, onSelectNode, onExpandNode },
  ref
) {
  const isFirstRun = useRef(true)
  
  useEffect(() => {
    if(MindElixir != null)     {
      isFirstRun.current = true
      const me = new MindElixir({
        el: ref.current,
        ...options,
      })
      for (let i = 0; i < plugins.length; i++) {
        const plugin = plugins[i]
        me.install(plugin)
      }
      me.bus.addListener('operation', (operation) => {
        onOperate(operation)
      })
      me.bus.addListener('selectNode', (operation) => {
        onSelectNode(operation)
      })
      me.bus.addListener('expandNode', (operation) => {
        onExpandNode(operation)
      })
      ref.current.instance = me
      console.log('created', ref.current.instance)
    }
  }, [ref, options, plugins, onOperate, onSelectNode, onExpandNode, MindElixir])

  useEffect(() => {
    if (isFirstRun.current) {
      if (!ref.current.instance) return
      ref.current.instance.init(data)
      isFirstRun.current = false
      console.log('init', ref.current.instance)
    } else {
      ref.current.instance.refresh(data)
      console.log('refresh', ref.current.instance)
    }
  }, [ref, options, data])
  console.log('render')
  
  return <div ref={ref} style={style}></div>
}

export default forwardRef(MindElixirReact)

[chives-network]

之前的代码

import React, { useEffect, useRef, forwardRef } from 'react'
import MindElixir from 'mind-elixir'

之后的代码

import React, { useEffect, useRef, forwardRef } from 'react'

import dynamic from "next/dynamic";

const MindElixir = dynamic(
  () => {
    return import("mind-elixir");
  },
  { ssr: false }
);

这样写会提示 Unhandled Runtime Error TypeError: MindElixir is not a constructor

应该是 MindElixir.default

经过测试,在REACT和NEXTJS下面,不会报错,但是无法正常渲染出来界面,所以放弃这种写法,非常感谢群主回复.