[Vite + React] memo is not defined

[taitems]

✅ Prerequisites

💥 Demo Page

To test the full Vite setup I made an example repository here

Explanation

I was very keen to use this plugin as it solves my exact use case, but unfortunately it won't start for my setup.

• What is the expected behavior?

Should be able to follow the examples and setup instructions to get a working example live.

• What is happening instead?

I hit the following error when running React with Vite:

• What error message are you getting?

[vite] TypeError: memo is not a function

from const Tags = memo(TagifyWrapper);

and the way Vite is transpiling in dev mode looks like this:

import React, {memo, useMemo, useEffect, useRef, useCallback, renderToStaticMarkup} from "/node_modules/@yaireo/tagify/src/react-compat-layer.js?v=7d121e60";

After a bit of research I'm wondering if it's because you disallowed direct imports from the /src/ folder?

[yairEO]

What do you mean I disallowed direct imports from the /src/ folder?

[taitems]

I'm struggling to find the exact reference because I looked through so many issues. It was possibly this one?

This disallows any import from arbitrary paths in the package; imports must now use @yaireo/tagify/react. (Since that is a breaking change, the major version should have been incremented).

[Qiming-Liu]

Same issue, same Vite + React

[yairEO]

Maybe.. I need to find the time to investigate this... maybe in a few days as I am working a demanding full-time job. I do want to help but I have deadlines...

[sabelossa]

Similar issue, nextjs 15 react 18/19.

Tested in both your implementation and my basic one with both react 18 and 19, got an error regarding memo not being a function.

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

export default function Page() {
  return (
    <div>
      <Tags
        settings={{
          maxTags: 5,
        }}
      />
    </div>
  );
}

TypeError: _react_compat_layer__WEBPACK_IMPORTED_MODULE_1__.memo is not a function

  281 |
> 282 | const Tags = memo(TagifyWrapper)
      |                   ^
  283 | Tags.displayName = "Tags"
  284 |
  285 |

[kkragoth]

I'm working on project migrating from webpack to vite already using tagify.

My current workaround is to update src/react.tagify.jsx to use:

import React, {memo, useMemo, useEffect, useRef, useCallback } from 'react'
import {renderToStaticMarkup} from './react-compat-layer'

instead of
importing React, {memo, ... } from './react-compat-layer'

These async initializations of reexported stuff in react-compat-layer don't work with vite. I have no idea why it's not imported from react in first place