search

morellodev / react-awesome-reveal

React components to add reveal animations using the Intersection Observer API and CSS Animations.
https://react-awesome-reveal.morello.dev
MIT License
1.09k stars 42 forks source link

Does not work on nextjs 14 #201

Open Johannes5 opened 5 months ago

Johannes5 commented 5 months ago

Describe the bug Does not work on nextjs 14 I think because emotion does not work with nextjs 13 and 14 emotion issue

I found out, because the reveals weren't triggered on my landing page after upgrading to 14.

To Reproduce use it in a fresh nextjs14 project

that's what I did. and I got:

null
 ⨯ node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41) @ React
 ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:8:78)
    at (rsc)/./src/app/page.tsx (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
null
 ⨯ node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41) @ React
 ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:8:78)
    at (rsc)/./src/app/page.tsx (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "931706966"
null
 ⨯ node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41) @ React
 ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:8:78)
    at (rsc)/./src/app/page.tsx (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
null
createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:35:92)
    at (rsc)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/@emotion.js:60:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js:9:95)
    at (rsc)/./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/@emotion.js:80:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-awesome-reveal/dist/index.js:16:84)
    at (rsc)/./node_modules/react-awesome-reveal/dist/index.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/react-awesome-reveal.js:40:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:8:78)
    at (rsc)/./src/app/page.tsx (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at async eq (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402260)
    at async tr (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:405987)
    at async tn (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406537)
    at async tn (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406668)
    at async tu (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057)
    at async /Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2564 {
  digest: '2636667005'
}
 ⨯ node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41) @ React
 ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:35:92)
    at (rsc)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/@emotion.js:60:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js:9:95)
    at (rsc)/./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/@emotion.js:80:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-awesome-reveal/dist/index.js:16:84)
    at (rsc)/./node_modules/react-awesome-reveal/dist/index.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/react-awesome-reveal.js:40:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:8:78)
    at (rsc)/./src/app/page.tsx (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at async eq (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402260)
    at async tr (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:405987)
    at async tn (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406537)
    at async tn (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406668)
    at async tu (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057)
    at async /Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2564 {
  digest: '2636667005',
  page: '/'

Potential solution Use Emotion v10 instead of v11. Another workaround is to use the @emotion/react and @emotion/styled packages instead of @emotion/core. You can find more information about these workarounds in the comments of the GitHub issue.

Johannes5 commented 5 months ago

and when "use client" added, it doesn't throw out the above errors, but the reveal does not work