Receiving a react error that prop-types could not be found

[sadsa]

When using the PNPM package manager, any dependecies not explicitly mentioned in the package.json will be ignored at time of package installation.

The following code (found in dist-web/index.js) make the following reference to the prop-types package.

let PropTypes;

try {
  PropTypes = require("prop-types");
} catch (e) {}

React apps throw an error, complaining that the prop-types package could not be resolved.

The fix, is to add prop-types as a dependency in the package.json.

I will commit a PR to hopefully which fixes the issue.

[ghengeveld]

Hey Josh, thanks for reporting!

The whole idea behind this is that prop-types is optional. If your app doesn't have it already, React Async will not use it. The way it does that is by wrapping the require in a try/catch statement. I'm surprised that your React app throws an error, regardless of this try/catch statement.

Could you maybe provide an example to demonstrate the issue? I have no experience with pnpm myself.

[ghengeveld]

Closing due to inactivity, and because the obvious workaround is to just install prop-types. Please reopen if you feel there's a real need to handle this optional dependency differently.

[Eli-Black-Work]

@ghengeveld Can we reopen this? I'm seeing the same issue. 🙂

As with @sadsa, we're using Yarn's PnP ("Plug and Play") feature. This feature makes it so when a library tries to load a dependency that's not specified in its package.json file, an error is thrown. This error is thrown while compiling via webpack.

The error:

WARNING in ./.yarn/$$virtual/react-async-virtual-e01e7b3bbf/0/cache/react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip/node_modules/react-async/dist-web/index.js 35:14-35
Module not found: Error: Can't resolve 'prop-types' in 'C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\react-async\dist-web'
resolve 'prop-types' in 'C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\react-async\dist-web'
  Parsed request is a module
  using description file: C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\react-async\package.json (relative path: ./dist-web)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\react-async\dist-web\node_modules doesn't exist or is not a directory
      C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\react-async\node_modules doesn't exist or is not a directory
      C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules
        single file module
          using description file: C:\asd\jkl\qwe\rty\ope\nkl\package.json (relative path: ./.yarn/$$virtual/react-async-virtual-e01e7b3bbf/0/cache/react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip/node_modules/prop-types)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\prop-types doesn't exist
            *
              Field 'browser' doesn't contain a valid alias configuration
              C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\prop-types* doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\prop-types.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\prop-types.jsx doesn't exist
        C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\prop-types doesn't exist
      C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\0\cache\node_modules doesn't exist or is not a directory
      C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\0\node_modules doesn't exist or is not a directory
      C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\react-async-virtual-e01e7b3bbf\node_modules doesn't exist or is not a directory
      C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$virtual\node_modules doesn't exist or is not a directory
      C:\asd\jkl\qwe\rty\ope\nkl\.yarn\node_modules doesn't exist or is not a directory
      C:\asd\jkl\qwe\rty\ope\nkl\node_modules doesn't exist or is not a directory
      C:\asd\jkl\qwe\rty\ope\node_modules doesn't exist or is not a directory
      C:\asd\jkl\qwe\rty\node_modules doesn't exist or is not a directory
      C:\asd\jkl\qwe\node_modules doesn't exist or is not a directory
      C:\asd\jkl\node_modules doesn't exist or is not a directory
      C:\asd\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      request is not managed by the pnpapi
        react-async tried to access prop-types, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
        Required package: prop-types (via "prop-types")
        Required by: react-async@virtual:b46f1abc06a52729b066f6a8e18261ad87650b0b08b6e01e301779c8cdc5c236356f226c42bee01f61bbf1546c59c5df95b8b64950704513a2889a1fc4369ff2#npm:10.0.1 (via C:\asd\jkl\qwe\rty\ope\nkl\.yarn\$$virtual\react-async-virtual-e01e7b3bbf\0\cache\react-async-npm-10.0.1-4e014b49b8-dd7e80d975.zip\node_modules\react-async\dist-web\)
 @ ./app.js 1:0-36

dev (webpack 5.24.2) compiled with 1 warning in 5718 ms
i ｢wdm｣: Compiled with warnings.

Would it be possible to specify prop-types as a peer dependency? I think that might fix the issue.

Thanks 🙂

[Eli-Black-Work]

Hi @ghengeveld, Just following up on this. Can we please reopen this bug? 🙂