Skip to content

SyntaxError: Named export '__assign' not found. The requested module 'tslib' is a CommonJS module. #117

@pere-seapoint

Description

@pere-seapoint

Describe the bug

I have this component:

import { TagInput, TagInputProps } from 'emblor';

export const InputTag = (props: TagInputProps) => {
  return (
    <>
      <TagInput
        {...props}
        placeholder="Type email to exclude sender"
        styleClasses={{
          inlineTagsContainer:
            'bg-seapoint-gray-background-modal rounded-lg border-[0.5px] border-seapoint-gray-border p-3 min-h-[57px]',

          tagList: {
            container: 'bg-red-500',
            sortableList: 'bg-blue-500',
          },
          tag: {
            body: 'bg-white rounded-[10px] py-1.5 text-black text-xs font-medium leading-6 tracking-tight px-2',
            closeButton: 'text-seapoint-gray font-medium px-0 ml-2.5 [&>svg]:w-4 [&>svg]:h-4',
          },
          input: 'text-black text-xs font-medium leading-6 tracking-tight pl-0 shadow-none',
        }}
      />
    </>
  );
};

I use vitest as a test-runner:

import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { InputTag } from './tag-input';

describe('InputTag', () => {
  it('should render the component', async () => {
    render(<InputTag tags={[]} setTags={() => {}} activeTagIndex={0} setActiveTagIndex={() => {}} inputName="test" />);

    expect(await screen.findByPlaceholderText('Type email to exclude sender')).toBeInTheDocument();
  });
});

I get this error:

SyntaxError: Named export '__assign' not found. The requested module 'tslib' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'tslib';
const { __rest, __assign } = pkg;

I have tried mocking tslib as someone recommended online (adding the following to the test):

vi.mock('tslib', async () => {
  return {
    __rest: () => {},
    __assign: () => {},
  };
});

No success. I think it is similar to #68 but not really - I don't use ssr. There is also vitest-dev/vitest#1753, but registerNodeLoader seems to be deprecated and replaced with deps.optimizer.web. But that seems to have been rolled back as well.

tslib is a dependency of emblor indeed. I also tried finding a test file in emblor that I could get inspiration from, but I couldn't find one.

Anyone has any idea how to fix this? Thanks!

How to reproduce

  1. Create the component and test listed above.
  2. When running the test on vitest, you should see the error above

Link to reproduction

.

Additional information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions