stuff.js | Smart , sandboxed , and reprogrammable iframes | Proxy library

I found a similar issue https://github.com/facebook/create-react-app/issues/6163 seems like there is no easy solution except ejecting.

1. you can use https://www.npmjs.com/package/react-app-rewired if you don't want to eject CRA.

2. Another solution can be a module loader to load ESM files in Node https://www.npmjs.com/package/esm this package can help.

You cannot do this. IE does not understand the type="module" attribute.

Instead use rollup.js and Babel to bundle your module into an old style script mystuff_incl_ie.js and load this with the normal script tag:

Using {{ lookup('file', './stuff.json') | string }} will force Ansible to evaluate it as a string without adding quotes.

There are several examples in Using filters to manipulate data that use this filter.

Documentation for the filter can be found in the Jinja2 documentation. The documentation states that the filter will:

Make a string unicode if it isn’t already. That way a markup string is not converted back to unicode.

I'm not particularly sure why this corrects the issue, but it did.

"require" is commonjs module import function and is not available in browsers api (only nodejs) , you can use attribute type='module' on script tag AND ES6 module imports but it only works in newer browsers. Otherwise if you use imports in source code and want to ship the code to older browsers you need to use bundlers such as webpack, rollup, or parcel( way easier to setup than webpack ), Babel only polyfills javascript but does not bundles modules.

You also need to make sure babel does not transforms ES6 modules to commonjs modules (https://babeljs.io/docs/en/babel-preset-env#modules) because commonjs is not supported in browsers as i said before

Finally figured it out.

In order to make following import work

I don't believe there's anything wrong with this, useDispatch isn't some expensive operation or anything, it literally just gives that hook/component/whatever a reference to the dispatch function. Like importing the same component/script in different files, it's perfectly fine.

One point to note, based on react redux docs here, is that when creating callbacks that use dispatch, they should be memoized with useCallback

No, this is not valid.

In your first case, you're doing useDispatch() during render, and then you call dispatch(modalNameHide()) during onClick. This is valid and correct usage of useDispatch.

In your theoretical second case, you're doing modalNameHide() during onClick, and this means that useDispatch() will also be used during onClick instead of render (which is incorrect usage of useDispatch).

useDispatch is a react hook, and you're breaking the Rules of Hooks. Read more here: https://reactjs.org/docs/hooks-rules.html

Try processing path with path module, as below