I am trying to add Login functionality to a React app I'm building using Amplify and AWS Cognito, but when I add the following line in my Login.js file:
Import {Auth} from "aws-amplify-react";
and try to compile, I get the following error:
Failed to compile.
./node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js
Module not found: Can't resolve '#aws-amplify/analytics' in 'my_react_path/node_modules/aws-amplify-react/lib-esm/Analytics'
I tried installing Amplify with homebrew and npm, but I can't get around this, any tips?
EDIT:
Initially I had:
Import {Auth} from "aws-amplify";
But The compiler couldn't resolve aws-amplify, and I could only find aws-amplify-react in the node_modules folder so I changed it.
However, in "node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js" in line 39:
import Analytics from '#aws-amplify/analytics';
The problem is that it can't find aws-amplify... Did I make a mess while installing maybe?
Assuming that you are not worried about bundle size at this stage, probably your easiest course of action is to remove your node_modules entirely, then:
npm i aws-amplify
import like this:
import Amplify, { Auth } from 'aws-amplify'
You only need to install/import aws-amplify-react if you plan on using the OOTB UI components. If you are making your own UI components for login you don't need that package at this stage.
I get a similar error
Failed to compile.
./node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js
Module not found: Can't resolve '#aws-amplify/analytics' in '/Users/myuser/myproject/node_modules/aws-amplify-react/lib-esm/Analytics'
when following the Amplify tutorial.
The workaround I found is to execute:
npm i -S #aws-amplify/analytics #aws-amplify/interactions #aws-amplify/storage #aws-amplify/ui #aws-amplify/xr aws-amplify
Obviously, I would love to know how to avoid all these extra libraries.
I would revert to your previous version before attempting to add amplify (old package.json & node_modules)
Follow this walkthrough: https://docs.amplify.aws/start/getting-started/installation/q/integration/react-native
When you get to the "Add Authentication" step, skip it and go straight to "Next Steps" -> "Authentication" and follow until you get to:
import Amplify, {Auth} from 'aws-amplify';
import config from './aws-exports';
Amplify.configure(config);
Related
I would like to use the Authenticator component from Amplify UI for sign in in my React App but doing so makes my apps bundle size huge; it is currently 3Mb. I have seen the discussion on reducing bundle size for Amplify more broadly which led to this release/blog which I have followed. I am wondering if there is something similar I should be doing to import the Authenticator from Amplify UI in such a way that it does not import the entire ui-react library because it seems that is adding 1.8Mb to my app, most of which is coming from icons if I'm reading the chart right. I import the Authenticator as shown below:
import { Authenticator } from '#aws-amplify/ui-react';
import '#aws-amplify/ui-react/styles.css';
Here is my source map for the app:
package.json looks like this:
Prior to version 2.12.0 we had some treeshaking issues in the #aws-amplify/ui-react package which prevented the icons from being removed. This was fixed in version 2.12.0. See CHANGELOG. It looks like you may be using 2.10.4. Can you make sure you are on the latest version?
npm install #aws-amplify/ui-react#latest
If you don't see a reduction in bundle size after upgrading the latest version that's a bug, and we would like to get it fixed. You can either respond to this issue or even better would be to open a bug here.
The Authenticator component does not import anything from its parent directories, so you could probably just extract the code from here and install any dependencies that are missing.
I'm just starting out developing with Gatsby (or doing frontend in general) and I wanted to add a Navigation bar to my website using React Suite. However, when importing the corresponding stylesheet in my index.js:
import 'rsuite/lib/styles/index.less';
I get the following message when running gatsby develop:
ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'rsuite/lib/styles/index.less' in '/Users/.../src/pages'
If you're trying to use a package make sure that 'rsuite/lib/styles/index.less' is installed. If you're trying to use a local file make sure that the path is correct.
File: src/pages/index.js:14:0
failed Building development bundle - 7.237s
ERROR in ./src/pages/index.js 14:0-38
Module not found: Error: Can't resolve 'rsuite/lib/styles/index.less' in '/Users/.../src/pages'
# ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 31:11-33:5
# ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
webpack compiled with 1 error
I tried so many things already: installing and reinstalling rsuite, installing and reinstalling gatsby-plugin-less and less, clearing the cache, trying all kinds of configurations in gatsby-config.js, but I'm out of options really.
Meanwhile, installing react-bootstrap and importing the stylesheet similarly through
import "bootstrap/dist/css/bootstrap.min.css";
does not produce the error and the stylesheet gets applied.
Would greatly appreciate your help!
I think you should be using:
import '~rsuite/lib/styles/index.less';
Notice the ~, as it is inferred from the docs.
You can try this:
import "rsuite/src/styles/themes/default/index.less"
https://github.com/rsuite/rsuite/blob/next/examples/with-gatsby/src/pages/index.js#L4
i love working with npm and my first package is working fine. In my IDE (Webstorm) when importing my package it highlights and says "Cannot resolve symbol" (well but it works).
But when using the suggested import on missing classes it imports it also wrong.
Within my project with working import:
import {APIRequest} from "nsfw-connector";
Not working:
import APIRequest from "nsfw-connector/src/APIRequest";
I believe my problem is in my npm package and how its exported.
index.js
module.exports = {
APIRequest: require('./APIRequest').default,
...
};
The corresponding class
export class APIRequest {
...
}
export default APIRequest;
Maybe the is a samaritan who knows what my stupid fault is.
IDE error highligt
The GitHub Project: https://github.com/NilsBaumgartner1994/NSFW-Connector
I experienced similar issue. We have a npm package and when importing it like:
import {SomeComponent} from "our-package". It works but I do not get intellisense. It is because the component is exported from within /src/index.js and thus, appending /src to the end of the package path erases the warnings.
I also tried to put "main": "src/index.js" into the package.json and import components like I used to originally but to no avail.
Another fix I tried and worked (sort of) was to place that /src/index.js into the root of the project that solved warnings and intellisense started to work as well (as it is the default value for aforementioned "main" field in package.json (interestingly enough) npmjs docs
I am trying to get ReactJs compatible with IE 10 and have added the following import statements before any other import.
import '#babel/polyfill';
import 'core-js/es6/map';
import 'core-js/es6/set';
The import is done in the index file of my app, App.tsx.
However I am still getting the following error and am unable to resolve it.
SCRIPT5009: 'Set' is undefined
How can I resolve this issue?
I also run in this same issue. To solve this, you need some additional node packages in order to perform polyfills.
Please, 1st install the npm package "core-js". After that, add
import 'core-js/es/set'
import 'core-js/es/map'
If still running into issues, install this other package react-app-polyfill and add the following additional import:
import 'react-app-polyfill/ie9'
These imports must be in the root index file of your project. Hope this helps.
Im sure this is something simple but for the life of me i can't seem to find an answer to my problem.
Basically Im using react and webpack and I've installed a new package (in this case braintree-web-drop-in), however the package is always appearing as null (undefined) when i import it into my react module and just try to log it out at the top of the module (or anywhere)
package.json:
"dependencies": {
"braintree-web": "^3.32.0",
"braintree-web-drop-in": "^1.10.0",
ReactModel.tsx
import brainTree from 'braintree-web-drop-in'
console.log(brainTree);
I can also see that the package seems to have been added to my generated js file through webpack.
Any help would be appreciated!
Thanks,
James
To me it looks like this module doesn't have a default export (which the import syntax will use if no named export is asked for).
https://github.com/braintree/braintree-web-drop-in/blob/master/src/index.js#L534
So, in order to see if the module is installed, try this:
import { VERSION } from 'braintree-web-drop-in';
console.log('brain tree version: ', VERSION);
If that works you can use the create with a named import:
import { create} from 'braintree-web-drop-in';