CJS module import is broken on latest #1468

muratsu · 2019-07-13T01:43:21Z

Describe the bug
Latest CJS packages seem to be broken (9.3.3). Using 9.2.1 works. See codesandbox or the log below:

[ error ] ./node_modules/react-dnd-cjs/lib/common/DndContext.js
Module not found: Can't resolve 'dnd-core' in '/mnt/c/dev/foobar/app/node_modules/react-dnd-cjs/lib/common'
{ Error: Cannot find module 'dnd-core'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)

Reproduction

https://codesandbox.io/embed/wonderful-turing-mqywk

The text was updated successfully, but these errors were encountered:

martinschayna · 2019-07-18T12:01:43Z

+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 react-dnd@9.3.2 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 react-dnd@9.3.2) and also in mocha (with react-dnd-cjs@9.2.1) without changes in application source code:

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

sarnason · 2019-07-23T21:24:43Z

Facing this same issue.

takotaco · 2019-07-26T22:32:50Z

I came across this as well

sandorfr · 2019-08-05T06:08:33Z

@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';

sandorfr · 2019-08-05T07:42:47Z

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

sandorfr · 2019-08-06T01:53:17Z

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)

darthtrevino · 2019-08-06T02:31:20Z

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

sandorfr · 2019-08-06T03:58:32Z

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.

sandorfr · 2019-08-06T05:14:58Z

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.

darthtrevino · 2019-08-06T05:25:35Z

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.

darthtrevino · 2019-08-06T05:27:08Z

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

darthtrevino · 2019-08-06T05:37:18Z

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

sandorfr · 2019-08-06T05:37:42Z

Just the error above #1468 (comment), 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.

darthtrevino · 2019-08-06T05:41:27Z

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

darthtrevino · 2019-08-06T05:47:49Z

@sandorfr The CJS packages are publishing now at 9.3.6

darthtrevino · 2019-08-06T05:52:56Z

~~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.

sandorfr · 2019-08-06T05:57:54Z

Ok trying it now :)

sandorfr · 2019-08-06T06:05:09Z

it's still the wrong files...

darthtrevino · 2019-08-06T06:06:22Z

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..

darthtrevino · 2019-08-06T06:40:16Z

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

sandorfr · 2019-08-06T06:42:10Z

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 :)

sandorfr · 2019-08-06T06:43:58Z

the correct version will be 9.3.8?

darthtrevino · 2019-08-06T06:48:35Z

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

darthtrevino · 2019-08-06T06:52:19Z

9.3.9 looks good on my end

martinschayna · 2019-08-06T07:23:22Z

@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 react-dnd@9.3.2 and react-dnd-cjs@9.2.1 installed. I haven't tried it yet with newer versions, but I'm looking forward to remove my ugly hack from babel config 🙂

sandorfr · 2019-08-06T08:06:37Z

9.3.9 looks good on my end

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

darthtrevino · 2019-08-06T18:19:12Z

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

fabien-h · 2019-08-22T08:19:45Z

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

sandorfr · 2019-08-22T17:31:07Z

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

Topppy mentioned this issue Jul 23, 2019

Error on fresh installation #1485

Closed

LouisBrunner mentioned this issue Jul 27, 2019

TypeError: manager.getActions is not a function with latest react-dnd version (9.3.2 at time of writing) LouisBrunner/dnd-multi-backend#31

Closed

darthtrevino self-assigned this Aug 6, 2019

darthtrevino added the bug label Aug 6, 2019

darthtrevino closed this as completed Aug 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CJS module import is broken on latest #1468

CJS module import is broken on latest #1468

muratsu commented Jul 13, 2019 •

edited

martinschayna commented Jul 18, 2019

sarnason commented Jul 23, 2019

takotaco commented Jul 26, 2019

sandorfr commented Aug 5, 2019

sandorfr commented Aug 5, 2019

sandorfr commented Aug 6, 2019 •

edited

darthtrevino commented Aug 6, 2019

sandorfr commented Aug 6, 2019 •

edited

sandorfr commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

sandorfr commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

darthtrevino commented Aug 6, 2019 •

edited

sandorfr commented Aug 6, 2019

sandorfr commented Aug 6, 2019

darthtrevino commented Aug 6, 2019 •

edited

darthtrevino commented Aug 6, 2019

sandorfr commented Aug 6, 2019

sandorfr commented Aug 6, 2019 •

edited

darthtrevino commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

martinschayna commented Aug 6, 2019

sandorfr commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

fabien-h commented Aug 22, 2019

sandorfr commented Aug 22, 2019

CJS module import is broken on latest #1468

CJS module import is broken on latest #1468

Comments

muratsu commented Jul 13, 2019 • edited

martinschayna commented Jul 18, 2019

sarnason commented Jul 23, 2019

takotaco commented Jul 26, 2019

sandorfr commented Aug 5, 2019

sandorfr commented Aug 5, 2019

sandorfr commented Aug 6, 2019 • edited

darthtrevino commented Aug 6, 2019

sandorfr commented Aug 6, 2019 • edited

sandorfr commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

sandorfr commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

darthtrevino commented Aug 6, 2019 • edited

sandorfr commented Aug 6, 2019

sandorfr commented Aug 6, 2019

darthtrevino commented Aug 6, 2019 • edited

darthtrevino commented Aug 6, 2019

sandorfr commented Aug 6, 2019

sandorfr commented Aug 6, 2019 • edited

darthtrevino commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

martinschayna commented Aug 6, 2019

sandorfr commented Aug 6, 2019

darthtrevino commented Aug 6, 2019

fabien-h commented Aug 22, 2019

sandorfr commented Aug 22, 2019

muratsu commented Jul 13, 2019 •

edited

sandorfr commented Aug 6, 2019 •

edited

sandorfr commented Aug 6, 2019 •

edited

darthtrevino commented Aug 6, 2019 •

edited

darthtrevino commented Aug 6, 2019 •

edited

sandorfr commented Aug 6, 2019 •

edited