[bug]: Error after cloning repo

Minecraftschurli commented 1 year ago

What version of strapi-design-system are you using?

yarn: 3.5.0
node: v18.11.0
design-system repo at commit strapi/design-system@5c0de191ef278ea93a0cddadbd9b5ffbda83054f

What's Wrong?

After cloning the repo the yarn setup command errors with Entry module "src/index.ts" cannot be external. for both the icons and the primitives package.

To Reproduce

clone repo
run yarn install
run yarn setup

Expected Behaviour

The setup should succeed and not error

Minecraftschurli commented 1 year ago

Here is a complete log of the yarn setup run


➤ YN0000: ┌ Resolution step
➤ YN0002: │ @lerna/legacy-package-management@npm:6.6.1 doesn't provide nx (pac4cf), requested by @nrwl/devkit
➤ YN0002: │ @storybook/addon-docs@npm:6.5.16 [618cd] doesn't provide @babel/core (pf4008), requested by @babel/preset-env
➤ YN0002: │ @storybook/addon-docs@npm:6.5.16 [618cd] doesn't provide @babel/core (p1505c), requested by babel-loader
➤ YN0002: │ @storybook/addon-docs@npm:6.5.16 [618cd] doesn't provide webpack (pbe748), requested by babel-loader
➤ YN0002: │ @storybook/docs-tools@npm:6.5.16 doesn't provide react (p9b542), requested by @storybook/store
➤ YN0002: │ @storybook/docs-tools@npm:6.5.16 doesn't provide react-dom (pc910b), requested by @storybook/store
➤ YN0002: │ @storybook/mdx1-csf@npm:0.0.1 doesn't provide @babel/core (pfc8fe), requested by @babel/preset-env
➤ YN0002: │ @storybook/telemetry@npm:6.5.16 doesn't provide react (p48f29), requested by @storybook/core-common
➤ YN0002: │ @storybook/telemetry@npm:6.5.16 doesn't provide react-dom (p479a1), requested by @storybook/core-common
➤ YN0002: │ @strapi/design-system-docs@workspace:docs doesn't provide @babel/core (p6a4bc), requested by @storybook/addon-essentials
➤ YN0002: │ @strapi/design-system-docs@workspace:docs doesn't provide eslint (pc436b), requested by eslint-plugin-mdx
➤ YN0060: │ @strapi/design-system-docs@workspace:docs provides react (peb232) with version 18.2.0, which doesn't satisfy what @storybook/addon-actions and some of its descendants request
➤ YN0060: │ @strapi/design-system-docs@workspace:docs provides react (p45d32) with version 18.2.0, which doesn't satisfy what @storybook/addon-essentials and some of its descendants request
➤ YN0060: │ @strapi/design-system-docs@workspace:docs provides react (p2e40c) with version 18.2.0, which doesn't satisfy what @storybook/react and some of its descendants request
➤ YN0060: │ @strapi/design-system-docs@workspace:docs provides react-dom (pf1159) with version 18.2.0, which doesn't satisfy what @storybook/react and some of its descendants request
➤ YN0002: │ @strapi/design-system-docs@workspace:docs doesn't provide react-is (p3e255), requested by styled-components
➤ YN0002: │ @strapi/design-system-docs@workspace:docs doesn't provide require-from-string (pf07ca), requested by @storybook/react
➤ YN0002: │ @strapi/design-system@workspace:packages/strapi-design-system doesn't provide @codemirror/view (pa6d88), requested by @uiw/react-codemirror
➤ YN0002: │ @strapi/design-system@workspace:packages/strapi-design-system doesn't provide playwright (pf701b), requested by axe-playwright
➤ YN0002: │ @strapi/design-system@workspace:packages/strapi-design-system doesn't provide react-is (p216d5), requested by styled-components
➤ YN0002: │ @strapi/design-system@workspace:packages/strapi-design-system [64d41] doesn't provide @codemirror/view (p53bcf), requested by @uiw/react-codemirror
➤ YN0002: │ @strapi/design-system@workspace:packages/strapi-design-system [64d41] doesn't provide playwright (pc1576), requested by axe-playwright
➤ YN0002: │ @strapi/eslint-config@npm:0.1.2 doesn't provide @babel/core (pceacb), requested by @babel/eslint-parser
➤ YN0002: │ @strapi/eslint-config@npm:0.1.2 doesn't provide prettier (p35773), requested by eslint-plugin-prettier
➤ YN0002: │ @strapi/ui-primitives@workspace:packages/primitives doesn't provide vite (paa7ee), requested by vite-plugin-dts
➤ YN0002: │ @strapi/ui-primitives@workspace:packages/primitives [476c9] doesn't provide vite (p02322), requested by vite-plugin-dts
➤ YN0002: │ @strapi/ui-primitives@workspace:packages/primitives [64d41] doesn't provide vite (pdb214), requested by vite-plugin-dts
➤ YN0002: │ design-system@workspace:. doesn't provide @babel/core (p14d90), requested by @babel/preset-react
➤ YN0002: │ design-system@workspace:. doesn't provide @testing-library/dom (p5caf8), requested by @testing-library/user-event
➤ YN0002: │ design-system@workspace:. doesn't provide styled-components (pfdf28), requested by jest-styled-components
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 4s 609ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 10s 757ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 7s 152ms                                                                                                                                                                                          
➤ YN0000: Done with warnings in 23s 565ms
lerna notice cli v6.6.1

    ×  @strapi/ui-primitives:build
       vite v4.3.3 building for production...
✓ 0 modules transformed.

[vite:dts] Start generate declaration files...
✓ built in 599ms
[vite:dts] Declaration files built in 257ms.

Entry module "src/index.ts" cannot be external.
error during build:
RollupError: Entry module "src/index.ts" cannot be external.
    at error (file:///<path-to-project>/strapi-design-system/node_modules/rollup/dist/es/shared/node-entry.js:2125:30)
    at ModuleLoader.loadEntryModule (file:///<path-to-project>/strapi-design-system/node_modules/rollup/dist/es/shared/node-entry.js:23940:20)
    at async Promise.all (index 0)

    ×  @strapi/icons:build
       assets\icons\ArrowDown.svg -> src\ArrowDown.tsx
assets\icons\Apps.svg -> src\Apps.tsx
assets\icons\ArrowRight.svg -> src\ArrowRight.tsx
assets\icons\Alien.svg -> src\Alien.tsx
assets\icons\ArrowLeft.svg -> src\ArrowLeft.tsx
assets\icons\Bell.svg -> src\Bell.tsx
assets\icons\Briefcase.svg -> src\Briefcase.tsx
assets\icons\Attachment.svg -> src\Attachment.tsx
assets\icons\Brush.svg -> src\Brush.tsx
assets\icons\ArrowUp.svg -> src\ArrowUp.tsx
assets\icons\Boolean.svg -> src\Boolean.tsx
assets\icons\Calendar.svg -> src\Calendar.tsx
assets\icons\Bold.svg -> src\Bold.tsx
assets\icons\Archive.svg -> src\Archive.tsx
assets\icons\BulletList.svg -> src\BulletList.tsx
assets\icons\CarretDown.svg -> src\CarretDown.tsx
assets\icons\ChartCircle.svg -> src\ChartCircle.tsx
assets\icons\Book.svg -> src\Book.tsx
assets\icons\Cast.svg -> src\Cast.tsx
assets\icons\CarretUp.svg -> src\CarretUp.tsx
assets\icons\ChartPie.svg -> src\ChartPie.tsx
assets\icons\ChevronLeft.svg -> src\ChevronLeft.tsx
assets\icons\Check.svg -> src\Check.tsx
assets\icons\CloudUpload.svg -> src\CloudUpload.tsx
assets\icons\ChevronRight.svg -> src\ChevronRight.tsx
assets\icons\ChartBubble.svg -> src\ChartBubble.tsx
assets\icons\CodeSquare.svg -> src\CodeSquare.tsx
assets\icons\Code.svg -> src\Code.tsx
assets\icons\Cog.svg -> src\Cog.tsx
assets\icons\Cloud.svg -> src\Cloud.tsx
assets\icons\Connector.svg -> src\Connector.tsx
assets\icons\Component.svg -> src\Component.tsx
assets\icons\Cross.svg -> src\Cross.tsx
assets\icons\Car.svg -> src\Car.tsx
assets\icons\CheckCircle.svg -> src\CheckCircle.tsx
assets\icons\Collapse.svg -> src\Collapse.tsx
assets\icons\ChevronUp.svg -> src\ChevronUp.tsx
assets\icons\CrossCircle.svg -> src\CrossCircle.tsx
assets\icons\Crown.svg -> src\Crown.tsx
assets\icons\Cup.svg -> src\Cup.tsx
assets\icons\CollectionType.svg -> src\CollectionType.tsx
assets\icons\Dashboard.svg -> src\Dashboard.tsx
assets\icons\Clock.svg -> src\Clock.tsx
assets\icons\Discord.svg -> src\Discord.tsx
assets\icons\Database.svg -> src\Database.tsx
assets\icons\Command.svg -> src\Command.tsx
assets\icons\Dot.svg -> src\Dot.tsx
assets\icons\Date.svg -> src\Date.tsx
assets\icons\Discuss.svg -> src\Discuss.tsx
assets\icons\Doctor.svg -> src\Doctor.tsx
assets\icons\Duplicate.svg -> src\Duplicate.tsx
assets\icons\Earth.svg -> src\Earth.tsx
assets\icons\Email.svg -> src\Email.tsx
assets\icons\EarthStriked.svg -> src\EarthStriked.tsx
assets\icons\EmotionUnhappy.svg -> src\EmotionUnhappy.tsx
assets\icons\Drag.svg -> src\Drag.tsx
assets\icons\EmotionHappy.svg -> src\EmotionHappy.tsx
assets\icons\Envelop.svg -> src\Envelop.tsx
assets\icons\DynamicZone.svg -> src\DynamicZone.tsx
assets\icons\Crop.svg -> src\Crop.tsx
assets\icons\Cursor.svg -> src\Cursor.tsx
assets\icons\EmptyDocuments.svg -> src\EmptyDocuments.tsx
assets\icons\Enumeration.svg -> src\Enumeration.tsx
assets\icons\Discourse.svg -> src\Discourse.tsx
assets\icons\Equalizer.svg -> src\Equalizer.tsx
assets\icons\EmptyPermissions.svg -> src\EmptyPermissions.tsx
assets\icons\Exit.svg -> src\Exit.tsx
assets\icons\ChevronDown.svg -> src\ChevronDown.tsx
assets\icons\EmptyPictures.svg -> src\EmptyPictures.tsx
assets\icons\Download.svg -> src\Download.tsx
assets\icons\Facebook.svg -> src\Facebook.tsx
assets\icons\ExternalLink.svg -> src\ExternalLink.tsx
assets\icons\Eye.svg -> src\Eye.tsx
assets\icons\ExclamationMarkCircle.svg -> src\ExclamationMarkCircle.tsx
assets\icons\Feather.svg -> src\Feather.tsx
assets\icons\FilePdf.svg -> src\FilePdf.tsx
assets\icons\FeatherSquare.svg -> src\FeatherSquare.tsx
assets\icons\Gift.svg -> src\Gift.tsx
assets\icons\Expand.svg -> src\Expand.tsx
assets\icons\HandHeart.svg -> src\HandHeart.tsx
assets\icons\Gate.svg -> src\Gate.tsx
assets\icons\GlassesSquare.svg -> src\GlassesSquare.tsx
assets\icons\Github.svg -> src\Github.tsx
assets\icons\Filter.svg -> src\Filter.tsx
assets\icons\Grid.svg -> src\Grid.tsx
assets\icons\Folder.svg -> src\Folder.tsx
assets\icons\Headphone.svg -> src\Headphone.tsx
assets\icons\GraphQl.svg -> src\GraphQl.tsx
assets\icons\InformationSquare.svg -> src\InformationSquare.tsx
assets\icons\Heart.svg -> src\Heart.tsx
assets\icons\House.svg -> src\House.tsx
assets\icons\IndentDecrease.svg -> src\IndentDecrease.tsx
assets\icons\Json.svg -> src\Json.tsx
assets\icons\FileError.svg -> src\FileError.tsx
assets\icons\Globe.svg -> src\Globe.tsx
assets\icons\Hashtag.svg -> src\Hashtag.tsx
assets\icons\Layer.svg -> src\Layer.tsx
assets\icons\Landscape.svg -> src\Landscape.tsx
assets\icons\LandscapeSmall.svg -> src\LandscapeSmall.tsx
assets\icons\Key.svg -> src\Key.tsx
assets\icons\Layout.svg -> src\Layout.tsx
assets\icons\List.svg -> src\List.tsx
assets\icons\EyeStriked.svg -> src\EyeStriked.tsx
assets\icons\Link.svg -> src\Link.tsx
assets\icons\Loader.svg -> src\Loader.tsx
assets\icons\Magic.svg -> src\Magic.tsx
assets\icons\Lock.svg -> src\Lock.tsx
assets\icons\ManyToOne.svg -> src\ManyToOne.tsx
assets\icons\Mail.svg -> src\Mail.tsx
assets\icons\Lightbulb.svg -> src\Lightbulb.tsx
assets\icons\Italic.svg -> src\Italic.tsx
assets\icons\Media.svg -> src\Media.tsx
assets\icons\ManyWays.svg -> src\ManyWays.tsx
assets\icons\Information.svg -> src\Information.tsx
assets\icons\MinusOutlined.svg -> src\MinusOutlined.tsx
assets\icons\ManyToMany.svg -> src\ManyToMany.tsx
assets\icons\Minus.svg -> src\Minus.tsx
assets\icons\Monitor.svg -> src\Monitor.tsx
assets\icons\Microphone.svg -> src\Microphone.tsx
assets\icons\Music.svg -> src\Music.tsx
assets\icons\Moon.svg -> src\Moon.tsx
assets\icons\IndentIncrease.svg -> src\IndentIncrease.tsx
assets\icons\More.svg -> src\More.tsx
assets\icons\Number.svg -> src\Number.tsx
assets\icons\OneToMany.svg -> src\OneToMany.tsx
assets\icons\Message.svg -> src\Message.tsx
assets\icons\Paint.svg -> src\Paint.tsx
assets\icons\OneWay.svg -> src\OneWay.tsx
assets\icons\OnholdCarretDown.svg -> src\OnholdCarretDown.tsx
assets\icons\PaperPlane.svg -> src\PaperPlane.tsx
assets\icons\PaintBrush.svg -> src\PaintBrush.tsx
assets\icons\NumberList.svg -> src\NumberList.tsx
assets\icons\Pencil.svg -> src\Pencil.tsx
assets\icons\OneToOne.svg -> src\OneToOne.tsx
assets\icons\OnholdCarretUp.svg -> src\OnholdCarretUp.tsx
assets\icons\Password.svg -> src\Password.tsx
assets\icons\Phone.svg -> src\Phone.tsx
assets\icons\PicturePlus.svg -> src\PicturePlus.tsx
assets\icons\Picture.svg -> src\Picture.tsx
assets\icons\PinMap.svg -> src\PinMap.tsx
assets\icons\Pin.svg -> src\Pin.tsx
assets\icons\Plane.svg -> src\Plane.tsx
assets\icons\PlaySquare.svg -> src\PlaySquare.tsx
assets\icons\PlusCircle.svg -> src\PlusCircle.tsx
assets\icons\Play.svg -> src\Play.tsx
assets\icons\Plus.svg -> src\Plus.tsx
assets\icons\PriceTag.svg -> src\PriceTag.tsx
assets\icons\Move.svg -> src\Move.tsx
assets\icons\File.svg -> src\File.tsx
assets\icons\QuoteClosed.svg -> src\QuoteClosed.tsx
assets\icons\Question.svg -> src\Question.tsx
assets\icons\Puzzle.svg -> src\Puzzle.tsx
assets\icons\Relation.svg -> src\Relation.tsx
assets\icons\Quote.svg -> src\Quote.tsx
assets\icons\Refresh.svg -> src\Refresh.tsx
assets\icons\Repeat.svg -> src\Repeat.tsx
assets\icons\Restaurant.svg -> src\Restaurant.tsx
assets\icons\Rocket.svg -> src\Rocket.tsx
assets\icons\Medium.svg -> src\Medium.tsx
assets\icons\Search.svg -> src\Search.tsx
assets\icons\Scissors.svg -> src\Scissors.tsx
assets\icons\Shield.svg -> src\Shield.tsx
assets\icons\SingleType.svg -> src\SingleType.tsx
assets\icons\RichText.svg -> src\RichText.tsx
assets\icons\LinkSmall.svg -> src\LinkSmall.tsx
assets\icons\MenuBurger.svg -> src\MenuBurger.tsx
assets\icons\Server.svg -> src\Server.tsx
assets\icons\Slideshow.svg -> src\Slideshow.tsx
assets\icons\Spinner.svg -> src\Spinner.tsx
assets\icons\Store.svg -> src\Store.tsx
assets\icons\Shirt.svg -> src\Shirt.tsx
assets\icons\Text.svg -> src\Text.tsx
assets\icons\StrikeThrough.svg -> src\StrikeThrough.tsx
assets\icons\ShoppingCart.svg -> src\ShoppingCart.tsx
assets\icons\Rotate.svg -> src\Rotate.tsx
assets\icons\Strapi.svg -> src\Strapi.tsx
assets\icons\Sun.svg -> src\Sun.tsx
assets\icons\Seed.svg -> src\Seed.tsx
assets\icons\ThumbDown.svg -> src\ThumbDown.tsx
assets\icons\Trash.svg -> src\Trash.tsx
assets\icons\Train.svg -> src\Train.tsx
assets\icons\ThumbUp.svg -> src\ThumbUp.tsx
assets\icons\Stack.svg -> src\Stack.tsx
assets\icons\Uid.svg -> src\Uid.tsx
assets\icons\Twitter.svg -> src\Twitter.tsx
assets\icons\SearchIcon.svg -> src\SearchIcon.tsx
assets\icons\Typhoon.svg -> src\Typhoon.tsx
assets\icons\Underline.svg -> src\Underline.tsx
assets\icons\Upload.svg -> src\Upload.tsx
assets\icons\Walk.svg -> src\Walk.tsx
assets\icons\VolumeMute.svg -> src\VolumeMute.tsx
assets\icons\Write.svg -> src\Write.tsx
assets\icons\Star.svg -> src\Star.tsx
assets\icons\Television.svg -> src\Television.tsx
assets\icons\Wheelchair.svg -> src\Wheelchair.tsx
assets\icons\User.svg -> src\User.tsx
assets\icons\Reddit.svg -> src\Reddit.tsx
assets\icons\VolumeUp.svg -> src\VolumeUp.tsx
vite v4.3.3 building for production...
✓ 0 modules transformed.
✓ built in 248ms
Entry module "src/index.ts" cannot be external.
error during build:
RollupError: Entry module "src/index.ts" cannot be external.
    at error (file:///<path-to-project>/strapi-design-system/node_modules/rollup/dist/es/shared/node-entry.js:2125:30)
    at ModuleLoader.loadEntryModule (file:///<path-to-project>/strapi-design-system/node_modules/rollup/dist/es/shared/node-entry.js:23940:20)
    at async Promise.all (index 0)

 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  Lerna (powered by Nx)   Ran target build for 4 projects (3m)

    √    0/2 succeeded [0 read from cache]

    ×    2/2 targets failed, including the following:
         - @strapi/ui-primitives:build
         - @strapi/icons:build

   Hint: Try "nx view-logs" to get structured, searchable errors logs in your browser.

Process finished with exit code 1

joshuaellis commented 1 year ago

Are you using windows by any chance?

Minecraftschurli commented 1 year ago

yes

joshuaellis commented 1 year ago

In the vite config we set externals, we might need to use os.separator instead of a hardcoded value...

Minecraftschurli commented 1 year ago

os.seperator would also be wrong ... I found something that works but only if the project is on the C drive !id.startsWith('C:')

joshuaellis commented 1 year ago

The easiest workaround would be to replace external: (id) => !id.startsWith('.') && !id.startsWith('/') with the list of "dependencies" from the package.json. Time of writing it would be:

primitives

external: [
    "@radix-ui/number",
    "@radix-ui/primitive",
    "@radix-ui/react-compose-refs",
    "@radix-ui/react-context",
    "@radix-ui/react-dismissable-layer",
    "@radix-ui/react-id",
    "@radix-ui/react-popper",
    "@radix-ui/react-portal",
    "@radix-ui/react-primitive",
    "@radix-ui/react-slot",
    "@radix-ui/react-use-controllable-state",
    "@radix-ui/react-use-previous",
    "@radix-ui/react-visually-hidden",
    "aria-hidden",
    "react-remove-scroll"
]

design-system

external: [
    "@codemirror/lang-json",
    "@floating-ui/react-dom",
    "@internationalized/number",
    "@radix-ui/react-dismissable-layer",
    "@radix-ui/react-dropdown-menu",
    "@radix-ui/react-use-callback-ref",
    "@strapi/ui-primitives",
    "@uiw/react-codemirror",
    "compute-scroll-into-view",
    "prop-types"
]

Minecraftschurli commented 1 year ago

that could also be done by importing the package json and doing Object.keys on the dependencies (so there is only one source of truth)

Minecraftschurli commented 1 year ago

adapting the current solution to work cross platform would be:

external(id) {
  const { root, dir } = path.parse(id);

  return root === '' && !dir.startsWith('.');
}

joshuaellis commented 1 year ago

adapting the current solution to work cross platform would be:
external(id) {
  const { root, dir } = path.parse(id);

  return root === '' && !dir.startsWith('.');
}

Happy to see a PR of this and check it out, imo not a fan of importing package.json

Minecraftschurli commented 1 year ago

I'll just bump the fix for this issue here https://github.com/strapi/design-system/pull/997

strapi / design-system