React, error importing file from root folder - javascript

The error (Uncaught Error: Cannot find module '.../action/cartActions') occurs at the cartDetails.js file.
I am attaching the file structure screenshot below,
Import statement = import cartAction from '.../action/cartActions';
The following action's are getting uploaded from cartActions export default {add,remove,increment,decrement,removeall}
As answers suggested,I tried removing one dot from import but hit with same error

You typed one dot too much, should be ../action/cartActions

Related

Attempted import error: 'Picker' is not exported from 'selderee'. while using html-to-text npm package in React app

Attempted import error: 'Picker' is not exported from 'selderee'.
I got this error while I trying to convert html tags to text in the frontend. My code is given below. Please help me to get rid of this error.
import { convert } from "html-to-text";
const html = `<p>My name is Shahid.</p>`;
const text = convert(html, {wordwrap: 130});
enter image description here

React weird code injection after import gives error messages

I have been working on a webapp locally and everything is working flawless. But whenever I run npm run build I get the following error message in my console.
ERROR in ./app/containers/Dashboard/Dashboard.js 42:27 Module parse
failed: Unexpected keyword 'var' (42:27) You may need an appropriate
loader to handle this file type. | import BookDay from
"components/BookDay/BookDay"; | import PatientOverview from
"components/PatientOverview/PatientOverview";
import TreatmentPlanner, { var _ref = | /#PURE/ | _jsx(ContentWidget, {}, void 0, _jsx(TreatmentPlanner, {})); } from "components/TreatmentPlanner/TreatmentPlanner"; #
./app/containers/PracticePage/PracticePage.js 40:0-55 58:5-14 #
./app/containers/PracticePage/Loadable.js #
./app/containers/App/App.js # ./app/app.js # multi
./node_modules/react-app-polyfill/ie11.js ./app/app.js Child
__offline_serviceworker:
My imports look like this:
import ForegroundBlobWrapper from "basicComponents/ForegroundBlob/ForegroundBlobWrapper";
import BookDay from "components/BookDay/BookDay";
import PatientOverview from "components/PatientOverview/PatientOverview";
import TreatmentPlanner from "components/TreatmentPlanner/TreatmentPlanner";
import PlannedAppointments from "components/PlannedAppointments/PlannedAppointments";
import PageTitle from "components/PageTitle/PageTitle";
Also my linter is showing me a very weird problem on the line it is breaking (the import of TreatmentPlanner).
import TreatmentPlanner from "components/TreatmentPlanner/TreatmentPlanner";
Linter error:
I have tried to find out what the problem is, but I honestly do not know what could be causing this.
EDIT:
Found out that the issue might be a styled component, The Treatmentplanner is wrapped inside a styled component called ContentWidget, which is empty. But when I change this to a normal div, it works again? I am even more confused right now.

Cannot import and export classes

I am making a webpage with glitch.com, but this error keeps appearing:
Uncaught SyntaxError: Unexpected token {
This is the code from where the error appears:
import {Unit} from "./Unit.js";
This is how I export Unit: (Unit is a class)
export {Unit};
There aren't any errors in the Unit file.
EDIT: Just for reference, when I go to "Inspect" and then "Sources" I don't see the Unit file, could this be the reason?
You don't need curly brackets around the exported class
export default Unit;
You shouldn't need them either in the import statement if Unit is the only class you're exporting in Unit.js
import Unit from '/Unit.js';

Need help for Unexpected character error with react-redux f7 v3 template

I am not sure if anybody tried redux with framework 7 react template before but I think this is a more general error. I successfully install and run framework 7 react template, then I wanted to try redux. I installed redux, react-redux and tried to integrate todoList example in redux website into same template. I get unexpected character error for some files and I do not know why this happens.
I tried to remove brackets when importing, or added ; end of import lines but didnt change anything.
I copy and paste code directly from redux website, maybe some hidden character problem, how can I test and get rid of that ?
./src/components/Footer.js
Syntax error: D:\client\src\components\Footer.js: Unexpected character ‘​’ (4:0)
import React from 'react'
import FilterLink from '../containers/FilterLink'
import { VisibilityFilters } from '../actions'
​
const Footer = () => (
./src/reducers/index.js
Syntax error: D:\client\src\reducers\index.js: Unexpected character ‘​’ (5:0)
import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
​export default combineReducers({
If you copy/paste directly from the redux examples it looks like there is a zero width space on the blank lines. In the top right hand corner of the examples there is a copy icon which will copy the actual source code, try that.

react compile error, Module not found

I got this error in my browser
Error in ./src/App.js
Module not found: ./components/todo in C:\Users\James\Desktop\react\src
This is what I got in my editor
import {TodoForm, TodoList} from './components/todo'
http://imgur.com/a/8YLod
I even tried import {TodoForm, TodoList} from './components/todo/' I wonder what's wrong.
Imports work on a per module basis for most loaders/bundlers. In other words, you'll need to import the form and list by doing the following:
import { TodoForm } from './components/todo/TodoForm'
import { TodoList } from './components/todo/TodoList'
As a side note, see https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export to make sure that you're exporting the components correctly. The curly braces around your import works for a named export as opposed to a default export.
In order to just import all files from the directory you must have an index.js file that exports everything from the directory
Which in your case the index.js file would look like this
Export * from 'TodoForm'
Export * from 'TodoList'
Note if the export statement doesn't work see this answer to fix the import / export statement
Do you think, when you wrote import {TodoForm, TodoList} from './components/todo', in TodoForm should be value than you exported from file TodoForm.js, and similarly with TodoList? It's don't works.
You should do import from some file. When you wrote from './components/todo' you tried doing import from todo directory. I guess, in egghead video that import works, because, they have index.js file in todo directory. And in this file they do export for every component separately. Try to add index.js file in todo directory with the following contents:
export * from './TodoForm.js';
export * from './TodoList.js';
it's will work.
So the thing is that when you do
import {TodoForm, TodoList} from './components/todo'
What happends is that your compiler will by default search the components TodoForm and TodoList from the index.js file since you have not mentioned explicitly which files to point to
So if in index.js you add something like
export * from './components/todo/TodoForm';
export * from './components/todo/TodoList';
Your approach will work.

Categories