Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Yarn's link protocol status & other resolve problems #9139

Open
kubijo opened this issue Jan 30, 2025 · 7 comments
Open

Yarn's link protocol status & other resolve problems #9139

kubijo opened this issue Jan 30, 2025 · 7 comments
Assignees

Comments

@kubijo
Copy link

kubijo commented Jan 30, 2025

Hello. Since you landed the built-in Yarn PNP support, I tried to revisit replacing our webpack setup by RSpack, but it appears that it's still not working as expected.

1) is the link protocol supposed to work?

It doesn't seem so because I'm just getting errors that those dependencies cannot be found.
We are using those to clean up long relative imports in monorepo…

// from
import { foo } from '../../../shared/lib/util' ;
// to
import { foo } from 'lib/util' ;

package.json

{
    "dependencies": {
        "lib": "link:../../shared/lib/",
    },
}

2) Unknown [object Object] warnings

WARNING in ./shared/components/Promo/Promo.tsx
  ⚠ [object Object]

 @ ./shared/components/Promo/index.tsx
 @ ./shared/components/index.tsx
 @ ./shared/lib/layout/components/Layout.tsx
 @ ./shared/lib/layout/index.tsx
 @ ./packages/solo/index.tsx

3) 3rd party module imports broken

WARNING in ./shared/components/Promo/Promo.tsx
  ⚠ ESModulesLinkingWarning: export 'Information' (imported as 'Information') was not found in '@carbon/react/icons' (possible exports: AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHang, ComboBox, ComboButton, ComposedModal, ContainedList, ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGrid, FluidForm, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, unstable_FeatureFlags, unstable_Layout, unstable_LayoutDirection, unstable_OverflowMenuV2, unstable_PageSelector, unstable_Pagination, unstable_Text, unstable_TextDirection, unstable__AiSkeletonIcon, unstable__AiSkeletonPlaceholder, unstable__AiSkeletonText, unstable__ChatButton, unstable__ChatButtonSkeleton, unstable__FluidComboBox, unstable__FluidComboBoxSkeleton, unstable__FluidDatePicker, unstable__FluidDatePickerInput, unstable__FluidDatePickerSkeleton, unstable__FluidDropdown, unstable__FluidDropdownSkeleton, unstable__FluidMultiSelect, unstable__FluidMultiSelectSkeleton, unstable__FluidSearch, unstable__FluidSearchSkeleton, unstable__FluidSelect, unstable__FluidSelectSkeleton, unstable__FluidTextArea, unstable__FluidTextAreaSkeleton, unstable__FluidTextInput, unstable__FluidTextInputSkeleton, unstable__FluidTimePicker, unstable__FluidTimePickerSelect, unstable__FluidTimePickerSkeleton, unstable__Slug, unstable__SlugActions, unstable__SlugContent, unstable_useFeatureFlag, unstable_useFeatureFlags, unstable_useLayoutDirection, useContextMenu, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme)
@kubijo kubijo changed the title Yarn's link protocol status Yarn's link protocol status & other resolve problems Jan 30, 2025
Copy link
Contributor

github-actions bot commented Feb 6, 2025

Hello @kubijo, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

@stormslowly
Copy link
Contributor

hi @kubijo

problem 1

i have tried link protocol in my local env, i can't find any problem.
could you plz help to provider a mini reproduction example ?

And in my opinion , the link protocol is the responsibility of package manager not bundler.
From rspack's view, the import source lib will be resolved to node_moudules/lib/ as an normal npm package.

problem 2

it looks like a bug, but the log does not provide much clues, a reproduction example is also needed.

problem 3

in my local reproduce,

import { Information } from "@carbon/react" // 1.75.0

will emit the error with both rspack(@1.1.8) and webpack(@5.97.1)

import { Information } from "@carbon/react/icons" 

work with rspack , but does not working with webpack

so i need another reproduction.

@kubijo
Copy link
Author

kubijo commented Feb 6, 2025

Webpack

yarn run build-webpack
{
  entry: '/home/pepa/dev/rspack-link/packages/foo/index.js',
  output: {
    filename: 'index.js',
    path: '/home/pepa/dev/rspack-link/out/webpack'
  },
  module: {
    rules: [
      {
        test: /\.(?:js|mjs|cjs)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: { targets: 'defaults', presets: [ [ '@babel/preset-env' ] ] }
        }
      }
    ]
  }
}
asset index.js 11.9 KiB [emitted] [minimized] (name: main) 1 related asset
orphan modules 2.52 MiB [orphan] 26 modules
runtime modules 663 bytes 3 modules
cacheable modules 162 KiB
  modules by path ./.yarn/cache/prop-types-npm-15.8.1-17c71ee7ee-59ece7ca2f.zip/node_modul...(truncated) 2.6 KiB
    ./.yarn/cache/prop-types-npm-15.8.1-17c71ee7ee-59ece7ca2f.zip/node_modules/prop-...(truncated) 710 bytes [built] [code generated]
    ./.yarn/cache/prop-types-npm-15.8.1-17c71ee7ee-59ece7ca2f.zip/node_modules/prop-...(truncated) 1.6 KiB [built] [code generated]
    ./.yarn/cache/prop-types-npm-15.8.1-17c71ee7ee-59ece7ca2f.zip/node_modules/prop-...(truncated) 314 bytes [built] [code generated]
  modules by path ./.yarn/cache/react-npm-19.0.0-e33c9aa1c0-9cad8f103e.zip/node_modules/react/ 16.6 KiB
    ./.yarn/cache/react-npm-19.0.0-e33c9aa1c0-9cad8f103e.zip/node_modules/...(truncated) 186 bytes [built] [code generated]
    ./.yarn/cache/react-npm-19.0.0-e33c9aa1c0-9cad8f103e.zip/node_modules/react/cjs/...(truncated) 16.5 KiB [built] [code generated]
  ./packages/foo/index.js + 4 modules 143 KiB [built] [code generated]
webpack 5.97.1 compiled successfully in 835 ms

Rspack

Just two errors picked here, the whole thing is too big to fit

yarn run build-rspack
{
  entry: '/home/pepa/dev/rspack-link/packages/foo/index.js',
  output: {
    filename: 'index.js',
    path: '/home/pepa/dev/rspack-link/out/webpack'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: { jsc: { parser: { syntax: 'ecmascript' } } }
          }
        ]
      }
    ]
  }
}
ERROR in ./.yarn/cache/flatpickr-npm-4.6.13-06399933fc-0e027e72a2.zip/node_modules/flatpickr/dist/esm/index.js 29:0-55
  × Module not found: Can't resolve './utils' in '/home/pepa/dev/rspack-link/.yarn/cache/flatpickr-npm-4.6.13-06399933fc-0e027e72a2.zip/node_modules/flatpickr/dist/esm'
    ╭─[29:45]
 27 │ import { defaults as defaultOptions, HOOKS } from "./types/options";
 28 │ import English from "./l10n/default";
 29 │ import { arrayify, debounce, int, pad } from "./utils";
    ·                                              ─────────
 30 │ import { clearNode, createElement, createNumberInput, findParent, toggleClass, getEventTarget } from "./utils/dom";
 31 │ import { compareDates, createDateParser, createDateFormatter, duration, isBetween, getDefaultHours, calculateSecondsSinceMidnight, parseSeconds } from "./utils/dates";
    ╰────
ERROR in ./.yarn/unplugged/@carbon-icons-react-virtual-379302d360/node_modules/@carbon/icons-react/es/generated/bucket-0.js 66:0-30
  × Module not found: Can't resolve '@carbon/icon-helpers' in '/home/pepa/dev/rspack-link/.yarn/unplugged/@carbon-icons-react-virtual-379302d360/node_modules/@carbon/icons-react/es/generated'
    ╭─[66:7]
 64 │ import Icon from '../Icon.js';
 65 │ import { i as iconPropTypes } from '../iconPropTypes-4cbeb95d.js';
 66 │ import '@carbon/icon-helpers';
    ·        ──────────────────────
 67 │ import 'prop-types';
 68 │ var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _circle, _path19, _path20, _path21, _path22, _path23, _path24, _circle2, _path25, _path26, _path27, _path28, _path29, _path30, _path31, _path32, _path33, _path34, _path35, _path36, _path37, _path38, _path39, _path40, _path41, _path42, _path43, _path44, _path45, _path46, _path47, _path48, _path49, _path50, _path51, _path52, _path53, _path54, _path55, _path56, _path57, _path58, _path59, _path60, _path61, _path62, _path63, _path64, _path65, _path66, _path67, _path68, _path69, _path70, _path71, _path72, _path73, _path74, _path75, _path76, _circle3, _circle4, _circle5, _path77, _path78, _path79, _path80, _path81, _path82, _path83, _path84, _path85, _path86, _path87, _path88, _path89, _path90, _path91, _path92, _path93, _path94, _path95, _path96, _path97, _path98, _path99, _path100, _path101, _path102, _path103, _path104, _path105, _path106, _path107, _path108, _path109, _path110, _path111, _path112, _path113, _path114, _path115, _path116, _path117, _path118, _path119, _path120, _path121, _path122, _path123, _path124, _path125, _path126, _path127, _path128, _path129, _path130, _path131, _path132, _path133, _path134, _path135, _path136, _path137, _path138, _path139, _path140, _path141, _path142, _path143, _path144, _path145, _path146, _path147, _path148, _path149, _path150, _path151, _circle6, _path152, _path153, _path154, _path155, _path156, _path157, _path158, _path159, _path160, _circle7, _path161, _path162, _path163, _path164, _path165, _path166, _path167, _path168, _path169, _path170, _path171, _path172, _path173, _path174, _path175, _path176, _path177, _path178, _path179, _path180, _path181, _path182, _path183, _path184, _path185, _path186, _path187, _path188, _path189, _path190, _path191, _path192, _path193, _path194, _path195, _path196, _path197, _path198, _path199, _path200, _path201, _path202;
    ╰────

@kubijo
Copy link
Author

kubijo commented Feb 6, 2025

Oh, forgot the link... here: https://github.com/kubijo/rspack-link-repro

@kubijo
Copy link
Author

kubijo commented Feb 6, 2025

Now, one thing to note here that surprised me was a problem with ESM.

When I set up the repro as we have it in the other project, it didn't work without explicit extensions in the imports.

This surprised me quite a lot because we use extension-less imports in that project… but perhaps that is solved by some plugin in either webpack or babel ... or maybe in typescript?

I obviously tried to make as minimal repro as possible, so I opted to skip typescript and any plugins. It is however nice that webpack at least tells me that this bothers it, rspack is quiet about it.

yarn run build-webpack
{
  entry: '/home/pepa/dev/rspack-link/packages/foo/index.js',
  output: {
    filename: 'index.js',
    path: '/home/pepa/dev/rspack-link/out/webpack'
  },
  module: {
    rules: [
      {
        test: /\.(?:js|mjs|cjs)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: { targets: 'defaults', presets: [ [ '@babel/preset-env' ] ] }
        }
      }
    ]
  }
}
assets by status 492 bytes [cached] 1 asset
./packages/foo/index.js 125 bytes [built] [code generated]

ERROR in ./packages/foo/index.js 1:0-33
Module not found: Error: Can't resolve 'lib/util' in '/home/pepa/dev/rspack-link/packages/foo'
Did you mean 'util.js'?
BREAKING CHANGE: The request 'lib/util' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve 'lib/util' in '/home/pepa/dev/rspack-link/packages/foo'
  Parsed request is a module
  using description file: /home/pepa/dev/rspack-link/packages/foo/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      resolved by pnp to /home/pepa/dev/rspack-link/shared/lib/
        using description file: /home/pepa/dev/rspack-link/package.json (relative path: ./shared/lib/)
          using description file: /home/pepa/dev/rspack-link/package.json (relative path: ./shared/lib/util)
            Field 'browser' doesn't contain a valid alias configuration
            /home/pepa/dev/rspack-link/shared/lib/util doesn't exist

ERROR in ./packages/foo/index.js 2:0-56
Module not found: Error: Can't resolve '@carbon/react/icons/index' in '/home/pepa/dev/rspack-link/packages/foo'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@carbon/react/icons/index' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve '@carbon/react/icons/index' in '/home/pepa/dev/rspack-link/packages/foo'
  Parsed request is a module
  using description file: /home/pepa/dev/rspack-link/packages/foo/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      resolved by pnp to /home/pepa/dev/rspack-link/.yarn/unplugged/@carbon-react-virtual-ed977161de/node_modules/@carbon/react/
        using description file: /home/pepa/dev/rspack-link/.yarn/unplugged/@carbon-react-virtual-ed977161de/node_modules/@carbon/react/package.json (relative path: .)
          using description file: /home/pepa/dev/rspack-link/.yarn/unplugged/@carbon-react-virtual-ed977161de/node_modules/@carbon/react/icons/package.json (relative path: ./index)
            Field 'browser' doesn't contain a valid alias configuration
            /home/pepa/dev/rspack-link/.yarn/unplugged/@carbon-react-virtual-ed977161de/node_modules/@carbon/react/icons/index doesn't exist

webpack 5.97.1 compiled with 2 errors in 365 ms

@kubijo
Copy link
Author

kubijo commented Feb 6, 2025

As for the [object Object].

Is there any way for me to poke at something to inspect stuff while it's trying to print it?

Somewhere you are casting something to string and the project is too complex to know off-hand what this could result from.

The [object Object] string, however, looks like a JavaScript VM thing, so I'm hoping that there is a way to see inside with some --inspect-brk shenanigans if you catch my drift...

Worst-case scenario, I do have rust setup on my end and could also try to poke at that if you tell me what, where and how...

@stormslowly
Copy link
Contributor

@kubijo tough problem, it takes time; digging with rspack-resolve 💪

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants