Incompatibility with REACT 18

[INTUTEC]

I installed your package with react-page and received errors on the module
/Users/mathias/repos-intutec/intutec.io/node_modules/react-dnd/dist/esm/core/DndProvider.mjs

In paticular line 28 which uses the OLD trnspiler.

Reproduction

1. npx create react-app
2. npm install react-dnd --latest

Screenshots

Desktop (please complete the following information):

• Browser Chrome, Safari, FireFox
• Latest Version

Additional context
I was able to fix the problem in the local node_module of yours by changing line 28

FROM
import { jsx as _jsx } from "react/jsx-runtime.js"; which i replaced with import React from 'react';
return /#PURE/ _jsx(DndContext.Provider..... which i replaced with return /#PURE/ React.createElement(DndContext.Provider....

So the code looks like this:

function _objectWithoutProperties(source, excluded) {
    if (source == null) return {};
    var target = _objectWithoutPropertiesLoose(source, excluded);
    var key, i;
    if (Object.getOwnPropertySymbols) {
        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
        for(i = 0; i < sourceSymbolKeys.length; i++){
            key = sourceSymbolKeys[i];
            if (excluded.indexOf(key) >= 0) continue;
            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
            target[key] = source[key];
        }
    }
    return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;
    for(i = 0; i < sourceKeys.length; i++){
        key = sourceKeys[i];
        if (excluded.indexOf(key) >= 0) continue;
        target[key] = source[key];
    }
    return target;
}
// import { jsx as _jsx } from "react/jsx-runtime.js";
import React from 'react';
import { useEffect, memo } from 'react';
import { createDragDropManager } from 'dnd-core';
import { DndContext } from './DndContext.mjs';
let refCount = 0;
const INSTANCE_SYM = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__');
var DndProvider = /*#__PURE__*/ memo(function DndProvider(_param) {
    var { children  } = _param, props = _objectWithoutProperties(_param, [
        "children"
    ]);
    const [manager, isGlobalInstance] = getDndContextValue(props) // memoized from props
    ;
    /**
		 * If the global context was used to store the DND context
		 * then where theres no more references to it we should
		 * clean it up to avoid memory leaks
		 */ useEffect(()=>{
        if (isGlobalInstance) {
            const context = getGlobalContext();
            ++refCount;
            return ()=>{
                if (--refCount === 0) {
                    context[INSTANCE_SYM] = null;
                }
            };
        }
        return;
    }, []);
    return /*#__PURE__*/ React.createElement(DndContext.Provider, {
        value: manager,
        children: children
    });
});
/**
 * A React component that provides the React-DnD context
 */ export { DndProvider,  };
function getDndContextValue(props) {
    if ('manager' in props) {
        const manager = {
            dragDropManager: props.manager
        };
        return [
            manager,
            false
        ];
    }
    const manager = createSingletonDndContext(props.backend, props.context, props.options, props.debugMode);
    const isGlobalInstance = !props.context;
    return [
        manager,
        isGlobalInstance
    ];
}
function createSingletonDndContext(backend, context = getGlobalContext(), options, debugMode) {
    const ctx = context;
    if (!ctx[INSTANCE_SYM]) {
        ctx[INSTANCE_SYM] = {
            dragDropManager: createDragDropManager(backend, context, options, debugMode)
        };
    }
    return ctx[INSTANCE_SYM];
}
function getGlobalContext() {
    return typeof global !== 'undefined' ? global : window;
}

//# sourceMappingURL=DndProvider.mjs.map

[INTUTEC]

Hey there, is there any change someone can help me on my issue or point me into the right direction ?

[INTUTEC]

Hey Guys, is there an update on this? I believe it is a very simple fix which would help a lot of people using your package - > perhaps you can release it as a sub version if you are afraid of breaking anything for other users as I am happy to change my code accordingly..

[Devin Oulighan]

@IN2TEC Same issue, If you're stuck with create-react-app/react-scripts like me, I'm not sure of the answer. I'm considering using patch-package rather than ejecting react-scripts. I hate to do it, but its a really quick fix.

If you're not using create-react-app then I believe there are settings to allow webpack to identify the script.

[INTUTEC]

Thanks god we are not alone with this issue as a questioned our integration skills.

Also talked to the guys from react-page today who heavily relies on react-dnd and they confirmed the issue as well.

I had no other choice but clone the package and make a custom module out of it, which is definitely not the desired solution - but it works for now.

Hope there will be a patch soon, so I can use the official package

[Devin Oulighan]

@IN2TEC patch-package actually is a very solid solution, easier than managing your own version. You can patch react-scripts to alias jsx-runtime, exactly as shown here. Patches will auto-apply on npm install, and are tied to a specific version so if react-dnd releases a fix you can upgrade easily.

Or, you can install craco and write the alias logic in the webpack config there. No other react-scripts defaults will be overwritten.

Either of those should be easier to deal with than bundling the package yourself

[degres]

Is this issue related to react-dnd not working AT ALL on android, even with touch backend? If so, has anyone made a fork of this library to address these issues?