React-dnd: CJS module import is broken on latest

+1, in my scenario webpack build works fine with but mocha --require @babel/register (i.e. node environment) gives same faulty result.

Also /dist/cjs generated distribution subtree in [email protected] seems to be broken, I have tried to hack this in babel configuration via babel-plugin-module-resolver just like this but without success:

  [
    "babel-plugin-module-resolver",
    {
      alias: {
        "^react-dnd$": "\\0/dist/cjs",
        "^react-dnd-.*$": "\\0/dist/cjs",
        "^dnd-.*$": "\\0/dist/cjs"
      }
    }
  ]

Long story short, this rewrite bellow works in webpack (with [email protected]) and also in mocha (with [email protected]) without changes in application source code:

  [
    "babel-plugin-module-resolver",
    {
      alias: {
        "^react-dnd$": "\\0-cjs"
      }
    }
  ]

Facing this same issue.

I came across this as well

@martinschayna did you second snipped worked? I tried a couple things I either get Cannot find dnd-core or

/node_modules/dnd-core/dist/esm/index.js:1
(function (exports, require, module, __filename, __dirname) { export * from './interfaces';

Also I noticed that 9.3.3 has not been published for all packages. That seems a bit weird @darthtrevino ?

I did some more digging around this,

It appears that .d.ts are not patched, (not sure why at this point as the scripts/execute_cjs_replacements.js rules look good to me).

process module requires in /Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd
*.d.ts require replacement [ { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/common/DndContext.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/common/DndProvider.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/common/DragPreviewImage.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/common/DragSourceMonitorImpl.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/common/DropTargetMonitorImpl.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/common/index.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/common/registration.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/common/SourceConnector.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/common/TargetConnector.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/common/wrapConnectorHooks.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/decorators/createSourceFactory.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/decorators/createTargetFactory.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/decorators/decorateHandler.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/decorators/disposables.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/decorators/DragLayer.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/decorators/DragSource.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/decorators/DropTarget.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/decorators/index.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/decorators/interfaces.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/decorators/utils.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/hooks/index.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/hooks/internal/drag.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/hooks/internal/drop.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/hooks/internal/useCollector.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/hooks/internal/useDragDropManager.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/hooks/internal/useMonitorOutput.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/hooks/useDrag.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/hooks/useDragLayer.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/hooks/useDrop.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/index.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/interfaces/connectors.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/interfaces/hooksApi.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/interfaces/index.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/interfaces/monitors.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/interfaces/options.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/utils/cloneWithRef.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/utils/isRef.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/utils/isValidType.js',
    hasChanged: false },
  { file:
     '/Users/cautexier/projects/react-dnd/packages/alternative_builds/cjs/react-dnd/lib/utils/js_utils.js',
    hasChanged: false } ]
js from replacement []
*.d.ts from from replacement []
*.d.ts from import replacement []

I believe there's a missing rule in scripts/execute_cjs_replacements.js to replace imports in js files as well. So DndContext.js does not try to import from dnd-core in node_modules/react-dnd-cjs/lib/common/DndContext.js:11.

        let jsFromReplaceSpec = {
            files: `${file}/lib/**/*.js`,
            from: esmLibs.map(esmLib => new RegExp(`from '${esmLib}'`, 'g')),
            to: esmLibs.map(esmLib => `from '${esmLib}-cjs'`),
        }
        replace.sync(jsFromReplaceSpec)

Lame, I'll take a cut at fixing the release process.

You just committed some abolute path : https://github.com/react-dnd/react-dnd/search?q=christrevino&unscoped_q=christrevino

yarn build
yarn run v1.15.2
$ tsc
error TS6053: File '/Users/christrevino/Workspace/oss/react-dnd/packages/core/react-dnd/src/index.ts' not found.


Found 1 error.

error Command failed with exit code 2.

I cleaned my repo and was able to run the build despite the tsconfig.

Using yarn link I can have thing working but it seems that the published 9.3.5 packages still don't include the correct files.

The CJS builds were always meant to be dynamically generated, so I'm not too worried about absolute paths in them. On yarn install they should be regenerated anyway. The only reason they're not in .gitignore was because of an issue with Lerna not being able to detect them if they were.

@sandorfr what kinds of errors are you seeing after your build completes?

I do see that the typings field is missing in the CJS - I'll do another release for that

Just the error above https://github.com/react-dnd/react-dnd/issues/1468#issuecomment-518488026, but it was solved by cleaning my repo. I guess the yarn install I did then fixed it.

The only remaining problem is that the 9.3.5 you published does not seem to include the changes when you inspect the tarball you still get the wrong imports.

If I look at my locally built packages they are fine.

I'm removing the absolute URLs from the create_packages script, it should be up in a minute

@sandorfr The CJS packages are publishing now at 9.3.6

Hmm, I don't think the replacement script is being run when the publish triggers. Digging into that...

The contents of the npm install look okay, I must've misread something there.

Ok trying it now :)

it's still the wrong files...

Lerna must be setting up yarn links or something - give me a minute
Edit - yep, installing with npm in another directory reproduces this - I'll cut another one..

Thanks for your patience, I apologize for cutting a bunch of patches in a row. Those probably should have been prereleases.

Thanks for your patience, I apologize for cutting a bunch of patches in a row. Those probably should have been prereleases.

Thanks for the reactivity :) I know how painful this kind of issue are. So I can relate :)

the correct version will be 9.3.8?

9.3.9 hopefully - 9.3.8 doesn't have lib/ directories. Something was jacked up with how the prepublishOnly script was executing.

9.3.9 looks good on my end

@martinschayna did you second snipped worked? I tried a couple things I either get Cannot find dnd-core or

@sandorfr yes, it works with given older versions of [email protected] and [email protected] installed. I haven't tried it yet with newer versions, but I'm looking forward to remove my ugly hack from babel config :slightly_smiling_face:

9.3.9 looks good on my end

It does look good 💃. I will defintely know once the CI completes :)

I'm out until the 20th - feel free to reopen this if the problem persists. Thanks!

Can you publish on npm ? The lastest available is 9.3.4 as of today https://www.npmjs.com/package/react-dnd

Can you publish on npm ? The lastest available is 9.3.4 as of today https://www.npmjs.com/package/react-dnd

the fix in question only applies / affects cjs releases: https://www.npmjs.com/package/react-dnd-cjs