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';
Related
I wanted to put my interface/type in a seperate file so I could import it later but for some reason I am getting this error:
Uncaught SyntaxError: The requested module '/src/types/settings.ts' does not provide an export named 'default'
Here is my types/settings.ts
interface Settings {
activeUserId: number
}
export default Settings
And here is how I import it:
import Settings from '#/types/settings'
Same error shows if I try to export a Type but it works fine if I export a Class. I can't understand what I am doing wrong here.
I am using Vue 3/Vite with Typescript.
Don't use default export.
Use the following instead.
// types/settings.ts
export interface Settings {
activeUserId: number
}
import { Settings } from '#/types/settings'
When i want to create an element without JSX it shows me this error 'React' is not defined no-undef. I am a beginner. I don't know what is the problem. Can anyone help
import logo from './logo.svg';
import './App.css';
const app = React.createElement("h1", null, "Without JSX"); // Showing an error
function App() {
return (
<div className="App">
{app};
</div>
);
}
export default App;
These messages are shown in VS code Terminal.
Failed to compile.
./src/index.js
SyntaxError: E:\react_js_course\src\index.js: Unexpected token, expected "," (11:2)
Failed to compile.
src\App.js
Line 4:13: 'React' is not defined no-undef
Search for the keywords to learn more about each error.
A couple points just based on the code you provided:
You are using JSX in your example: your App component returns JSX, so React should be in scope to do that.
You are explicitly using the React method createElement so React should be available in this file.
To fix both issues add import React from 'react'; at the top of this file.
import React from 'react' is required for writing code in JSX and alternative you use ES7 snippet which help to auto populate the code
enter image description here
Img-extension ss
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
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.
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.