react.tagify.jsx Failed to compile

[GNITOAHC]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed

I'm currently using NextJs.

To reproduce the error, simply npx create-next-app@latest tagify --typescript --tailwind --eslint and change the app/page.tsx to the following.

'use client'
import React from 'react'
import Tags from '@yaireo/tagify/dist/react.tagify'
import '@yaireo/tagify/dist/tagify.css'

export default function Home() {
  const [tags, setTags] = React.useState<{ tags: string[] }>({ tags: [] })
  const tagOnChange = React.useCallback((e: any) => {
    const allTags: [] = e.detail.tagify
      .getCleanValue()
      .map((tagifyTags: any) => tagifyTags.value)
    setTags({ tags: allTags })
  }, [])
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <p>Hello</p>
      <Tags
        onChange={tagOnChange}
        placeholder="tags"
        whitelist={[]}
        settings={{ autoComplete: { enabled: true } }}
      />
    </main>
  )
}

This is my package.json

{
  "name": "tagify",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@yaireo/tagify": "^4.26.4",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/yaireo__tagify": "^4.24.0",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Explanation

• What is the expected behavior?

Compile successfully

• What is happening instead?

Can't compile

• What error message are you getting?

 ⨯ ./node_modules/@yaireo/tagify/src/react.tagify.jsx
Module parse failed: Unexpected token (20:77)
|             let isReactComp = String(Template).includes("jsxRuntime")
|             if (isReactComp)
>                 templates[templateName] = (...props) => renderToStaticMarkup(<Template props={props} />)
|         }
|     }

Although the language server complain about the path error at import Tags from '@yaireo/tagify/dist/react.tagify', but I think the true problem occurs on the compilation. (And I think @types/yaireo__tagify isn't up to date) Because changing import path to import Tags from '@yaireo/tagify/src/react.tagify' will occur error as following which isn't a compiler error.

Module not found: Package path ./src/react.tagify is not exported from package /path/tagify/node_modules/@yaireo/tagify (see exports field in /path/tagify/node_modules/@yaireo/tagify/package.json)
  1 | 'use client'
  2 | import React from 'react'
> 3 | import Tags from '@yaireo/tagify/src/react.tagify'
    | ^
  4 | import '@yaireo/tagify/dist/tagify.css'
  5 |
  6 | export default function Home() {

[yairEO]

Hi, please try the new version https://github.com/yairEO/tagify/releases/tag/v4.26.5

Also, trying importing Tags like so: import Tags from '@yaireo/tagify/react

[Quared]

@yairEO Seems like https://registry.yarnpkg.com/@types/yaireo__tagify/ is not updated

[yairEO]

@Quared - I don't know this repository and it is not mine. I advise not to use this @types repo.

[kevalrathod]

tagify version "@yaireo/tagify": "^4.27.5", Next 14 App router

while importing this, import Tags from '@yaireo/tagify/react'; import '@yaireo/tagify/dist/tagify.css' // Tagify CSS

gives me error of