Can't resolve 'etro' on Next 13. about etro HOT 13 CLOSED

Thanks, I reproduced it locally, and the error is being thrown because etro is a client-only framework, so it can only be imported in the browser. The usual solution is to defer the import to the browser, meaning the module gets imported in the browser, not in the server. I can't find any NextJS documentation or unofficial tutorials for how to lazy load a client-only library. For some reason, dynamic() can only be used to import modules whose default export is a React component.

Does anyone with more NextJS experience know of a way to lazy load a non-React library?

The only workaround I see is replacing the browser field in etro's package.json with main. Bundlers usually only consider a module "client-only" if its browser field is set. Replacing it with main would most likely allow it to get imported in the server. However, etro relies on DOM libraries, so this could result in unforeseen runtime issues.

from etro.

Thanks @stylessh, etro can now be imported in the client-side code of a NextJS project with the useEffect hook. The dynamic example results in a "document" is not defined error (it seems like etro is still being imported in Node). I hope this was just a typo in the example you provided and not an issue with etro.

I'll deploy these changes to npm shortly, thanks everyone 💯

from etro.

thanks for all the efforts @clabe45 💪

from etro.

Hi @stylessh, I tried to reproduce with NextJS 13 and typescript, but it built fine. I'm new to NextJS, what's App Directory? Did you install etro with npm i etro?

from etro.

the same as me.

from etro.

Can you include the steps to reproduce the issue

from etro.

Can you include the steps to reproduce the issue

just do npm i etro
then import it in any folders

from etro.

1. Create a next app. npx create-next-app.
2. Install the modules. npm i
3. Install etro. npm i etro
4. Import etro anywhere on your app.

from etro.

Thanks @clabe45. I got the same issue in SvelteKit. Replacing browser with main in the package.json file worked.

from etro.

Good to know, thank you, replacing browser with main sounds like a good idea. I'll try to get to it in the next few days, but if anyone wants to open a PR to do it that would be very helpful.

from etro.

Replacing browser with main in NextJS resulted in the following error, because now we're trying to access DOM globals (such as document) in Node:

$ npm run build                                                                                                                                                                         21:07:51

> [email protected] build
> next build

   ▲ Next.js 14.1.0

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
   Collecting page data  .ReferenceError: document is not defined
    at 9427 (/private/tmp/etro-test/.next/server/chunks/63.js:14:5794)
    at t (/private/tmp/etro-test/.next/server/webpack-runtime.js:1:127)
    at 2917 (/private/tmp/etro-test/.next/server/chunks/63.js:14:54463)
    at Function.t (/private/tmp/etro-test/.next/server/webpack-runtime.js:1:127)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async collectGenerateParams (/private/tmp/etro-test/node_modules/next/dist/build/utils.js:919:21)
    at async /private/tmp/etro-test/node_modules/next/dist/build/utils.js:1138:17
    at async Span.traceAsyncFn (/private/tmp/etro-test/node_modules/next/dist/trace/trace.js:151:20)

> Build error occurred
Error: Failed to collect page data for /_not-found
    at /private/tmp/etro-test/node_modules/next/dist/build/utils.js:1258:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}

Does anyone know how to lazy-load non-UI client libraries (i.e., packages that do not export a React component) in NextJS? This would solve the issue.

from etro.

@clabe45 usually importing it on useEffect hook.

useEffect(() => {
 const MyLibrary = import('etro').then(...)
}, [])

or importing your component with dynamic and disable completely ssr.

// EtroComponent.tsx
import etro from 'etro';

export const EtroComponent = () => {
 // all logic
  return <></>
}

and on your root page/component:

import dynamic from 'next/dynamic';

const EtroComponent = dynamic(() => import('EtroComponent.tsx'), {
  loading: () => <p>Loading...</p>,
  ssr: false // disable Server Side Rendering
})

export const Page = () => {
  return <EtroComponent />
}

from etro.

Fixed in v0.12.1!

from etro.