Plugin only works on Hard Reload [NextJS 14 with App Router, Preline 2.0]

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

https://preline.co

Other

4.84k stars 306 forks source link

Plugin only works on Hard Reload [NextJS 14 with App Router, Preline 2.0] #159

Closed afcreative closed 11 months ago

afcreative commented 11 months ago

The plugin only works if I do a hard reload (Ctrl+Shift+R), if I do a normal reload then the plugin doesn't work at all. Here's the code implementation:

tailwind.config

/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './component/**/*.{js,ts,jsx,tsx,mdx}',
    './template/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/preline/dist/*.js',
  ],
  plugins: [
    require('preline/plugin'),
  ],
}

export default config;

library/preline.tsx

"use client";

import { useEffect } from "react";

export default function Preline() {
  useEffect(() => {
    require("preline");
  }, []);

  return <></>;
}

app/layout.tsx

...

import Preline from "@/library/preline";

...

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Preline />
      <html lang={process.env.APP_LANGUAGE || "id"}>{children}</html>
    </>
  );
}

afcreative commented 11 months ago

After a few minutes of exploration, it turned out to just throw away useEffect, it felt like the documentation needed to be updated

library/preline.tsx

"use client";

import { useEffect } from "react";

export default function Preline() {
  require("preline");

  return <></>;
}

hiteshjoshi commented 11 months ago

`'use client'

export default function PrelineScript() { require('preline')

return <></> } `

gives me

error node_modules/preline/dist/preline.js (2:222) @ eval
- error ReferenceError: self is not defined
    at __webpack_require__ (/Users/hj/Dev/website/.next/server/webpack-runtime.js:33:42)
    at PrelineScript (./src/components/PrelineScript.tsx:9:5)
null

avfridrik commented 11 months ago

I have same error:

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

Preline.tsx

"use client";
export default function Preline() 
{ 
  require("preline");
  return <></>;
}

/app/layout.tsx

return (
    <>
      <Preline />
      <html lang="en">
        <body className="bg-gray-50 dark:bg-slate-900">
          <Providers>{props.children}</Providers>
        </body>
      </html>
    </>
  );
}

but Client component

"use client";

import React from "react";
export default function Preline() {
  React.useEffect(() => {
    console.log("preline");
    require("preline");
  }, []);

  return <></>;
}

not working

preline 2.0.0 nextjs 14.0.1

avfridrik commented 11 months ago

Work for me!

"use client";

import React from "react";
import("preline");

export default function Preline() {
  return <></>;
}

hiteshjoshi commented 11 months ago

It builds on nextjs14.0.1 but I still get the error.


ReferenceError: self is not defined
    at 5343 (/Users/hj/Dev/ploton/website/.next/server/chunks/343.js:1:122)
    at __webpack_require__ (/Users/hj/Dev/website/.next/server/webpack-runtime.js:1:145)
    at __webpack_require__.t (/Users/hj/Dev/website/.next/server/webpack-runtime.js:1:487)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:538:9)
    at process.processTimers (node:internal/timers:512:7)
ReferenceError: self is not defined
    at 5343 (/Users/hj/Dev/ploton/website/.next/server/chunks/343.js:1:122)
    at __webpack_require__ (/Users/hj/Dev/website/.next/server/webpack-runtime.js:1:145)
    at __webpack_require__.t (/Users/hj/Dev/website/.next/server/webpack-runtime.js:1:487)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:538:9)```

jahaganiev commented 11 months ago

Hey everyone, our team just recently updated Framework Guides page for Next.js 14 with live playground demos - https://preline.co/docs/frameworks-nextjs.html

Cheers!