React Icons Module not found in Library, Source Maps missing

[0xRowdy]

Current Behavior

Created a Component Library in monorepo that uses React Icons. When testing the component library in a local Create React App with Typescript I get the following error:

Module not found: Error: Can't resolve 'react-icons/ri' in '/Users/mroddy/Documents/Development/DAOs/build-test/node_modules/@daohaus/ui'
Did you mean 'index.esm.js'?
BREAKING CHANGE: The request 'react-icons/ri' 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.
WARNING in ./node_modules/@daohaus/keychain-utils/src/contractKeychains.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/mroddy/Documents/Development/DAOs/build-test/libs/keychain-utils/src/contractKeychains.ts' file: Error: ENOENT: no such file or directory, open '/Users/mroddy/Documents/Development/DAOs/build-test/libs/keychain-utils/src/contractKeychains.ts'

WARNING in ./node_modules/@daohaus/keychain-utils/src/endpoints.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/mroddy/Documents/Development/DAOs/build-test/libs/keychain-utils/src/endpoints.ts' file: Error: ENOENT: no such file or directory, open '/Users/mroddy/Documents/Development/DAOs/build-test/libs/keychain-utils/src/endpoints.ts'

dist/libs/ui includes index.cjs and index.js even though "format": ["esm", "umd"], is specified in project.json

Expected Behavior

Local test Create React App renders and allows the use of React Icons. Build should include index.esm.js instead of index.cjs SourceMaps should be generated.

Github Repo

https://github.com/HausDAO/monorepo/tree/bug/web-rollup-bundle-error/libs/ui

Steps to Reproduce

1. git clone -b bug/web-rollup-bundle-error git@github.com:HausDAO/monorepo.git

2. Install packages: yarn install

3. Build ui: yarn nx build ui

4. In another folder create a test React Application with Create React App: yarn create react-app build-test --template typescript

5. Install react router: yarn add react-router-dom

6. Copy the path from HausDAO monorepo dist/libs that was created in step 3.

7. In build-test CRA install @daohaus/ui from monorepo: '/Users/rowdy/Documents/Development/DAOs/monorepo/dist/libs/ui'

8. In build-test CRA index.ts import HausThemeProvider and use: ` import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { HausThemeProvider } from "@daohaus/ui";

const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render(

); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); ` ### Nx Report ```shell Node : 19.1.0 OS : darwin arm64 yarn : 1.22.19 nx : 15.0.4 @nrwl/angular : Not Found @nrwl/cypress : 15.0.4 @nrwl/detox : Not Found @nrwl/devkit : 15.0.4 @nrwl/esbuild : Not Found @nrwl/eslint-plugin-nx : 15.0.4 @nrwl/expo : Not Found @nrwl/express : Not Found @nrwl/jest : 15.0.9 @nrwl/js : 15.0.9 @nrwl/linter : 15.0.4 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/nx-cloud : Not Found @nrwl/nx-plugin : Not Found @nrwl/react : 15.0.4 @nrwl/react-native : Not Found @nrwl/rollup : 15.0.4 @nrwl/schematics : Not Found @nrwl/storybook : 15.0.9 @nrwl/web : 15.0.4 @nrwl/webpack : 15.0.4 @nrwl/workspace : 15.0.4 typescript : 4.8.4 --------------------------------------- Local workspace plugins: --------------------------------------- Community plugins: ngx-deploy-npm: 4.3.2 ``` ### Failure Logs _No response_ ### Additional Information I'm new to NX and it is very possible that something is not configured something correctly. The UI Component Library has dependencies from other Libs in the monorepo. project.json for ui library: `{ "name": "ui", "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "libs/ui/src", "projectType": "library", "tags": [], "targets": { "build": { "executor": "@nrwl/web:rollup", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/libs/ui", "tsConfig": "libs/ui/tsconfig.lib.json", "project": "libs/ui/package.json", "entryFile": "libs/ui/src/index.ts", "rollupConfig": "@nrwl/react/plugins/bundle-rollup", "external": ["react", "react-dom", "react/jsx-runtime", "@storybook"], "compiler": "babel", "buildableProjectDepsInPackageJsonType": "dependencies", "extractCss": false, "format": ["esm", "umd"], "assets": [ { "glob": "libs/ui/README.md", "input": ".", "output": "." } ] } }, "publish": { "executor": "nx:run-commands", "options": { "command": "node tools/scripts/publish.mjs ui {args.ver} {args.tag}" }, "dependsOn": ["build"] }, "npmPublish": { "executor": "ngx-deploy-npm:deploy", "options": { "access": "public", "noBuild": true } }, "lint": { "executor": "@nrwl/linter:eslint", "outputs": ["{options.outputFile}"], "options": { "lintFilePatterns": ["libs/ui/**/*.{ts,tsx,js,jsx}"] } }, "test": { "executor": "@nrwl/jest:jest", "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], "options": { "jestConfig": "libs/ui/jest.config.ts", "passWithNoTests": true } }, "storybook": { "executor": "@nrwl/storybook:storybook", "options": { "uiFramework": "@storybook/react", "port": 4400, "config": { "configFolder": "libs/ui/.storybook" } }, "configurations": { "ci": { "quiet": true } } }, "build-storybook": { "executor": "@nrwl/storybook:build", "outputs": ["{options.outputPath}"], "options": { "uiFramework": "@storybook/react", "outputPath": "dist/storybook/ui", "config": { "configFolder": "libs/ui/.storybook" } }, "configurations": { "ci": { "quiet": true } } }, "clouflareStaging": { "executor": "nx:run-commands", "options": { "command": "node tools/scripts/cloudflarePublish.mjs --projectName=storybook-staging --directory=dist/storybook/ui" }, "dependsOn": [ { "target": "build-storybook", "projects": "self" } ] }, "clouflareProduction": { "executor": "nx:run-commands", "options": { "command": "node tools/scripts/cloudflarePublish.mjs --projectName=storybook --directory=dist/storybook/ui" }, "dependsOn": [ { "target": "build-storybook", "projects": "self" } ] } } } ` Happy to add anything else that could be helpful. Thanks in advance for the help. -Mark

[0xRowdy]

@FrozenPandaz Wondering if you had a chance to look at the Project.json or test out the issue locally? Anything I can do to further support you?

[ratoi-crysty]

This issue can be replicated by creating a project with an expo app and trying to use UI Kittens and trying to run the application in "web" mode: https://akveo.github.io/react-native-ui-kitten/docs/guides/getting-started#manual-installation

[0xRowdy]

This issue can be replicated by creating a project with an expo app and trying to use UI Kittens and trying to run the application in "web" mode: https://akveo.github.io/react-native-ui-kitten/docs/guides/getting-started#manual-installation

Thanks for bumping my ticket. You are having a similar issue in the repo you linked?

[ratoi-crysty]

Yes! But the link is to the library that I've used to cause the issue (UI Kittens). If it helps, I can create a repo with the issue.

[0xRowdy]

Bump

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.