React-dnd: CJSモジュールのインポートが最新で壊れています

作成日 2019年07月13日  ·  29コメント  ·  ソース: react-dnd/react-dnd

バグを説明する
最新のCJSパッケージは壊れているようです（9.3.3）。 9.2.1の使用は機能します。 以下のcodesandboxまたはログを参照してください。

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

再生

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

bug
ソース
picture muratsu
👍19

最も参考になるコメント

私は20日まで外出しています-問題が解決しない場合は、これを再開してください。 ありがとう！

picture darthtrevino 2019年08月06日
🚀2 👍1

全てのコメント29件

+1、私のシナリオでは、 webpackビルドは正常に機能しますが、 mocha --require @babel/register （つまりノード環境）でも同じ誤った結果が得られます。

また、 /dist/cjsで生成された分布サブツリー[email protected]壊れているようだ、私は経由バベルの設定でこれをハックしようとしていますbabel-plugin-module-resolverちょうどこのような成功せず：

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

簡単に言うと、この書き換えの以下は、アプリケーションのソースコードを変更せずに、 webpack （ [email protected] ）およびmocha （ [email protected] ）で機能します。

  [
    "babel-plugin-module-resolver",
    {
      alias: {
        "^react-dnd$": "\\0-cjs"
      }
    }
  ]
martinschayna picture martinschayna 2019年07月18日

これと同じ問題に直面しています。

sarnason picture sarnason 2019年07月23日

私もこれに出くわしました

takotaco picture takotaco 2019年07月27日

@martinschaynaあなたは2番目に切り取って働いたのですか？ dnd-coreが見つからないか、

/node_modules/dnd-core/dist/esm/index.js:1
(function (exports, require, module, __filename, __dirname) { export * from './interfaces';
sandorfr picture sandorfr 2019年08月05日

また、9.3.3がすべてのパッケージで公開されているわけではないことに気づきました。 それは少し奇妙に思えます

sandorfr picture sandorfr 2019年08月05日

私はこれについてもう少し掘り下げました、

.d.tsにはパッチが適用されていないようです（ scripts/execute_cjs_replacements.jsルールが私にはよく見えるので、この時点で理由はわかりません）。

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 []

scripts / execute_cjs_replacements.jsには、jsファイルのインポートを置き換えるためのルールが欠落していると思います。 したがって、DndContext.jsは、node_modules / react-dnd-cjs / lib / common / DndContext.js：11のdnd-coreからインポートしようとしません。

        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)
sandorfr picture sandorfr 2019年08月06日

残念ながら、リリースプロセスの修正をカットします。

darthtrevino picture darthtrevino 2019年08月06日

絶対的なパスをコミットしました： https ： 

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 picture sandorfr 2019年08月06日

リポジトリをクリーンアップし、tsconfigにもかかわらずビルドを実行できました。

ヤーンリンクを使用すると、動作させることができますが、公開されている9.3.5パッケージにはまだ正しいファイルが含まれていないようです。

sandorfr picture sandorfr 2019年08月06日

CJSビルドは常に動的に生成されることを目的としていたため、CJSビルドの絶対パスについてはあまり心配していません。 yarn install 、とにかく再生成する必要があります。 それらが.gitignoreにない唯一の理由は、Lernaがそれらを検出できないという問題が原因でした。

darthtrevino picture darthtrevino 2019年08月06日

@sandorfrビルドが完了した後、どのような種類のエラーが表示されますか？

darthtrevino picture darthtrevino 2019年08月06日

CJSにタイピングフィールドがないことはわかります-そのために別のリリースを行います

darthtrevino picture darthtrevino 2019年08月06日
👍1

https://github.com/react-dnd/react-dnd/issues/1468#issuecomment -518488026の上のエラーだけですが、リポジトリをクリーンアップすることで解決しました。 私が行ったヤーンのインストールを修正したと思います。

残っている唯一の問題は、tarballを検査したときに、公開した9.3.5に変更が含まれていないように見えることです。それでも、間違ったインポートを取得します。

ローカルで作成したパッケージを見ると、問題ありません。

sandorfr picture sandorfr 2019年08月06日

create_packagesスクリプトから絶対URLを削除しています。1分で起動するはずです。

darthtrevino picture darthtrevino 2019年08月06日
🚀1 ❤1

@sandorfrCJSパッケージは現在9.3.6で公開されています

darthtrevino picture darthtrevino 2019年08月06日

うーん、公開がトリガーされたときに置換スクリプトが実行されているとは思いません。

npm installの内容は大丈夫そうです、私はそこで何かを読み間違えたに違いありません。

darthtrevino picture darthtrevino 2019年08月06日

今すぐお試しください:)

sandorfr picture sandorfr 2019年08月06日

それはまだ間違ったファイルです...
image

sandorfr picture sandorfr 2019年08月06日

レルナは糸のリンクか何かを設定しているに違いありません-ちょっと待ってください
編集-うん、別のディレクトリにnpmをインストールすると、これが再現されます-別のディレクトリを切り取ります。

darthtrevino picture darthtrevino 2019年08月06日

ご理解のほどよろしくお願いいたします。パッチを一列にカットしていただき、誠にありがとうございます。 それらはおそらくプレリリースであるはずです。

darthtrevino picture darthtrevino 2019年08月06日
🚀1

ご理解のほどよろしくお願いいたします。パッチを一列にカットしていただき、誠にありがとうございます。 それらはおそらくプレリリースであるはずです。

反応性に感謝します:)私はこの種の問題がどれほど苦痛であるかを知っています。 だから私は関連付けることができます:)

sandorfr picture sandorfr 2019年08月06日

正しいバージョンは9.3.8になりますか？

sandorfr picture sandorfr 2019年08月06日

9.3.9うまくいけば-9.3.8にはlib /ディレクトリがありません。 prepublishOnlyスクリプトの実行方法に問題が発生しました。

darthtrevino picture darthtrevino 2019年08月06日

9.3.9は私の側ではよさそうだ

darthtrevino picture darthtrevino 2019年08月06日
🚀1

@martinschaynaあなたは2番目に切り取って働いたのですか？ dnd-coreが見つからないか、

@sandorfrはい、インストールされている[email protected]と[email protected]古いバージョンで動作します。 新しいバージョンではまだ試していませんが、醜いハックをbabel configから削除するのを楽しみにしています：slightly_smiling_face：

martinschayna picture martinschayna 2019年08月06日

9.3.9は私の側ではよさそうだ

見栄えがします💃。 CIが完了すると、私は確実にわかります:)

sandorfr picture sandorfr 2019年08月06日

私は20日まで外出しています-問題が解決しない場合は、これを再開してください。 ありがとう！

darthtrevino picture darthtrevino 2019年08月06日
🚀2 👍1

npmで公開できますか？ 利用可能な最新のものは、今日の時点で9.3.4ですhttps://www.npmjs.com/package/react-dnd

fabien-h picture fabien-h 2019年08月22日

npmで公開できますか？ 利用可能な最新のものは、今日の時点で9.3.4ですhttps://www.npmjs.com/package/react-dnd

問題の修正はcjsリリースにのみ適用/影響します： https ：//www.npmjs.com/package/react-dnd-cjs

sandorfr picture sandorfr 2019年08月22日
このページは役に立ちましたか？
0 / 5 - 0 評価

関連する問題

redochka picture redochka  ·  3コメント
user1736 picture user1736  ·  3コメント
djeremh picture djeremh  ·  3コメント
rubayethossain picture rubayethossain  ·  3コメント
BrennanRoberts picture BrennanRoberts  ·  3コメント