I'm creating a simple e-commerce React project to learn, I'm using Visual Studio. However, I got these errors:
Errors
My index.js code is
code
Thanks
I'm not sure how your file structure is but when you initialize a React project 'App.js' and 'index.js' should be in your root directory. Then you would import App as import App from './App';
Refer to this question: Expected an identifier and instead saw '>'
"JSHint does not support linting of jsx. If you want to develop react applications using jsx you should disable it or better switch to ESLint.
For Visual Studio Code there is a plugin that you can install."
In your Settings > User Settings, add this if it's not already there.
"jshint.options": {
"esversion":6
}
This error will occur if JSX is not being compiled properly. See Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>
function App() {
return (
<div>Sample Component</div>
);
}
ReactDOM.render(<App/>, document.getElementById("root"))
</script>
To solve this, use technologies such as Babel to enable JSX syntax
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
function App() {
return (
<div>Sample Component</div>
);
}
ReactDOM.render(<App/>, document.getElementById("root"))
</script>
Related
I am trying to learn Vue3 on a hobby project and have an issue when trying to set up Auth0 using their SDK in the App.vue file and I'm hoping someone can explain the issue!
I've followed the docs but converted (I think) the code to use the <script setup>...</script> syntax but I am getting an error when using the useAuth0 function in my setup. Vue is warning that inject() can only be used inside setup() or functional components..
If I call inject directly in the setup block it works, and if I copy the code for useAuth0 in to a file in my application and import and call it resolves it and the login method works.
I don't understand why the provided implementation doesn't work when copying the code does - could anyone please explain that?
When copying the code the loginWithRedirect function works but the other items on on the auth0 client don't seem to (it seems to be stuck as isLoading: true
Here's the relevant code
I've registered the plugin in the main.ts and then trying to use it in app.vue to add a login button - there seemed to be a type issue with the plugin hence the any cast for now
main.ts
const auth0Plugin = createAuth0({
domain: "dev-9vwsdbs4.us.auth0.com",
client_id: "HtmGSIyIGplusxDGTo1VwWVXebgOfIVM",
redirect_uri: window.location.origin,
});
app.use(auth0Plugin as any);
app.vue
<script setup lang="ts">
import { RouterView } from "vue-router";
import { useAuth0 } from "#auth0/auth0-vue";
const { loginWithRedirect, isLoading } = useAuth0();
</script>
<template>
<RouterView />
<p>{{ isLoading }}</p>
<button #click="loginWithRedirect">Login</button>
</template>
This is the output in the console:
[Vue warn]: inject() can only be used inside setup() or functional components.
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of setup function
App.vue:4 Uncaught TypeError: Cannot destructure property 'loginWithRedirect' of 'useAuth0(...)' as it is undefined.
I have created an ASP.NET web Application(.NET framework) and have integrated React to it using ReactJS.NET package.
Now, when I try to use hooks in the functional components, it is not working.
Can someone share any github sources or links where Hooks were used in ReactJS.NET project
I have added the project in Github. Link: https://github.com/naveengorojanam/ReactPOC
in the project, the path to the JSX file is ReactPOC/ReactPOC16/Scripts/JS/App.jsx
function App() {
//const [temp, setTemp] = React.useState("hello");
return (
<div>
<h1>React functional component</h1>
<button onClick={() => { window.alert('button clicked'); }}>click for alert</button>
</div>
)}
React.render(<App />, document.getElementById("reactdiv"));
I'm unable to run the temp hook from the App.jsx component.
Please let me know where i went wrong
If I uncomment the line //const [temp, setTemp] = React.useState("hello"); , the project will not show any output
I'm trying to use the BotUI framework in my meteor project and following the installation guide, but can't seem to get it to work. No matter which setup I try, I always get various errors, for the following I get Uncaught TypeError: BotUI is not a constructor.
My client/main.js file:
//import Meteor stuff
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
//NPM packages
import Vue from 'vue'; //not necessary according to installation guide
import BotUI from 'botui';
//files
import './main.html';
Meteor.startup(() => {
var botui = new BotUI('my-botui-app');
botui.message.bot({
content: "Hello there!"
});
});
My client/main.html file:
<head>
<title>BotUI with Meteor</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
<div id="my-botui-app">
<bot-ui>
</bot-ui>
</div>
</body>
I also tried including the files locally in /imports or using CDN with $.getScript, but with no success.
What am I missing?
For people who will encounter the "BotUI is not a constructor" issue in the future, this is related to missing scripts and css in the index.html, and recommended to flow the BotUi instructions.
I am very excited with ES2015 modules in Meteor 1.3. We have written an app with medium complexity with Meteor 1.2. As we have very large number of templates and files, it is taking a bit of time to download the content on client side. so I am interested in the lazy loading feature using import. From the meteor night talk, they say that the Blaze templates are still global and cannot be imported (or lazy loaded), I have tried using React inside Blaze.
Added react-template-helper package using meteor add react-template-helper
Create imports folder and added testComponent.jsx file which exports 'TestComponent'
//testComponent.jsx
import React from 'react';
export default class TestComponent extends React.Component {
render() {
return (
<div>
<h1>TestComponent</h1>
<div>This is from Test Component</div>
</div>
);
}
}
After in the Blaze template outside imports folder,
<!-- homeReact template html-->
<template name="homeReact">
<div>
{{> React component=TestComponent}}
</div>
</template>
In the template's js file which is also outside of imports folder
// homeReact template js
import { Template } from 'meteor/templating';
import TestComponent from '/imports/testComponent.jsx`;
Template.homeReact.helpers({
TestComponent() {
return TestComponent;
}
});
This worked but the imports/testComponent.jsx is downloaded on the client (checked using chrome dev tools - sources tab), even if the current route doesn't require homeReact template.
Then I have used require instead of import like this,
// homeReact template js
import { Template } from 'meteor/templating';
Template.homeReact.onCreated(function () {
this.TestComponent = require('/imports/testComponent.jsx').TestComponent;
});
Template.homeReact.helpers({
TestComponent() {
return Template.instance().TestComponent;
}
});
This code also downloads the imports/testComponent.jsx file but in addition I also got an error
In template "homeReact", call to {{> React ... }} missing component argument.
So, my question is, is it possible to lazy load (download) files only when required?
I'm new to angular 2, so be patient!
I'm trying to put together Angular2 and Firebase to have a real time app to update information on the page. By looking at the Firebase github for Angular2, they say to inject Firebase and also define a base url for the whole app, like so:
import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2';
bootstrap(App, [
FIREBASE_PROVIDERS,
defaultFirebase('https://my.firebaseio.com')
]);
The problem is, I'm using AngularRouter defined on the bootstrap as well. When I try to initiate the app like this:
import {ROUTER_PROVIDERS} from 'angular2/router'
import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2'
bootstrap(AppComponent, [ROUTER_PROVIDERS,
FIREBASE_PROVIDERS,
defaultFirebase('https://my.firebaseio.com') //In my code I'm using my own url
]);
I get this error:
angular2-polyfills.js:1243 SyntaxError: Unexpected token <(…)
My structure is like this:
app.component.ts
boot.ts
--home/home.component.ts
--user/user.component.ts
--post/post.component.ts
And the firebase is going to be used on the user and post component (at least for this test).
I know, based on the Angular doc we should avoid this type of declaration on a root level because it will create an instance of each independent. But in this case, isn't it necessary to declare it here?
What is going on and how can I solve this?
Edited:
As requested, this is my html file:
<head>
<base href="/">
<title>Angular 2 Firebase</title>
<link rel="stylesheet" href="assets/stylesheets/bootstrap.min.css" />
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot').then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
Note: The error only appear when I insert the code for default firebase in the boot.ts. Before I do this, the application works just fine!
You need to include angularfire2 into your HTML file in your SystemJS configuration:
System.config({
map: {
firebase: '/node_modules/firebase/lib/firebase-web.js',
angularfire2: ' node_modules/angularfire2'
},
packages: {
angularfire2: {
main: 'angularfire2.js',
defaultExtension: 'js'
},app: {
format: 'register',
defaultExtension: 'js'
}
},
});
to be able to inject elements from this library.
You also need to remove the script element for Firebase in the head of your HTML page:
<!-- script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script -->
The library needs to be installed using npm install firebase and referenced from the SytemJS configuration.
See the following HTML page as a reference:
https://github.com/angular/angularfire2/blob/master/test/e2e/firebase_list/index.html