Creé una biblioteca ReactJS y la publiqué en NPM y funciona bien en un proyecto ReactJS estándar, pero ahora tengo un NextJS y estoy tratando de agregarlo allí, esperaba que simplemente funcionara ya que NextJS es un marco sobre ReactJS con alguna funcionalidad adicional.
En app.js tengo lo siguiente:
import dynamic from 'next/dynamic' import {useEffect} from "react"; function MyApp({ Component, pageProps }) { const {CrashCatch, CrashCatchProvider} = dynamic(import('crashcatchlib-reactjs'), { ssr: false }) let crash_catch = new CrashCatch(); crash_catch.initialiseCrashCatch("12978650", "d7kqcewvshoyxbp564f8tm0zl", "1.0.1"); return ( .... ) } Cuando ejecuto esto, obtengo TypeError: CrashCatch is not a constructor
Intenté no usar una importación dinámica y hacer una importación estándar como import {CrashCatch, CrashCatchProvider} from "crashcatchlib-reactjs"; pero luego aparece el error SyntaxError: Cannot use import statement outside a module ]
El código fuente de la biblioteca de reactjs es de código abierto, por lo que está disponible en GitHub en https://github.com/Crash-Catch/CrashCatchLib-ReactJS . El index.js tiene la clase CrashCatch que tiene el constructor, por lo que no estoy seguro de por qué NextJS lo trata de manera diferente.
Nunca usé la biblioteca crashcatchlib-reactjs . Revisé que los documentos no pudieran entender cómo lo importan. Pero para solucionar este error:
SyntaxError: Cannot use import statement outside a module] Instale https://www.npmjs.com/package/next-transpile-modules . Si revisa los documentos, en next.config.js
// next.config.js const withTM = require('next-transpile-modules')(['crashcatchlib-reactjs']); module.exports = withTM({});dynamic import devuelve el componente cargable. Verifiqué que la importación dinámica funciona solo para componentes. Para poder usar import stament con ese paquete, aún debe agregar la configuración de next-transpile-modules . Luego crea un componente:importar {CrashCatch} desde "crashcatchlib-reactjs";
export default function ClientSideComponent(props){ // Write here the logic. return <>yourJsxLogicComponent</>; }Luego importe este componente dinámicamente:
const ClientSideComponent = dynamic(()=> import("./ClientSideComponent.js"), { ssr: false }); En este caso, use la importación dinámica de vanilla js. No estoy seguro si tiene que agregar la configuración de next-transpile-modules .
let CrashCatchImport, CrashCatchProviderImport; import("crashcatchlib-reactjs").then((CrashCatch, CrashCatchProvider) => { CrashCatchImport = CrashCatch.default; CrashCatchProviderImport=CrashCatchProvider.default; });NextJS ejecuta código en el lado del servidor, por lo que su biblioteca también debería ser compatible con Node. Parece que la importación no es compatible con CommonJS, que es el formato de módulo predeterminado utilizado por Node. Sin embargo, puede especificar que su biblioteca debe tratarse como un módulo ES para admitir declaraciones de importación como se describe en la documentación https://nodejs.org/api/esm.html#habilitation
Node.js trata el código JavaScript como módulos CommonJS de forma predeterminada. Los autores pueden decirle a Node.js que trate el código JavaScript como módulos ECMAScript a través de la extensión de archivo .mjs, el campo "tipo" de package.json o la marca --input-type. Ver Módulos: Paquetes para más detalles.
Puede intentar establecer la propiedad de type en el module en su paquete.json