search

microsoft / fluentui-react-native

A react-native component library that implements the Fluent Design System.
https://developer.microsoft.com/fluentui
MIT License
1.25k stars 161 forks source link

basic readme steps end with a broken build #3669

Open rasane opened 2 months ago

rasane commented 2 months ago

Willing to submit a PR to fix?

Requested priority

Blocking

Products/applications affected

"@fluentui/react-native": "^0.41.6", "react": "18.2.0", "react-native": "0.74.2", "react-native-windows": "0.74.9"

Package version(s)

npm "@fluentui/react-native": "^0.41.6"

OS version(s)

windows

Platform

Xcode version

No response

Please provide a reproduction of the bug

followed the basic steps in a clean new project as per https://github.com/microsoft/fluentui-react-native.

Actual behavior

errors: Unable to resolve module react-native-svg from c:\dev\react-native\fluent\node_modules\@fluentui-react-native\icon\lib-commonjs\legacy\Icon.js: react-native-svg could not be found within the project or in these directories: node_modules 41 | var framework_2 = require("@fluentui-react-native/framework"); 42 | var text_1 = require("@fluentui-react-native/text");

43 | var react_native_svg_1 = require("react-native-svg"); | ^ 44 | var rasterImageStyleCache = (0, framework_2.getMemoCache)(); 45 | function renderRasterImage(iconProps) { 46 | var width = iconProps.width, height = iconProps.height, color = iconProps.color;

at ModuleResolver.resolveDependency (c:\dev\react-native\fluent\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:138:15)
at DependencyGraph.resolveDependency (c:\dev\react-native\fluent\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)
at c:\dev\react-native\fluent\node_modules\metro\src\lib\transformHelpers.js:156:21
at resolveDependencies (c:\dev\react-native\fluent\node_modules\metro\src\DeltaBundler\buildSubgraph.js:42:25)
at visit (c:\dev\react-native\fluent\node_modules\metro\src\DeltaBundler\buildSubgraph.js:83:30)
at async Promise.all (index 0)
at async visit (c:\dev\react-native\fluent\node_modules\metro\src\DeltaBundler\buildSubgraph.js:92:5)
at async Promise.all (index 5)
at async visit (c:\dev\react-native\fluent\node_modules\metro\src\DeltaBundler\buildSubgraph.js:92:5)
at async Promise.all (index 3)

Expected behavior

working sample that lets me learn and use the ecosystem and its promise.. as recommended steps https://github.com/microsoft/fluentui-react-native

Generally, I am so confused about this ecosystem .. I want to use it and it has promise, but never can get a valid setup.. Apologies in advance if this is a noob mistake. I have spent a few weekends trying to read various blogs and follow tutorials - generally I am confused about different platforms in play