Syntax error in `global`

sho-tanaka0210 commented 6 months ago

I have followed the following installation procedure and am getting the following error.

Does anyone else have the same problem? Thanks.

 ⨯ ./src/components/commons/PrelineScript.jsx
Error: 
  × Expected ';', '}' or <eof>
    ╭─[/Users/usename/Documents/folder/front/src/components/commons/PrelineScript.jsx:4:1]
  4 │ import { useEffect } from "react";
  5 │ 
  6 │ import { IStaticMethods } from "preline/preline";
  7 │ declare global {
    · ───┬─── ──────
    ·    ╰── This is the expression part of an expression statement
  8 │   interface Window {
  9 │     HSStaticMethods: IStaticMethods;
 10 │   }
    ╰────

Caused by:
    Syntax Error

Import trace for requested module:
./src/components/commons/PrelineScript.jsx
./src/app/layout.tsx
 ✓ Compiled /folder/register/page in 699ms (234 modules)
 ⨯ ./src/components/commons/PrelineScript.jsx
Error: 
  × Expected ';', '}' or <eof>
    ╭─[/Users/username/Documents/folder/front/src/components/commons/PrelineScript.jsx:4:1]
  4 │ import { useEffect } from "react";
  5 │ 
  6 │ import { IStaticMethods } from "preline/preline";
  7 │ declare global {
    · ───┬─── ──────
    ·    ╰── This is the expression part of an expression statement
  8 │   interface Window {
  9 │     HSStaticMethods: IStaticMethods;
 10 │   }
    ╰────

Caused by:
    Syntax Error

// src/components/commons/PrelineScript.jsx
"use client";

import { usePathname } from "next/navigation";
import { useEffect } from "react";

import { IStaticMethods } from "preline/preline";
declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}

export default function PrelineScript() {
  const path = usePathname();

  useEffect(() => {
    const loadPreline = async () => {
      await import("preline/preline");

      window.HSStaticMethods.autoInit();
    };

    loadPreline();
  }, [path]);

  return null;
}

// src/app/layout.tsx
import PrelineScript from '../components/commons/PrelineScript';

export default function RootLayout({ children, }: { children: React.ReactNode; }) {
  return (
    <html>
      <PrelineScript />
     .....
    </html>
  );
}

jahaganiev commented 6 months ago

Hey there, could you please provide full source code on Stackblitz? You may fork and modify from here.

sho-tanaka0210 commented 6 months ago

@jahaganiev It was very simple. Originally the file extension should have been tsx, but I had it as jsx.

Thanks.

htmlstreamofficial / preline

Syntax error in `global` #354