score:141
import react from 'react'
should be
import react from 'react'
you are trying to import react
instead of react
. the name of module is case-sensitive, in this case the name is react
.
score:-2
including when naming your file, in example you import app but the name on your file is app.js this wont allow the system to find the same name.
score:0
i think you need to install react-router by using this command - npm install react-router-dom
follow this link for further details. (https://reacttraining.com/react-router/web/guides/quick-start)
score:0
i had the same issue. the thing is that the compilation process uses caches to optimize build time. it's a internal thing to "babel loader". to make sure you get a fully refreshed compilation process by webpacker/babel, delete the folder "node_modules/.cache" and run npm start
again.
score:1
notification.js
import react from 'react'
const notifications = () => {
return(
<div>
<p>notifications</p>
</div>
)
}
export default notifications
projectlist.js
import react from 'react'
const projectlist = () => {
return(
<div>
<div classname="project-list section">
<div classname="card z-depth-0 project-summary">
<div classname="card-content grey-text darken-3">
<span classname="card-title">project title</span>
<p>posted by net ninja</p>
<p classname="grey-text">3rd september, 2018</p>
</div>
</div>
</div>
</div>
)
}
export default projectlist
module name is react not react and since imports are case-sensitive import react from 'react' is causing error
score:1
so the issue is because you are not importing correctly. like in my case it was :
import {dropdown} from 'react-bootstrap'
i corrected it to
import {dropdown} from 'react-bootstrap'
since import statement are case sensitive
score:1
i had the same problem and it was because i imported react
not react
so it should go like this ..
import react from 'react'
score:1
you can try this solution from web-brackets.com
all you need to do is just rename the imported library from react to react with small r like this (on the first line)
import react from 'react';
Source: stackoverflow.com
Related Query
- Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\React\react' error with React import correct
- Error: Cannot find file: 'index.js' does not match the corresponding name on disk: './node_modules/React/react'
- Cannot find file: 'Chart.js' does not match the corresponding name on disk: '.\node_modules\chart.js\dist\chart.js'
- Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\Victory\es\victory'
- Cannot find file: 'react-router-dom.js' does not match the corresponding name on the disk:
- react or npm issue: Module not found: [CaseSensitivePathsPlugin] `...\react.js` does not match the corresponding path on disk `react`
- Why does the name of the state object not need to match the name in setState?
- Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config: .eslintrc.js
- Next.JS - Error when Checking if window == undefined : Hydration failed because the initial UI does not match what was rendered on the server
- React event target value from jsx element does not get bind to state and json array (Type error cannot read the properties of undefined )
- How to configure Webpack 2.2.1? Error ... configuration object that does not match the API schema
- I am implementing an electron application using electron packager. However, it gives an error that it could not find the index.js file
- What does the error "JSX element type '...' does not have any construct or call signatures" mean?
- Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
- error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist
- React 18: Hydration failed because the initial UI does not match what was rendered on the server
- Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
- Why does jest-dom give the error "TypeError: expect(...).not.toBeVisible is not a function" when I use it
- npx create-react-app myapp error "\AppData\Roaming\npm-cache\_npx\19748" does not contain a package.json file in appdata folder
- Why am I getting the error message "Property 'then' does not exist on type 'AsyncThunkAction'"?
- Trying to fix "Could not find a declaration file for module" from aws-appsync lib cause another error
- Sentry error - IndexSizeError: The index is not in the allowed range
- TypeScript Error 2304: Cannot find name 'div' - CRA TypeScript Template
- Webpack error: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
- ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema
- Could not find a required file index.html - Heroku push error
- Error: Hydration failed because the initial UI does not match what was rendered on the server with useSession() and react-bootstrap
- Module not found: can't resolve' redux-thunk ' error I have tried the solutions but it does not happen.What is the solution?
- Router basename is not able to match the URL because it does not start with the basename
- localhost : postMessage target origin provided does not match the recipient window's origin
More Query from same tag
- React warning: Did not properly initialize state during construction
- How to unit test a React functional component using hooks useEffect,useDispatch and useSelector and Redux?
- How to stop inner onClick event's propogating into outer onSubmit event in React?
- Content beneath fixed AppBar
- Nextjs - Styling nested element with css modules
- REACT: Updating one piece of data in a Firestore document results in all other data being overwritten with empty Strings
- Reusing a variable that is based on multiple redux props without duplication of code
- How can you access the constant variables of one Component in another Component - React
- Render Previous State in React with Redux
- react-saga call function on source component
- Calling a component function from within a function in Reactjs
- Navigate programmatically in React router 4 with mix of function/class components & TypeScript
- html2canvas not showing form elements properly
- React unable to pass paramaeter
- How can I resolve this silly mistake in react.js?
- Using dispatch in class based component give error of invalid hook call
- React useEffect hook missing dependencies linter warnings
- Simplified and efficient way of passing props and conditions
- Why doesn't ReactJS autogenerate keys for dynamic children?
- Displaying filtered data in React
- Babel does not transpile a JSX instance of an arrow function
- Issue to submit CSV file to DB via POST Axios & React-Final-Form
- how to render a data in periodic time using reactjs
- insertRow() and appendChild() equivalent in React
- Problem converting class component to functional component
- React-datepicker minTime and maxTime not works
- How to add font-awesome icons from sources with SASS?
- setState not updating array
- Creating custom variants with Material-UI
- Using html entity   in react hyperscript