Is there a way to use the screenfull javascript library within the Nextjs framework?

Question

I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.

import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})

Answer 1

you can create file in @utils folder with below code:

import screenfull from 'screenfull';

export default screenfull

then in your component do something like so:

import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../@utils/screenfull'))

Answer 2

The first question that comes to mind is what's the error you're getting? There's no reason you shouldn't be able to import any library you've installed locally! Did you actually install that package by running npm install screenfull on your terminal?

Answer 3

You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.

Next has some other great examples of how to use this functionality in your application.