I have set the webpack_nonce in the entry point of my library which take the value from WINDOW.NONCE_ID.

I got this nice little piece of code:

/* WEBPACK VAR INJECTION */(function(__react_refresh_utils__, __react_refresh_error_overlay__) {__webpack_require__.$Refresh$.runtime = __webpack_require__(/*! ./node_modules/react-refresh/runtime.js */ "./node_modules/react-refresh/runtime.js");
__webpack_require__.$Refresh$.setup(module.i);

/* global __webpack_nonce__ */
// eslint-disable-line no-unused-vars
__webpack_require__.nc = window.NONCE_ID; //eslint-disable-line no-global-assign, camelcase
...

So far so good. The build is configured to use lazy loading which in theory should not be a problem and so it seems since in production it does work the nonce is getting added to the inline styles

The problem is that when serving the bundle through webpack-dev-server the value when loading the chunk became undefined for some reason