How to dynamically import non-React client side libraries in Next.js?

by

next/dynamic is used to dynamically import React components.

To dynamically import regular JavaScript libraries you can simply use ES2020 dynamic import().

import { useEffect } from "react";

export default function Music({ note }) {
    useEffect(() => {
        const abcjsInit = async () => {
            const abcjs = await import("abcjs");
            abcjs.renderAbc("paper", "X:1\nK:D\nDDAA|BBA2|\n")
        };
        abcjsInit();
    }, []);

    return (
        <div id="paper"></div>
    )
}

More Related Contents:

  1. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  2. Warning: Text content did not match. Server: “I’m out” Client: “I’m in” div
  3. How to access files uploaded to the public folder in Next.js?
  4. Can’t import SVG into Next.js
  5. NextJS environment variables aren’t working
  6. Next.js – Error: only absolute urls are supported
  7. Target Active Link when the route is active in Next.js
  8. Nextjs: Unable to load images from static folder
  9. Display Info Window on the multiple coordinates on the arcgis map in Next JS
  10. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  11. How to setup i18n translated URL routes in Next.js?
  12. NextJs CORS issue
  13. How does the revalidate process in Incremental Static Regeneration work?
  14. How to type a page component with props in Next.js?
  15. How to hash CSS class names in Nextjs?
  16. Persistent navigation in a NextJs _app
  17. Dynamically build classnames in TailwindCss
  18. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  19. Loading Screen on Next.js page transition
  20. Next.js router is returning query parameters as undefined on first render?
  21. How to detect window size in Next.js SSR using react hook?
  22. Unable to load images from static folder
  23. Get URL pathname in nextjs
  24. Next Image not taking class properties
  25. How to handle login failed error in NextAuth.js?
  26. We simply cannot write “ in ReactJS?
  27. Clear and reset form input fields
  28. useNavigate() may be used only in the context of a component
  29. React fetch data in server before render
  30. Call child component method from parent in react

Leave a Comment