search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.92k stars 1.12k forks source link

@parcel/core: packages/@react-aria/virtualizer/src/index.ts does not export 'useVirtualizer' #6937

Closed unional closed 2 weeks ago

unional commented 2 months ago

Provide a general summary of the issue here

when clone, yarn install, yarn start.

more errors when running yarn build

๐Ÿค” Expected Behavior?

able to start and build

๐Ÿ˜ฏ Current Behavior

fail

๐Ÿ’ Possible Solution

No response

๐Ÿ”ฆ Context

No response

๐Ÿ–ฅ๏ธ Steps to Reproduce

OP

Version

main branch

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

๐Ÿงข Your Company/Team

No response

๐Ÿ•ท Tracking Issue

No response

unional commented 2 months ago

Probably relate to #6582

yarn build have many errors, such as:

@parcel/transformer-typescript-types: Cannot find name 'global'.

  /Users/hwong/pan/adobe/react-spectrum/packages/@react-aria/utils/dist/types.d.ts:25:52
    24 | export const getOwnerDocument: (el: Element | null | undefined) => Document;
  > 25 | export const getOwnerWindow: (el: (Window & typeof global) | Element | null | undefined) => Window & typeof global;
  >    |                                                    ^^^^^^ Cannot find name 'global'.
    26 | interface Props {
    27 |     [key: string]: any;

@parcel/transformer-typescript-types: Cannot find module '@adobe/spectrum-css-temp/components/contextualhelp/vars.css' or its corresponding type declarations.

  /Users/hwong/pan/adobe/react-spectrum/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx:18:24
    17 | import HelpOutline from '@spectrum-icons/workflow/HelpOutline';
  > 18 | import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';
  >    |                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module '@adobe/spectrum-css-temp/components/contextualhelp/vars.css' or its corresponding type declarations.
    19 | import InfoOutline from '@spectrum-icons/workflow/InfoOutline';
    20 | // @ts-ignore

yarn cache clean does not fix it.

> yarn build
parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/{message,string,date,number}/ packages/react-aria-components --no-optimize --config .parcelrc-build
libc++abi: terminating due to uncaught exception of type std::__1::system_error: mutex lock failed: Invalid argument
make: *** [build] Abort trap: 6

> yarn build
parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/{message,string,date,number}/ packages/react-aria-components --no-optimize --config .parcelrc-build
make: *** [build] Segmentation fault: 11

I'm on node v20.12.2. Also trying on v18.20.1

Deleting parcel cache fix the yarn start issue.

snowystinger commented 2 months ago

if you have run build at any point, future commands may not work as imports may resolve to the built artifacts instead. It's easiest to run a make clean_all && yarn after a build before running anything else

also, if you switch between running the docs/storybooks/build/etc, you will want to clean the parcel cache rm -rf .parcel-cache because all of them use parcel and don't differentiate between caches at the moment.

i know we work on node 18 on Mac, that's what I'm using and I'm not seeing any issues.

unional commented 2 months ago

Thanks. Running make clean_all && yarn fixes the yarn start issue.

However, when I run yarn build, I got many build errors:

parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/{message,string,date,number}/ packages/react-aria-components --no-optimize --config .parcelrc-build
โ ‹ Building index.ts...
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest

@parcel/transformer-typescript-types: Property 'style' does not exist on type 'Element'.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-aria/focus/src/isElementVisible.ts:21:39
    20 | 
  > 21 |   let {display, visibility} = element.style;
  >    |                                       ^^^^^ Property 'style' does not exist on type 'Element'.
    22 | 
    23 |   let isVisible = (

@parcel/transformer-typescript-types: Property 'type' does not exist on type 'EventTarget'.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-aria/interactions/src/useFocusVisible.ts:293:82
    292 |   isTextInput = isTextInput ||
  > 293 |     (e?.target instanceof IHTMLInputElement && !nonTextInputTypes.has(e?.target?.type)) ||
  >     |                                                                                  ^^^^ Property 'type' does not exist on type 'EventTarget'.
    294 |     e?.target instanceof IHTMLTextAreaElement ||
    295 |     (e?.target instanceof IHTMLElement && e?.target.isContentEditable);

@parcel/transformer-typescript-types: Property 'isContentEditable' does not exist on type 'EventTarget'.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-aria/interactions/src/useFocusVisible.ts:295:53
    294 |     e?.target instanceof IHTMLTextAreaElement ||
  > 295 |     (e?.target instanceof IHTMLElement && e?.target.isContentEditable);
  >     |                                                     ^^^^^^^^^^^^^^^^^ Property 'isContentEditable' does not exist on type 'EventTarget'.
    296 |   return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
    297 | }

@parcel/transformer-typescript-types: Property 'key' does not exist on type 'HandlerEvent'.
  Property 'key' does not exist on type 'PointerEvent'.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-aria/interactions/src/useFocusVisible.ts:296:113
    295 |     (e?.target instanceof IHTMLElement && e?.target.isContentEditable);
  > 296 |   return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
  >     |                                                                                                                 ^^^ Property 'key' does not exist on type 'HandlerEvent'.
    Property 'key' does not exist on type 'PointerEvent'.
    297 | }
    298 | 

@parcel/transformer-typescript-types: Argument of type 'HTMLElement' is not assignable to parameter of type 'HTMLInputElement'.
  Type 'HTMLElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 55 more.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-aria/interactions/src/usePress.ts:799:88
    798 |     (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') &&
  > 799 |     !((element instanceof getOwnerWindow(element).HTMLInputElement && !isValidInputKey(element, key)) ||
  >     |                                                                                        ^^^^^^^ Argument of type 'HTMLElement' is not assignable to parameter of type 'HTMLInputElement'.
    Type 'HTMLElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 55 more.
    800 |       element instanceof getOwnerWindow(element).HTMLTextAreaElement ||
    801 |       element.isContentEditable) &&

@parcel/transformer-typescript-types: Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-aria/ssr/src/SSRProvider.tsx:87:9
    86 |   if (typeof React['useId'] === 'function') {
  > 87 |     if (process.env.NODE_ENV !== 'test' && !warnedAboutSSRProvider) {
  >    |         ^^^^^^^ Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.
    88 |       console.warn('In React 18, SSRProvider is not necessary and is a noop. You can remove it from your app.');
    89 |       warnedAboutSSRProvider = true;

@parcel/transformer-typescript-types: Cannot find name 'global'.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-aria/utils/src/domHelpers.ts:6:24
    5 | export const getOwnerWindow = (
  > 6 |   el: (Window & typeof global) | Element | null | undefined
  >   |                        ^^^^^^ Cannot find name 'global'.
    7 | ): Window & typeof global => {
    8 |   if (el && 'window' in el && el.window === el) {

@parcel/transformer-typescript-types: An implementation cannot be declared in ambient contexts.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-aria/table/src/index.d.ts:24:54
    23 | import {GridRowGroupAria, useGridRowGroup} from '@react-aria/grid';
  > 24 | export function useTableRowGroup(): GridRowGroupAria {
  >    |                                                      ^ An implementation cannot be declared in ambient contexts.
    25 |   return useGridRowGroup();
    26 | }

@parcel/transformer-typescript-types: Property 'value' does not exist on type 'TextFieldHTMLElementType[T]'.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-aria/textfield/src/useTextField.ts:155:26
    154 |       Object.defineProperty(input, 'defaultValue', {
  > 155 |         get: () => input.value,
  >     |                          ^^^^^ Property 'value' does not exist on type 'TextFieldHTMLElementType[T]'.
    156 |         set: () => {},
    157 |         configurable: true

@parcel/transformer-typescript-types: Top-level declarations in .d.ts files must start with either a 'declare' or 'export' modifier.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-stately/flags/src/index.d.ts:13:1
    12 | 
  > 13 | let _tableNestedRows = false;
  >    | ^^^ Top-level declarations in .d.ts files must start with either a 'declare' or 'export' modifier.
    14 | 
    15 | export function enableTableNestedRows() {

@parcel/transformer-typescript-types: Initializers are not allowed in ambient contexts.

  /home/unional/code/adobe/react-spectrum/node_modules/@react-stately/flags/src/index.d.ts:13:24
    12 | 
  > 13 | let _tableNestedRows = false;
  >    |                        ^^^^^ Initializers are not allowed in ambient contexts.
    14 | 
    15 | export function enableTableNestedRows() {

@parcel/transformer-typescript-types: Cannot find module 'bundle-text:./cursors/Cur_MoveToRight_9_9.svg' or its corresponding type declarations.

  /home/unional/code/adobe/react-spectrum/packages/@react-spectrum/table/src/Resizer.tsx:4:21
    3 | import {ColumnSize} from '@react-types/table';
  > 4 | import eCursor from 'bundle-text:./cursors/Cur_MoveToRight_9_9.svg';
  >   |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module 'bundle-text:./cursors/Cur\_MoveToRight\_9\_9.svg' or its corresponding type declarations.
    5 | import ewCursor from 'bundle-text:./cursors/Cur_MoveHorizontal_9_9.svg';
    6 | import {FocusRing} from '@react-aria/focus';

@parcel/transformer-typescript-types: Cannot find module 'bundle-text:./cursors/Cur_MoveHorizontal_9_9.svg' or its corresponding type declarations.

  /home/unional/code/adobe/react-spectrum/packages/@react-spectrum/table/src/Resizer.tsx:5:22
    4 | import eCursor from 'bundle-text:./cursors/Cur_MoveToRight_9_9.svg';
  > 5 | import ewCursor from 'bundle-text:./cursors/Cur_MoveHorizontal_9_9.svg';
  >   |                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module 'bundle-text:./cursors/Cur\_MoveHorizontal\_9\_9.svg' or its corresponding type declarations.
    6 | import {FocusRing} from '@react-aria/focus';
    7 | import {GridNode} from '@react-types/grid';

Does it mean I should not run yarn build at all (as it is not mentioned in the contributing.md), or there are something else I'm missing?

btw, running yarn test is main currently has one fail test:

 FAIL  packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js
  โ— LabeledValue โ€บ renders correctly with RangeValue<NumberValue>

    expect(element).toHaveTextContent()

    Expected element to have text content:
      10 โ€“ 20
    Received:
      Field label10โ€“20

      273 |     let staticField = getByTestId('test-id');
      274 |     expect(staticField).toBeInTheDocument();
    > 275 |     expect(staticField).toHaveTextContent('10 โ€“ 20');
          |                         ^
      276 |   });
      277 |
      278 |   it('attaches a user provided ref to the outer div', function () {

      at Object.toHaveTextContent (packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js:275:25)
snowystinger commented 2 months ago

yarn build is fine, it looks like it has a bunch of errors, but if you let it continue, it'll finish just fine.

the reason you're seeing the test failure is probably because you're on a different version of node from what we test on, which is 18.20.3 right now