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.
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 recently installed aws amplify using
npm install -g #aws-amplify/cli#latest
I am using the basic script verbatim from the aws-amplify site:
import { Amplify } from 'aws-amplify';
import { Authenticator } from '#aws-amplify/ui-react';
//import '#aws-amplify/ui-react/styles.css';
import '#aws-amplify/ui/dist/style.css';
import awsExports from '../../aws-exports';
Amplify.configure(awsExports);
export default function App() {
return (
<Authenticator>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
}
I am receiving an error that
Module '"#aws-amplify/ui-react"' has no exported member 'Authenticator'.ts(2305)
I am using aws-amplify version 8.5. The backend is configured correctly. I am able to import "withAuthenticator". Does this mean it did not install correctly? I uninstalled and reinstalled it but still get the error. How can I import the Authenticator from the aws-amplify module?
Thanks!
It sounds like you are using v1 of #aws-amplify/ui-react. Your example command installs the latest version of the CLI, but not the #aws-amplify/ui-react package. Please try updating to the latest version of #aws-amplify/ui-react:
npm install #aws-amplify/ui-react#latest
Also, you will want to change your CSS styles import to the line you've commented out:
import '#aws-amplify/ui-react/styles.css';
See https://ui.docs.amplify.aws/getting-started/installation
Node.js follows the commonJS module system, and it require to include modules that exist in separate files and for that purpose it has methods like “require” and “ES6 import and export” are available in node.js.
So i used the require method, in my app.js file
const { withAuthenticator, AmplifySignOut } = require("#aws-amplify/ui-react");
too in my index.js file i used the own import method for the Amplify function!
import { Amplify } from 'aws-amplify'; or just we can too use the require method
// const { Amplify } = require("aws-amplify");
Thanks aws.
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>
I am trying to create a package for Meteor, unsuccessfully unfortunately. I'm on Meteor 1.8.1. My goal is to make a template for a button that I can use in my application like this {{> testButton}} (I am just trying it out atm).
package.js
Package.describe({
name: 'button-test',
version: '0.0.1',
summary: '',
git: '',
documentation: 'README.md'
});
Package.onUse(function (api) {
api.use(['ecmascript']);
api.use(['session', 'templating'], ['client', 'server']);
api.mainModule('button-test.js');
});
Package.onTest(function (api) {
api.use('ecmascript');
api.use('tinytest');
api.use('button-test');
api.mainModule('button-test-tests.js');
});
button-test.js
// Variables exported by this module can be imported by other packages and
// applications. See button-test-tests.js for an example of importing.
import './testButton.js';
testButton.js
import { Template } from 'meteor/templating';
Template.testButton.events({
'click #buttonT': () =>
console.log('Clicked the button')
});
testButton.html
<template name="testButton"><button id="buttonT">TEST</button></template>
I have some problems with this;
Running the code like this returns the error TypeError: Cannot read property 'testButton' of undefined. So there is a problem with Template, but I don't know what it is, since I have added it with api.use
When I try to add import ./testButton.html to testButton.js I get the error Error: Cannot find module './testButton.html'
I looked at the source code for accounts-ui-unstyled, but this is written on an older meteor version.
Does anybody have an idea as to what I am doing wrong?
The problem was with the api.mainModule, I solved it by having my Package.onUse like this:
Package.onUse(function (api) {
api.use(['templating', 'blaze'], 'client');
api.use('ecmascript');
api.addFiles(['button-test.js'], 'client');
});
After using the addFiles instead of mainModule, I could import the html and the Template problem disappeared. I have no idea why this works and mainModule does not, but hey, it does.
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?