React-dnd: Module not found: Can't resolve './Constants' in 'D:\desktop\ant_design_pro\onefox\src\components\Drag'

Created on 2 Jun 2018 · 3Comments · Source: react-dnd/react-dnd

Describe the bug
A clear and concise description of what the bug is.
Module not found: Can't resolve './Constants' in 'D:\desktop\ant_design_pro\onefox\src\components\Drag'
To Reproduce
Steps to reproduce the behavior:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DragSource } from 'react-dnd';
import { ItemTypes } from './Constants';

Where is the Constants? How can I import the ItemTypes ?
Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Browser chrome

Additional context
Add any other context about the problem here.

Source

yaoyuande

Most helpful comment

In react-dnd, every drag source has a type. And what the types are depend on what you're dragging in your program. So in my app I have types "task" and "project", but you might have "contact" and "organization". If you don't want to type out these strings all the time (since you might misspell theme), you can store them all in a file:

// Constants.js
export default {
  CONTACT: "contact",
  ORGANIZATION: "organization",
};

then in your e.g. Drag/Contact.js you would use:

import ItemTypes from "./Constants";

class Contact extends Component {
  ...
}

Contact = DragSource(ItemTypes.CONTACT, ...)(Contact);
export { Contact };

It looks like your problem is that you didn't create a Constants.js file or it isn't in the Drag directory on your PC!

amazingmarvin on 2 Jun 2018

👍4

All 3 comments

@yaoyuande seems like this issue is not related to react-dnd.

atfzl on 2 Jun 2018

// Constants.js
export default {
  CONTACT: "contact",
  ORGANIZATION: "organization",
};

then in your e.g. Drag/Contact.js you would use:

import ItemTypes from "./Constants";

class Contact extends Component {
  ...
}

Contact = DragSource(ItemTypes.CONTACT, ...)(Contact);
export { Contact };

It looks like your problem is that you didn't create a Constants.js file or it isn't in the Drag directory on your PC!

amazingmarvin on 2 Jun 2018

👍4

@amazingmarvin Thank you very much!

yaoyuande on 3 Jun 2018

Was this page helpful?

0 / 5 - 0 ratings