feat(react): automatically detect npm dependencies as external when building library

[jaysoo]

This MR allows React/Web/Next libraries to be built without manually adding entries to external option.

Current Behavior

If you used say 'lodash' you need to use option "external": ["lodash"] in project configuration.

Expected Behavior

Npm packages should not need manual external entry. Nx already knows this information and can provide it automatically.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nrwl/nx-dev/3CUhgBjm3MYXuq8EJgbWdcPM9M1N
✅ Preview: Canceled

[Deployment for 4d6c09c canceled]

[ZackDeRose]

LGTM

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 4d6c09c. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx affected --target=build --base=dc380037512fcccd74f8b5525afea315afa644ff --parallel --max-parallel=3
	nx affected --target=e2e --base=dc380037512fcccd74f8b5525afea315afa644ff
	nx affected --target=lint --base=dc380037512fcccd74f8b5525afea315afa644ff --parallel --max-parallel=4
	nx affected --target=test --base=dc380037512fcccd74f8b5525afea315afa644ff --parallel --max-parallel=2
	nx build typedoc-theme

---

Sent with 💌 from NxCloud.

[cyrus-za]

This looks awesome. Thanks so much. Will this work with pnpm? When I tried your gist, my id value was the full system path

[jaysoo]

This looks awesome. Thanks so much. Will this work with pnpm? When I tried your gist, my id value was the full system path

Yes there isn't any different between how we handle npm, yarn, pnpm from a dependency detection perspective.

[cyrus-za]

This looks awesome. Thanks so much. Will this work with pnpm? When I tried your gist, my id value was the full system path

Yes there isn't any different between how we handle npm, yarn, pnpm from a dependency detection perspective.

Then I am not sure what I am doing wrong but I am getting errors

Error during bundle: Error: 'isEmpty' is not exported by node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/fp.js
Bundle failed: ui-hooks-use-resize-observer

isEmpty is imported from lodash in this case.

project.json (example. got multiple ones failing)

{
  "root": "libs/ui",
  "sourceRoot": "libs/ui",
  "projectType": "library",
  "targets": {
    "build": {
      "executor": "@nrwl/web:package",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/libs/ui/package",
        "tsConfig": "libs/ui/tsconfig.lib.json",
        "project": "libs/ui/package.json",
        "entryFile": "libs/ui/index.ts",
        "assets": [
          {
            "glob": "libs/ui/README.md",
            "input": ".",
            "output": "."
          }
        ]
      }
    },
    "release": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "commands": [
          {
            "command": "npx semantic-release"
          }
        ],
        "cwd": "libs/ui"
      }
    }
  },
  "tags": []
}

rollup.config.js that I used to have which worked. Now that I delete it, it fails.

const nxConfig = require('@nrwl/react/plugins/bundle-rollup').default

const { createProjectGraph } = require('@nrwl/workspace/src/core/project-graph')

module.exports = (config, opts) => {
  const projectGraph = createProjectGraph()

  const { tsConfig: tsConfigPath } = opts

  const projectName = Object.keys(projectGraph.nodes).find((name) =>
    projectGraph.nodes[name].data.files.some((f) => f.file === tsConfigPath)
  )

  const npmDeps = projectGraph.dependencies[projectName]
    .filter((d) => d.target.startsWith('npm:'))
    .map((d) => d.target.substr(4))

  return {
    ...config,
    ...nxConfig,
    external: (id) => {
      return (
        config.external(id) ||
        npmDeps.some((name) => id === name || id.startsWith(`${name}/`))
      )
    },
  }
}

Notice how I had config.external(id) and nx default in this PR has externalPackages.includes(id) instead.

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.