Nextjs novato aquí. Necesito usar el editor de reacción ace en mi proyecto nextjs. Debido a la naturaleza de nextjs, y reaccionar ace necesita usar el objeto de ventana, tengo que importar dinámicamente el editor ace, y funciona bien. Sin embargo, cuando trato de usar los complementos del cuadro de búsqueda, aparece un mensaje de error que dice " Error de referencia: as no está definido".

Así es como importo los módulos

 import React from 'react'; import dynamic from 'next/dynamic' const AceEditor = dynamic(() => import('react-ace'), { ssr: false }) const ace = dynamic(() => import('ace-builds/src-noconflict/ace'), { ssr: false }) const acewebpackresolver = dynamic(() => import('ace-builds/webpack-resolver'), { ssr: false }) const modejs = dynamic(import('ace-builds/src-noconflict/mode-javascript'), { ssr: false }) const themetextmate = dynamic(import('ace-builds/src-noconflict/theme-textmate'), { ssr: false }) const extsearchbox = dynamic(import('ace-builds/src-noconflict/ext-searchbox'), { ssr: false })

Y también he probado lo siguiente:

 import React from 'react'; import dynamic from 'next/dynamic' const AceEditor = dynamic(() => import('react-ace'), { ssr: false }) dynamic(() => import('ace-builds/src-noconflict/ace'), { ssr: false }) const acewebpackresolver = dynamic(() => import('ace-builds/webpack-resolver'), { ssr: false }) dynamic(import('ace-builds/src-noconflict/mode-javascript'), { ssr: false }) dynamic(import('ace-builds/src-noconflict/theme-textmate'), { ssr: false }) dynamic(import('ace-builds/src-noconflict/ext-searchbox'), { ssr: false })

Así es como uso el Ace-editor

 <AceEditor mode="text" theme="textmate" name={props.file.fileKey} height="345px" width="100%" fontSize={12} value={props.file.fileContent} onChange={handleValueChange} onLoad={editorInstance => { editorInstance.container.style.resize = "both"; // mouseup = css resize end document.addEventListener("mouseup", e => ( editorInstance.resize() )); }} editorProps={{ $blockScrolling: true }} />

Creo que se debe al hecho de que ace-builds/src-noconflict/ext-searchbox.js usa el objeto "ace" al principio, y la importación dinámica de nextjs no define el objeto "ace" globalmente, por lo que ext-searchbox .js falla.

Por favor, ayúdame a aclarar si estoy usando mal la importación.