search

XantreDev / preact-signals

Preact Signals: Supercharge your React/Preact development! Unleash the power of reactive programming with hooks, components, a TanStack query adapter, and more. Code smarter, not harder
https://preact-signals.netlify.app/#/
MIT License
66 stars 1 forks source link

Can't get this working with NextJs 14 #88

Closed geezz07 closed 8 months ago

geezz07 commented 8 months ago

I get the following error, "useRef 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/react-client-hook-in-server-component", when I add "swcPlugins: [["@preact-signals/safe-react/swc", {}]]" to my next.config.js

package.json: "dependencies": { "@babel/core": "^7.0.0", "@preact-signals/safe-react": "^0.5.0", "@swc/core": "^1.3.100", "@tippyjs/react": "^4.2.6", "@vercel/speed-insights": "^1.0.9", "framer-motion": "^11.0.3", "next": "^14.1.0", "react": "^18", "react-dom": "^18", "react-intersection-observer": "^9.5.3", "reflect-metadata": "^0.2.1", "sharp": "^0.32.6", "swiper": "^11.0.5", "tsyringe": "^4.8.0", "use-debounce": "^10.0.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.1", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } next.config.js `/* @type {import('next').NextConfig} / const nextConfig = { experimental: { swcPlugins: [["@preact-signals/safe-react/swc", {}]], }, reactStrictMode: false }

module.exports = nextConfig `

If I add 'use client' to my page.tsx and layout.tsx it seems to compile but that seems to defeat the purpose of NextJs.

XantreDev commented 8 months ago

Here is how to deal with the problem

XantreDev commented 8 months ago

https://github.com/XantreGodlike/preact-signals/issues/82#issuecomment-1963604102

geezz07 commented 8 months ago

Amazing, I appreciate the help!