react-stripe-elements must be installed when it isn't needed

[aldeed]

Type: minor

Describe the bug The react-stripe-elements dependency is currently needed even when not using any Stripe components.

To Reproduce

• npx create-react-app my-app
• cd my-app
• yarn add prop-types styled-components@3 reacto-form @reactioncommerce/components-context @reactioncommerce/components
• yarn add --dev react-app-rewired

Then, in package.json, update the start, build, and test scripts to replace react-scripts with react-app-rewired:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

Finally, paste this into a file in the project root directory named config-overrides.js:

module.exports = function override(webpackConfig) {
  webpackConfig.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  });

  return webpackConfig;
}

Then add the following at the top of App.js:

import InPageMenuItem from "@reactioncommerce/components/InPageMenuItem/v1";

Run yarn start and observe the error about the missing dependency.

Expected behavior You should only need to install react-stripe-elements when using the Stripe components that require it.

Suggested fix Look at our imports and try to be more specific about where that dependency gets pulled in. For example, if it's imported in utils and lots of other things import /utils rather than a specific util, that is likely the issue.

[samkelleher]

Ping: Is there any progress on this. We still ship the stripe elements even though we don't use.

[aldeed]

I tried some things months ago, but no luck. I thought publishing as ES modules would resolve, but it did not seem to matter. Feel free to try to fix and PR.