Tagify cannot be compiled with Vite

[majksner]

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

Explanation

• What is the expected behavior?

Vite should bundle and compile imports correctly

• What is happening instead?

Error during compilation and bundling

• What error message are you getting?

Error during compilation:

vite     | file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:46525
vite     | function e(e,n,r){throw new Error(r?`No known conditions for "${n}" specifier in "${e}" package`:`Missing "${n}" specifier in "${e}" package`)}function n(n,i,o,f){let s,u,l=r(n,o),c=function(e){let n=new Set(["default",...e.conditions||[]]);return e.unsafe||n.add(e.require?"require":"import"),e.unsafe||n.add(e.browser?"browser":"node"),n}(f||{}),a=i[l];if(void 0===a){let e,n,r,t;for(t in i)n&&t.length<n.length||("/"===t[t.length-1]&&l.startsWith(t)?(u=l.substring(t.length),n=t):t.length>1&&(r=t.indexOf("*",1),~r&&(e=RegExp("^"+t.substring(0,r)+"(.*)"+t.substring(1+r)).exec(l),e&&e[1]&&(u=e[1],n=t))));a=i[n];}return a||e(n,l),s=t(a,c),s||e(n,l,1),u&&function(e,n){let r,t=0,i=e.length,o=/[*]/g,f=/[/]$/;for(;t<i;t++)e[t]=o.test(r=e[t])?r.replace(o,n):f.test(r)?r+n:r;}(s,u),s}function r(e,n,r){if(e===n||"."===n)return ".";let t=e+"/",i=t.length,o=n.slice(0,i)===t,f=o?n.slice(i):n;return "#"===f[0]?f:o||!r?"./"===f.slice(0,2)?f:"./"+f:f}function t(e,n,r){if(e){if("string"==typeof e)return r&&r.add(e),[e];let i,o;if(Array.isArray(e)){for(o=r||new Set,i=0;i<e.length;i++)t(e[i],n,o);if(!r&&o.size)return [...o]}else for(i in e)if(n.has(i))return t(e[i],n,r)}}function o(e,r,t){let i,o=e.exports;if(o){if("string"==typeof o)o={".":o};else for(i in o){"."!==i[0]&&(o={".":o});break}return n(e.name,o,r||".",t)}}function f(e,r,t){if(e.imports)return n(e.name,e.imports,r,t)}
vite     |                         ^
vite     |
vite     | Error: Missing "./src/tagify" specifier in "@yaireo/tagify" package
vite     |     at e (file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:46525:25)
vite     |     at n (file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:46525:627)
vite     |     at o (file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:46525:1297)
vite     |     at resolveExportsOrImports (file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:47146:18)
vite     |     at resolveDeepImport (file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:47169:25)
vite     |     at tryNodeResolve (file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:46934:16)
vite     |     at ResolveIdContext.resolveId (file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:46684:19)
vite     |     at PluginContainer.resolveId (file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:49463:17)
vite     |     at async Object.<anonymous> (file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:66490:15)
vite     |     at async internalImporter (file:///Users/me/Projects/test/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:36916:22)
vite     |
vite     | Node.js v20.15.0

Everything works fine if I add "./src/tagify": "./src/tagify": in node_modules/@yaireo/tagify/package.json

"exports": {
    ".": {
      "import": "./dist/tagify.esm.js",
      "require": "./dist/tagify.js"
    },
    "./src/tagify": "./src/tagify",
    "./react": "./src/react.tagify",
    "./react.tagify": "./src/react.tagify",
    "./dist/react.tagify": "./dist/react.tagify.jsx",
    "./dist/react.tagify.jsx": "./dist/react.tagify.jsx",
    "./dist/tagify.min.js": "./dist/tagify.js",
    "./dist/tagify.min": "./dist/tagify.js",
    "./dist/tagify.esm.js": "./dist/tagify.esm.js",
    "./dist/tagify.polyfills.min.js": "./dist/tagify.polyfills.min.js",
    "./dist/tagify.vue": "./dist/tagify.vue",
    "./dist/tagify.css": "./dist/tagify.css"
  },

[ThaerHindawi]

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

[xSerioUsx78]

@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!

[majksner]

I don't use react.

[hrace009]

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)

[Timmaaaa]

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

[yairEO]

@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

[yairEO]

@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...

[majksner]

@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.

[yairEO]

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.

[majksner]

@yairEO I don't use React. It's just a vanilla JavaScript.

[yairEO]

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)

[majksner]

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';

[yairEO]

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?