Using with Next.js

[drusellers]

While trying to use this library (version 1.1.6) with next.js (version 10) I get the following error.

.../site/node_modules/react-every-layout/lib/index.js:1
import Box from './layouts/Box';
       ^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:720:22)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at eval (webpack-internal:///react-every-layout:1:18)
    at Object.react-every-layout (.../site/.next/server/pages/index.js:571:1)
    at __webpack_require__ (.../site/.next/server/pages/index.js:23:31)
    at eval (webpack-internal:///./components/layout.js:9:76)

From what I can tell, I can't see why this is a webpack error. The syntax of the import Box from './layouts/Box'; looks legit to me. The Box is exporting a default value. 🤔

[gorkamolero]

I have this exact same issue @drusellers. Have you found a solution?

[drusellers]

I ended up pulling the project into my own code base, and then loading them in a useEffect. Note the path says styles but its pulling in the JS files.

  useEffect(() => {
    import('../styles/every-layout/Box')
    import('../styles/every-layout/Center')
    import('../styles/every-layout/Cluster')
    import('../styles/every-layout/Cover')
    import('../styles/every-layout/Frame')
    import('../styles/every-layout/Grid')
    import('../styles/every-layout/Imposter')
    import('../styles/every-layout/Reel')
    import('../styles/every-layout/Sidebar')
    import('../styles/every-layout/Stack')
    import('../styles/every-layout/Switcher')
  }, [])