How to compat about react package that is connected by github sub-module.

[MTtankkeo]

I hope you're doing well. I have a question regarding a setup issue with Preact and a React package that I'm working on.

Currently, I am using a GitHub submodule to include a React package that is not yet published. The React package is linked to my project using npm link, but I'm encountering a problem where preact cannot be found in the node_modules of this React package.

In a normal scenario, adding preact as a dependency directly to the React package would solve this issue. However, since the React package is included as a GitHub submodule, directly modifying the submodule's dependencies is not ideal.

Are there any recommended solutions or best practices for managing dependencies in this kind of setup? I would appreciate any guidance or suggestions you might have.

Thank you! 🙂

ERROR in ../packages/react-widgets/dist/index.esm.js 1:0-64
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'D:\Project Files\vector_icons-web\packages\react-widgets\dist'
resolve 'react/jsx-runtime' in 'D:\Project Files\vector_icons-web\packages\react-widgets\dist'
  Parsed request is a module
  using description file: D:\Project Files\vector_icons-web\packages\react-widgets\package.json (relative path: ./dist)
    aliased with mapping 'react': 'preact/compat' to 'preact/compat/jsx-runtime'
      Parsed request is a module
      using description file: D:\Project Files\vector_icons-web\packages\react-widgets\package.json (relative path: ./dist)
        Field 'browser' doesn't contain a valid alias configuration
        resolve as module
          D:\Project Files\vector_icons-web\packages\react-widgets\dist\node_modules doesn't exist or is not a directory
          looking for modules in D:\Project Files\vector_icons-web\packages\react-widgets\node_modules
            D:\Project Files\vector_icons-web\packages\react-widgets\node_modules\preact doesn't exist
          D:\Project Files\vector_icons-web\packages\node_modules doesn't exist or is not a directory
          D:\Project Files\vector_icons-web\node_modules doesn't exist or is not a directory
          D:\Project Files\node_modules doesn't exist or is not a directory
          D:\node_modules doesn't exist or is not a directory
          looking for modules in D:\Project Files\vector_icons-web\packages\react-widgets\node_modules
            D:\Project Files\vector_icons-web\packages\react-widgets\node_modules\preact doesn't exist
 @ ./src/pages/Landing.tsx 2:0-36 5:48-51 5:194-197 5:327-330 5:522-525 5:629-632
 @ ./src/pages/App.tsx 4:0-40 6:105-116
 @ ./src/index.tsx 3:0-34 8:12-15

ERROR in ../packages/react-widgets/dist/index.esm.js 1:64-130
Module not found: Error: Can't resolve 'react' in 'D:\Project Files\vector_icons-web\packages\react-widgets\dist'
resolve 'react' in 'D:\Project Files\vector_icons-web\packages\react-widgets\dist'
  Parsed request is a module
  using description file: D:\Project Files\vector_icons-web\packages\react-widgets\package.json (relative path: ./dist)
    aliased with mapping 'react': 'preact/compat' to 'preact/compat'
      Parsed request is a module
      Parsed request is a module
      using description file: D:\Project Files\vector_icons-web\packages\react-widgets\package.json (relative path: ./dist)
        Field 'browser' doesn't contain a valid alias configuration
        resolve as module
          D:\Project Files\vector_icons-web\packages\react-widgets\dist\node_modules doesn't exist or is not a directory
          looking for modules in D:\Project Files\vector_icons-web\packages\react-widgets\node_modules
            D:\Project Files\vector_icons-web\packages\react-widgets\node_modules\preact doesn't exist
          D:\Project Files\vector_icons-web\packages\node_modules doesn't exist or is not a directory
          D:\Project Files\vector_icons-web\node_modules doesn't exist or is not a directory
          D:\Project Files\node_modules doesn't exist or is not a directory
          D:\node_modules doesn't exist or is not a directory
          looking for modules in D:\Project Files\vector_icons-web\packages\react-widgets\node_modules
            D:\Project Files\vector_icons-web\packages\react-widgets\node_modules\preact doesn't exist
 @ ./src/pages/Landing.tsx 2:0-36 5:48-51 5:194-197 5:327-330 5:522-525 5:629-632
 @ ./src/pages/App.tsx 4:0-40 6:105-116
 @ ./src/index.tsx 3:0-34 8:12-15

webpack 5.93.0 compiled with 2 errors in 2423 ms

[rschristian]

I'd recommend ditching npm link for something like yalc as it's much closer to real-world usage and fixes some of the major problems npm link has, especially around dependencies. The problem is that npm link, as you've discovered, resolves dependencies against the linked module (so react-widgets, in this case). This isn't how modules work in any other scenario, it's a flawed by design utility.

[MTtankkeo]

Thank you for your response, I'll try yalc.

[rschristian]

Certainly feel free to ping me if you get stuck anywhere. It's a little bit more work to get going with but, IMO, it bypasses a ton of rough edges that are inherent to npm link.

Generally, it should be as straightforward as yalc publish in your widget, yalc add <widget package name> in your project, and then npm install in your project to install any dependencies of your widget.

Now this doesn't update automatically, unlike npm link, so what I'd recommend is adding && yalc publish --push to the build script of your widget. This will push your updated widget code to any projects using it.

[MTtankkeo]

Thanks to you, it's been solved. Thank you so much. 🫡