For some reason when I try to import one particular module, react refuses to look in the correct directory (./node_modules/). Instead it looks in the ./src/ directory and throws this error:
/src/App.js
Module not found: Can't resolve 'react-d3gantt' in '/Users/RAVEN/Desktop/frontend/materialui/material/src'
All of my other modules are imported correctly. What is it about this one in particular?
Here is my code:
import React, { Component } from 'react';
import { DefaultButton, CompoundButton } from 'office-ui-fabric-react/lib/Button';
import { Image } from 'office-ui-fabric-react/lib/Image';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { GanttChart } from "react-d3gantt";
import OilSite from './components/oilsite';
import BigButton from './components/bigButton';
import LeftNav from './components/leftNav';
import './index.css';
Edit: I used Create-React-App, in case this is relevant to my set up.
Related
I have an app that works well locally. But on production, I am getting this error.
enter image description here
enter image description here
I thought it is related to webpack but could not find any clue. I am stuck with that.
import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import * as styled from 'styled-components';
import NotificationContext from 'og-merchant-portal-react-library/lib/NotificationContext/NotificationContext';
import FetchContext from 'og-merchant-portal-react-library/lib/FetchContext';
import { UserInfoContext } from 'og-merchant-portal-react-library';
import App from './App';
import { unregister } from './serviceWorker';
window.IngenicoLib = {
React,
ReactDOM,
moment,
NotificationContext,
FetchContext,
UserInfoContext,
'styled-components': styled,
};
the error
./src/App.js
Module not found: Can't resolve './components/MainComponent' in 'C:\Users\TiZuM\Desktop\NucampFolder-copy\3-React\nucampsite\src'
app.js
import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
main.js
import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import Directory from './DirectoryComponent';
import { CAMPSITES } from '../shared/campsites';
import CampsiteInfo from './CampsiteInfoComponent';
I've to use bootstrap-select, bootstrap, jquery, popper, isotope, wow and a script file that uses all these libs with Gatsby. I did like this in layout.js:
import React from "react"
import { StaticQuery, graphql } from 'gatsby'
import "bootstrap/dist/css/bootstrap.min.css"
import "./vendors/themify-icon/themify-icons.css"
import "font-awesome/css/font-awesome.min.css"
import "./vendors/flaticon/flaticon.css"
import "animate.css/animate.min.css"
import "./vendors/magnify-pop/magnific-popup.css"
import "./layout.css"
import "./responsive.css"
import "jquery/dist/jquery.min.js"
import "popper.js/dist/popper"
import "bootstrap/dist/js/bootstrap.min.js"
import "bootstrap-select/dist/js/bootstrap-select.min.js"
import "wowjs/dist/wow.min.js"
import "jquery.scroll-parallax/dist/js/jquery.scrollParallax.js"
import "./vendors/isotope/isotope-min.js"
import "./vendors/magnify-pop/jquery.magnific-popup.min.js"
import Loader from "./loader"
import Header from "./header"
import Breadcrumb from "./breadcrumb"
Is this a correct way to import all these dependencies ?
During gatsby develop I am not sure it works or not but I am not getting any errors. During gatsby build it failed. So, I copied all these files to static and build passed.
Then I checked for all these files in common.js but not a single file code is there. How do I use all these dependencies with Gatsby ?
I have structured everything properly. But while compiling react keep on says module not found how to fix?
Module not found: Can't resolve 'ui-config/themes' in 'C:\Users\Goodwork\desktop\mihy-ui-framework\src'
this is my index file
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from "react-router-dom";
import { MuiThemeProvider, createMuiTheme } from '#material-
ui/core/styles';
import { Provider } from 'react-redux';
import store from 'ui-redux/store';
import './index.css';
import App from 'ui-views/App';
import registerServiceWorker from './registerServiceWorker';
import themeObject from "ui-config/themes";
Unless you have configured webpack with resolve alias ui-config, it's not going to work because webpack looks for npm module called ui-config in node_modules.
To fix it,
Add to your webpack configuration the following:
resolve: {
alias: {
'ui-config: 'relative-path-to-ui-config'
}
}
alternatively, you can adjust the relative path in your import
import themeObject from "./ui-config/themes";
This is less optimal because eventually you'll end up struggeling with nested folders import '../../../../../' to find ui-config relative path.
I am just going through the react-beautiful-dnd ,and came across an example of a board drag and drop, the working of which can be seen HERE. When i checked the source code HERE.
At the beginning of the file the following import statements can be seen:
// #flow
import React, { Component } from 'react';
import styled, { injectGlobal } from 'styled-components';
import { action } from '#storybook/addon-actions';
import Column from './column';
import { colors } from '../constants';
import reorder, { reorderQuoteMap } from '../reorder';
import { DragDropContext, Droppable } from '../../../src';
import type {
DropResult,
DragStart,
DraggableLocation,
DroppableProvided,
} from '../../../src';
import type { QuoteMap } from '../types';
I am not quite able to understand the statement import { DragDropContext, Droppable } from '../../../src'; , what exactly is this statement doing , because i see no src.js file from the path this is being imported from , so what exactly is happening at this line of code ?
If you insert a directory to the import path it will default to index.[supported extensions]