Error when adding service-bus to React project

[GeorgeCodeHub]

Hello there,

I am trying to set up a ReactJS project with Azure's service bus but I get the following errors:

ERROR in ./node_modules/rhea/lib/connection.js 36:9-22
Module not found: Error: Can't resolve 'os'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }

ERROR in ./node_modules/rhea/lib/connection.js 38:11-26
Module not found: Error: Can't resolve 'path' 

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

I tried setting up a webpack.config.js with the following:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = {
    resolve: {
        alias: {
            os: require.resolve("os-browserify/browser"),
            path: require.resolve("path-browserify")
        },
        extensions: [".jsx", ".js", ".tsx", ".ts"]
    },
    plugins: [new NodePolyfillPlugin()]
};

However, I still get the same errors. Have I set up something wrong?

[azure-sdk]

Label prediction was below confidence level 0.6 for Model:ServiceLabels: 'Service Bus:0.14856467,Azure.Core:0.1328716,Cosmos:0.1197663'

[jeremymeng]

@GeorgeCodeHub Thanks for reporting the issue! We had @azure/service-bus code running on React before. Webpack 5 may have a different way for polyfills now. Could you please check out the doc here to see whether it helps? https://github.com/Azure/azure-sdk-for-js/blob/main/sdk/servicebus/service-bus/README.md#javascript-bundle

We also have a Rect sample for @azure/event-hubs, which is very similar library to @azure/service-bus in terms of technology and dependencies used. https://github.com/Azure/azure-sdk-for-js/blob/main/samples/frameworks/react/ts/src/hooks/useEventHubs.ts#L1

[GeorgeCodeHub]

Thank you for the quick response, Jeremy.

I followed the guide from the https://github.com/Azure/azure-sdk-for-js/blob/main/sdk/servicebus/service-bus/README.md#javascript-bundle but I still get the same error.

[GeorgeCodeHub]

I have found what the issue is. If I downgrade the react-scripts from 5 to 4 version the service-bus works. However, this is an unwanted solution because it blocks me from using the latest version of typescript. Is there a workaround for this issue?

[jeremymeng]

I have found what the issue is. If I downgrade the react-scripts from 5 to 4 version the service-bus works. However, this is an unwanted solution because it blocks me from using the latest version of typescript. Is there a workaround for this issue?

@GeorgeCodeHub we will have a look. If you could share a minimum project that demonstrates the issue that would be very helpful! /cc @HarshaNalluru

[GeorgeCodeHub]

Oh but of course @jeremymeng. Below I have WeTransfer link that contains two react projects created with create-react-app. https://we.tl/t-dH1CfQleDp

The one named servicebus-react-scripts-4 is the one that works and has the following dependencies:

"dependencies": {
    "@azure/service-bus": "^7.5.1",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^12.1.2",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.39",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "^4.0.1",
    "typescript": "^3.2.1",
    "web-vitals": "^2.1.4"
},

The other is servicebus-react-scripts-5 is the one that crashes and has the following dependencies:

"dependencies": {
    "@azure/service-bus": "^7.5.1",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^12.1.2",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.39",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.3",
    "web-vitals": "^2.1.4"
},

The @azure/service-bus is used in App.tsx for both.

[HarshaNalluru]

Hey @GeorgeCodeHub, looks like the wetransfer link is expired, can you provide one again?

[GeorgeCodeHub]

No problem @HarshaNalluru. Here you go: https://we.tl/t-qWVnqowHAB

[GeorgeCodeHub]

Hello there,

Did you manage to see the issue and recreate it from your end?

[jeremymeng]

@GeorgeCodeHub sorry for the delay. I've done some research and it looks that project created from create-react-app has all their config files hidden. In order to customize webpack you would need to

• npm run eject then edit files under configs/. However, this is irreversible thus not really recommended.
• There's a tool react-app-rewired that allow overriding configuration. I was able to run service bus code after adding the package and a config-overrides.js file on top of a freshly created project. See my gist for the diff.

It is also possible to start the project from scratch, adding react dependencies and webpack yourself then you have full control over configuring tools that you use.

Let us know whether this info helps.

[ghost]

Hi, we're sending this friendly reminder because we haven't heard back from you in a while. We need more information about this issue to help address it. Please be sure to give us your input within the next 7 days. If we don't hear back from you within 14 days of this comment the issue will be automatically closed. Thank you!

[GeorgeCodeHub]

Hello, @jeremymeng apologies I never checked back. I tested your solution and it works like a charm! Thank you very much for the support!!!

[jeremymeng]

@GeorgeCodeHub glad to know that it wors for you!