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.
Related
My Next.js app worked fine yesterday but today it has an error like this:
error - ./node_modules/#urql/core/dist/ddbb86ae.mjs:1:0
Module not found: Can't resolve 'graphql'
Import trace for requested module:
./node_modules/#urql/core/dist/urql-core.mjs
./node_modules/urql/dist/urql.es.js
./pages/_app.js
https://nextjs.org/docs/messages/module-not-found
I have no idea what happened so I git reset --hard but the problem is still there.
Please help me fix it. I appreciate it.
_app.js:
import { StateContext } from "../lib/context";
import { Provider, createClient } from "urql";
const client = createClient({ url: "http://localhost:1337/graphql" });
function MyApp({ Component, pageProps }) {
return (
<StateContext>
<Provider value={client}>
<Nav />
<Component {...pageProps} />
</Provider>
</StateContext>
);
}
export default MyApp;
I hope this solves your problem
npm install --save graphql ra-data-graphql
or
yarn add graphql ra-data-graphql
I'm trying to migrate my React app to Next.js. I keep having below error from export const history = createBrowserHistory(); in my configureStore.js.
Invariant Violation: Browser history needs a DOM
configureStore.js
import { createStore, combineReducers, compose, applyMiddleware } from "redux";
import { connectRouter, routerMiddleware } from "connected-react-router";
import { createBrowserHistory } from "history";
import thunk from "redux-thunk";
import user from "./modules/user";
import stores from "./modules/stores";
import info from "./modules/info";
export const history = createBrowserHistory();
const middlewares = [thunk, routerMiddleware(history)];
const reducer = combineReducers({
user,
stores,
info,
router: connectRouter(history)
});
export default function configureStore(preloadedState) {
return createStore(
reducer,
preloadedState,
compose(
applyMiddleware(
...middlewares
)
)
);
}
I've found that many things need to be changed when migrating React to Next.js as Next is a framework which requires its own code architecture as well as the difference between SSR and CSR. When I studied Next.js tutorials, there is a routing section which says that routing is differentiated based on CSR or SSR. Does that mean I cannot use browser history in Next.js? That's what I'm guessting. I'm still confused.
You are right. There is different between SSR and CSR. Next.js use Next Router for routing for CSR and if you need custom SSR, then you should ask for some help from frameworks like express.
By doing the CSR, nextjs will remember browser history and back button works as expected. However if you need to change the route to a very diffrernt route you can use any of these solutions:
import Router from 'next/router';
...
Router .push('/about');
Or
import Link from 'next/link';
...
<Link href="/about"><a>about</a></Link>
and if you need to do some extra work before routing then you should use:
Router.beforePopState(({ url, as, options }) => {...}
Migration would take some time and you need to remember next.js will take over the charge for routing and browser history automatically. Unless you customise it.
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've installed a Meteor phone authentication package mys:accounts-phone, which should add a phone.number subfield into users collection. I try to access this field as follows:
Meteor.user().phone.number
but typescript shows error
Property 'phone' does not exist on type 'User'.
On the other hand, I have custom props in users.profile, and can easily access them in this way.
Insecure is not yet removed. Autopublish is ON.
this happens sometime when our angular component is initialized but our meteor data is not reached from server.
try to use user injection in place of Meteor.user()
import {Component} from "#angular/core";
import { InjectUser } from 'angular2-meteor-accounts-ui';//<--**** import this****
#Component({
selector: "login-buttons",
template
})
#InjectUser('user') //<--*** add this***
export class LoginButtonsComponent {
user: Meteor.User; //<--*** add this ***
constructor(private router: Router) {}
}
now in user variable you will have all values of Meteor.User
if you want to print in html part use this
<div *ngIf="user">
{{user.phone.number}}
</div>
don't forget to install
meteor add accounts-password
meteor npm install --save angular2-meteor-accounts-ui
and in app.module.ts file
import { AccountsModule } from 'angular2-meteor-accounts-ui';
#NgModule({
imports: [
... other modules here
AccountsModule
],
hope this will work. if this not work let me know i will tell you one other solution
Got probable answer from Meteor docs.
It explains why username property appears. By default, Meteor publish only a number of fields considered to be public. To exposure any additional fields they must be published explicitly.
Not yet have time to test, but think it should work.
The other reason, with the same sympthoms, when publication code do not executed at server side. Try to put
Meteor.startup(() => {
// code to run on server at startup
Meteor.publish('userData', function() {
if(!this.userId) return null;
return Meteor.users.find(this.userId
//, {fields: {lastname: 1,}}
);
});
});
in a file within /server folder of your application.
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?