Closed majksner closed 1 week ago
I have the same error and I am using the latest version
my error look like this: [plugin:vite:import-analysis] Missing "./src/react.tagify" specifier in "@yaireo/tagify" package
@majksner @ThaerHindawi
Hi, it is a little bit late, but i had the same issue, i just created a custom react wrapper component. This was my approach:
import { useEffect, useRef } from "react";
import Tagify from "@yaireo/tagify";
import "@yaireo/tagify/dist/tagify.css"; // Tagify CSS
const Tags = ({
...rest
}) => {
const inputRef = useRef(null);
const tagifyRef = useRef(null);
useEffect(() => {
let tagify = new Tagify(inputRef.current);
tagifyRef.current = tagify;
}, []);
const handleChange = (e) => {
console.log(e.target.value);
};
return (
<input
ref={inputRef}
onChange={handleChange}
className="w-full rounded-md"
value="tag1,tag2"
/>
);
};
export default Tags;
This is just an example of what i did, you can customize it as you wish. have a great day!
I don't use react.
Same here,
app.js
import '@yaireo/tagify/dist/tagify.js'
PS C:\xampp\htdocs\transmittal> npm run build
> build
> vite build
vite v5.3.4 building for production...
✓ 1 modules transformed.
x Build failed in 24ms
error during build:
[commonjs--resolver] Missing "./dist/tagify.js" specifier in "@yaireo/tagify" package
at e (file:///C:/xampp/htdocs/transmittal/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:46570:25)
at n (file:///C:/xampp/htdocs/transmittal/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:46570:627)
at o (file:///C:/xampp/htdocs/transmittal/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:46570:1297)
at resolveExportsOrImports (file:///C:/xampp/htdocs/transmittal/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:47191:18)
at resolveDeepImport (file:///C:/xampp/htdocs/transmittal/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:47214:25)
at tryNodeResolve (file:///C:/xampp/htdocs/transmittal/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:46979:16)
at Object.resolveId (file:///C:/xampp/htdocs/transmittal/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:46729:19)
at file:///C:/xampp/htdocs/transmittal/node_modules/rollup/dist/es/shared/node-entry.js:19808:40
at async PluginDriver.hookFirstAndGetPlugin (file:///C:/xampp/htdocs/transmittal/node_modules/rollup/dist/es/shared/node-entry.js:19708:28)
at async resolveId (file:///C:/xampp/htdocs/transmittal/node_modules/rollup/dist/es/shared/node-entry.js:18389:26)
I have the same issue running Vite 5.3.1 & the latest Tagify (4.27.0), but with the "./src/tagify.scss" file. Adding
"./src/tagify": "./src/tagify",
"./src/tagify.scss": "./src/tagify.scss",
in node_modules/@yaireo/tagify/package.json has fixed it for me. But I'd rather not have to update that package.json every npm u. Thanks & have a great day
@xSerioUsx78 - there is already a React wrapper (see the README) so I don't understand why you did that. also, the real react-wrapper is far more complex than yours by necessity
@majksner - it is important you include the code of how you are importing it.
please edit and include that detail in, and I will examine
I am sorry but I was on a long vacation and had no time to respond until now...
@yairEO
Sorry, I have forgot to include that.
import Tagify from '@yaireo/tagify'
import Tagify from '@yaireo/tagify/dist/tagify.esm.js
Tried both and both not working.
I cannot seem to reproduce this because I have a Vite test project which is using Tagify successfully:
https://github.com/yairEO/tagify-react-test
can you please create a minimal example in https://codesandbox.io and share with me? this is very interesting.
@yairEO I don't use React. It's just a vanilla JavaScript.
it doesn't matter that it is a React project, still Vite
works with almost identical import path, which imports the React wrapper which by itself just imports Tagify, as-is:
import Tags from `@yaireo/tagify/react`
it's essentially a wrapper for
import Tagify from `@yaireo/tagify`
if you can, I would really appreciate you creating a simple codesandbox demo with the issue. initialize it with vite
+ javascript (no react or anything)
I have found the issue, it's not coming from import Tagify from '@yaireo/tagify'
in javascript file, but from a CSS import.
- @import '@yaireo/tagify/src/tagify';
+ @import '@yaireo/tagify/dist/tagify.css';
But it works well in my Vite test project:
https://github.com/yairEO/tagify-react-test/blob/master/src/App.jsx#L3
Maybe something regarding your Vite config file or tsconfig
file?
Prerequisites
Explanation
Vite should bundle and compile imports correctly
Error during compilation and bundling
Error during compilation:
Everything works fine if I add
"./src/tagify": "./src/tagify"
: in node_modules/@yaireo/tagify/package.json