Lib import breaks with @nrwl/web:rollup with v14.1.8 and higher

[mcmxcdev]

Current Behavior

After upgrading from @nrwl/web v14.1.7 to v14.1.8 or higher, a lib package cannot be resolved correctly anymore to e.g. @myorg/ui-components. Changing the import to @myorg/ui-components/dist works though.

This PR is probably related to the issue: #10349

Expected Behavior

Build should pass just fine with @myorg/ui-components import like it did in 14.1.7

Steps to Reproduce

This issue may not be prioritized if details are not provided to help us reproduce the issue.

Failure Logs

Watching Remix app in development mode...

Rebuilding...

✘ [ERROR] Could not resolve "@myorg/ui-components"

    app/routes/index.tsx:1:32:
      1 │ import { Button, Spinner } from '@myorg/ui-components';
        ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@myorg/ui-components" as external to exclude it from the bundle, which will remove this error.


Build failed with 1 error:
app/routes/index.tsx:1:32: ERROR: Could not resolve "@myorg/ui-components"
💿 Built in 506ms
Done in 255ms.

The error above occurs when running a remix application with the following nx executor beforehand:

"build": {
      "executor": "@nrwl/web:rollup",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "libs/ui-components/dist",
        "tsConfig": "libs/ui-components/tsconfig.lib.json",
        "project": "libs/ui-components/package.json",
        "entryFile": "libs/ui-components/src/index.ts",
        "external": ["react/jsx-runtime"],
        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
        "compiler": "babel",
        "assets": [
          {
            "glob": "libs/ui-components/README.md",
            "input": ".",
            "output": "."
          }
        ],
        "format": ["cjs"]
      }
    },

Environment

Node : 16.15.0
   OS   : linux x64
   npm  : 8.5.5
   
   nx : 14.1.9
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.1.9
   @nrwl/detox : Not Found
   @nrwl/devkit : 13.10.4
   @nrwl/eslint-plugin-nx : 14.1.9
   @nrwl/express : Not Found
   @nrwl/jest : 14.1.9
   @nrwl/js : 13.10.4
   @nrwl/linter : 14.1.9
   @nrwl/nest : 14.1.9
   @nrwl/next : Not Found
   @nrwl/node : 14.1.9
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.1.9
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.1.9
   @nrwl/web : 14.1.7
   @nrwl/workspace : 14.1.9
   typescript : 4.5.5
   ---------------------------------------
   Community plugins:
   	 @nrwl/remix: 14.1.7

[barchewbacca]

Happens to me as well in a publishable react library after migrating from version 14.1.7 to version 14.1.8 and higher.
The library has imports of the @mui/material components.

All applications which consume this library start to throw these types of errors:

ERROR in ./node_modules/@myorg/components-react/index.js 6:0-42

Module not found: Error: Can't resolve '@mui/material/Drawer' in 'node_modules/@myorg/components-react'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Drawer' 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.

[rodrigofariow]

Hey @barchewbacca
Adding "skipTypeField": true to project.json solved it for me:

"build": {
      "executor": "@nrwl/web:rollup",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "libs/ui-components/dist",
        "tsConfig": "libs/ui-components/tsconfig.lib.json",
        "project": "libs/ui-components/package.json",
        "entryFile": "libs/ui-components/src/index.ts",
        "external": ["react/jsx-runtime"],
        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
        "compiler": "babel",
        "assets": [
          {
            "glob": "libs/ui-components/README.md",
            "input": ".",
            "output": "."
          }
        ],
        "skipTypeField": true, // no longer generates "type": "module" on the lib dist/**/package.json
        "format": ["cjs"]
      }
    },

Cheers!

[tinkertrain]

We have the same problem, which makes it impossible to upgrade to anything beyond v14.1.7, with this version we build all our web packages without issue, as soon as we upgrade rollup complains about not being able to resolve any of the nx packages the library being built imports.

We tried the "skipTypeField": true, but it doesn't solve this issue (I don't really know why it would seems like it solves something else).

   Node : 16.14.0
   OS   : darwin x64
   npm  : 8.3.0
   
   nx : 14.1.7
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.1.7
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.1.7
   @nrwl/eslint-plugin-nx : 14.1.7
   @nrwl/express : Not Found
   @nrwl/jest : 14.1.7
   @nrwl/js : 14.1.7
   @nrwl/linter : 14.1.7
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.1.7
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.1.7
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.1.7
   @nrwl/web : 14.1.7
   @nrwl/workspace : 14.1.7
   typescript : 4.4.4
   rxjs : 6.6.7
   ---------------------------------------
   Community plugins:
   	 @jscutlery/semver: 2.25.2
   	 ngx-deploy-npm: 3.1.9

[github-actions]

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]

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.