質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

2493閲覧

react-dnd-cjsがimportできない

threeaster

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/07/12 11:18

編集2019/07/19 23:57

前提・実現したいこと

https://teratail.com/questions/199122
の調査で、以下を見て、react-dndの代わりにreact-dnd-cjsを使えばうまくいくかもしれないと思いました。
https://github.com/react-dnd/react-dnd/issues/1453
ですが、以下に示すようにreact-dnd-cjsimportできないため、うまくいくかまで到達できません。なのでまずはreact-dnd-cjsimportできるようにして、もともとの
https://teratail.com/questions/199122
を調査したいです。

発生している問題・エラーメッセージ

create-react-appしたものにyarn add react-dnd-cjsだけして、初期作成されるApp.jsにimport { useDrag } from 'react-dnd-cjs'をしてyarn start`をすると、以下のようにエラーが出ました。

Failed to compile. ./src/App.js Module not found: Can't resolve 'react-dnd-cjs' in '/Users/[user_name]/react_dnd_cjs_test/src'

また、yarn tes'tすると以下のようなエラーが出ます。

FAIL src/App.test.js ● Test suite failed to run Cannot find module 'react-dnd-cjs' from 'App.js' However, Jest was able to find: './App.css' './App.js' './App.test.js' You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node']. See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string 2 | import logo from './logo.svg'; 3 | import './App.css'; > 4 | import { useDrag } from 'react-dnd-cjs' | ^ 5 | 6 | function App() { 7 | return ( at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:230:17) at Object.<anonymous> (src/App.js:4:1) Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 2.619s Ran all test suites related to changed files. Watch Usage › Press a to run all tests. › Press f to run only failed tests. › Press q to quit watch mode. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press Enter to trigger a test run.

該当のソースコード

App.js

javascript

1import React from 'react'; 2import logo from './logo.svg'; 3import './App.css'; 4import { useDrag } from 'react-dnd-cjs' 5 6function App() { 7 return ( 8 <div className="App"> 9 <header className="App-header"> 10 <img src={logo} className="App-logo" alt="logo" /> 11 <p> 12 Edit <code>src/App.js</code> and save to reload. 13 </p> 14 <a 15 className="App-link" 16 href="https://reactjs.org" 17 target="_blank" 18 rel="noopener noreferrer" 19 > 20 Learn React 21 </a> 22 </header> 23 </div> 24 ); 25} 26 27export default App; 28

試したこと

import { useDrag } from 'react-dnd-cjs'でなく、const useDrag = require('react-dnd-cjs').useDragも試しましたがだめでした。同じく

Failed to compile. ./src/App.js Module not found: Can't resolve 'react-dnd-cjs' in '/Users/[user_name]/react_dnd_cjs_test/src'

と出ます。

vagrant環境をcentos/7でつくって、nodejs gcc-c++ make yarn create-react-appだけを入れた環境で同じことをしましたがだめでした。

この問題とはそれますが、そもそものreact-dndのテストで、
http://react-dnd.github.io/react-dnd/docs/testing
で示されているように、react-dndを入れて、yarn ejectした上で

"moduleNameMapper": { "^dnd-core$": "dnd-core/dist/cjs", "^react-dnd$": "react-dnd/dist/cjs", "^react-dnd-html5-backend$": "html5-backend/dist/cjs", "^react-dnd-touch-backend$": "touch-backend/dist/cjs", "^react-dnd-test-backend$": "react-dnd-test-backend/dist/cjs", "^react-dnd-test-utils$": "react-dnd-test-utils/dist/cjs" }

package.jsonjestのところに追記する方法も試しましたがだめでした。

https://github.com/react-dnd/react-dnd/issues/1453

の一番下で示されているcraco toolを使うやり方はやり方が分からなかったので試していません。

補足情報(FW/ツールのバージョンなど)

create-react-app 1.5.2

yarn 1.9.2

npm 6.9.0

macOS Mojave 10.14.5

package.jsonは以下です

{ "name": "react_dnd_cjs_test", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.8.6", "react-dnd-cjs": "^9.3.2", "react-dom": "^16.8.6", "react-scripts": "3.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

###追記 2019-07-20
どうやらreact-dnd-cjsのバグのようです。質問の状況は
https://github.com/react-dnd/react-dnd/issues/1466
のissueが修正されたことで起きなくなりました。ですが今度は
https://github.com/react-dnd/react-dnd/issues/1468
と同じ状況になっています。このissueが解決するまで待とうと思っています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

追記 2019-07-20のあと、
https://github.com/react-dnd/react-dnd/issues/1468
のissueが解決したことでimportできるようになりました

投稿2019/08/10 05:25

threeaster

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

公式サイトのInstallationを見ると
yarn add react-dnd-cjs react-dnd-html5-backend-cjs
せよとあります。
公式サイトurl↓

https://react-dnd.github.io/react-dnd/about#installation

react-dnd-html5-backend-cjsをaddしてみるとどうでしょう?

投稿2019/07/12 11:41

hood

総合スコア351

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

threeaster

2019/07/12 11:48

`react-dnd-html5-backend-cjs`を`yarn add`してから`yarn start`しても同じエラーが出ました
hood

2019/07/12 11:55

そうですか・・・お役に立てず、すいません・・・何か原因なのか、こちらでももう少し考えてみようよ思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問