前提・実現したいこと
https://teratail.com/questions/199122
の調査で、以下を見て、react-dnd
の代わりにreact-dnd-cjs
を使えばうまくいくかもしれないと思いました。
https://github.com/react-dnd/react-dnd/issues/1453
ですが、以下に示すようにreact-dnd-cjs
がimport
できないため、うまくいくかまで到達できません。なのでまずはreact-dnd-cjs
をimport
できるようにして、もともとの
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.json
のjest
のところに追記する方法も試しましたがだめでした。
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が解決するまで待とうと思っています。

回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。