Webpack bundled packages can't find peer dependencies in vite_rails project

Viewed 281

I have a rails project that I'm migrating from webpacker to vite.js and a number of my private packages, bundled with webpack all are built with react and so the rails project was setup with webpack and installed react/-dom itself for use in these installed packages.

In the webpacker config I had to setup aliases for most of these so they could find React and React Dom.

const { resolve } = require('path');

module.exports = {
  React: resolve(__dirname, '../../node_modules/react'),
  ReactDOM: resolve(__dirname, '../../node_modules/react-dom'),
  "react": resolve(__dirname, '../../node_modules/react'),
  "react-dom": resolve(__dirname, '../../node_modules/react-dom'),
  AsyncStorage: resolve(__dirname, '../../node_modules/@react-native-community/async-storage'),
  Pusher: resolve(__dirname, '../../node_modules/pusher-js')
}

But I can't find in the vite.js or rollup.js documentation where or even if I have to do something similar. This section of vite's docs makes me think that it's supposed to just be handling it magically but appears to not be.

Here's an example of the error I'm getting:

✘ [ERROR] Could not resolve "ReactDOM"

    node_modules/skarsnik/bundled/plugin.js:1:107:
      1 │ ...of exports&&"object"==typeof module?module.exports=e(require("React"),require("ReactDOM"),require("GobblaPackage")):"function"==typeof define&&define.amd?define(["Re...
        ╵                                                                                  ~~~~~~~~~~

  You can mark the path "ReactDOM" as external to exclude it from the bundle, which will remove this
  error. You can also surround this "require" call with a try/catch block to handle this failure at
  run-time instead of bundle-time.

Any ideas would be greatly appreciated

EDIT

also looking at one of the webpack bundled packages I have externals config which may explain the "Could not resolve 'ReactDOM'":

 externals: {
    'react':     "React",
    'react-dom': 'ReactDOM',
    '@realgeeks/gobbla/bundled/plugin': "GobblaPackage",
    "@react-native-community/async-storage": "AsyncStorage"
  }
0 Answers
Related