I'm receiving the next error when trying to run my application, the package.json use node v12.x and my version installed is v16.17.0
./node_modules/#reactour/tour/dist/tour.esm.js
Attempted import error: 'Portal' is not exported from '#reactour/utils'
I tried to update the #reactour/utils to v3.1.6 but there are many breaking changes that I cannot deal with them right now, so I need to make it works with version
"#reactour/tour": "^2.13.0"
Any suggestions or workarounds?
it is a default export, import it like this :
import Portal from '#reactour/utils'
Related
I have the following error:
plugin:vite:import-analysis] Failed to resolve import "part:#sanity/base/schema-creator" from "schemas/schema.js". Does the file exist?
It looks like sanity/base dependency is non existent but every time I go to install it the version is not compatible with React 18.2. Is React 18.2 really not compatible or is there something else probably wrong?
Also it may be worth noting that I got the above error after solving this error: "Failed to resolve import "./schemas" from "sanity.config.js"." What I did was change my import in the sanity.config.js to import {schemaTypes} from './schemas/schema'.
I tried npm ls #sanity/base to see if it was there. I also tried npm install #sanity/base and it looked like the versions between React 18.2 and Sanity were incompatible.
I would rather not go to later version of React and ReactDom so I was seeing if there was possibly something else going on.
It turns out I was using version 2 code for version 3 sanity. I migrated everything to the version 3 format. here is the link to the migration setup:https://www.sanity.io/docs/migrating-from-v2.
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);
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.
In my create react app project I'm running into the following error in my production build (not in my dev build):
Uncaught TypeError: (0 , o.default) is not a function
at Object.e.f.(:4444/anonymous function)...
I've been investigating this bug for a couple of hours but struggle to find out how to debug this uglified piece of js.
What makes it tough is that the error returns o.default and not SomeLibrary.default so I don't really know where to start my search really...
What does that o.default mean in this case? Any tips for figuring out what's going wrong here?
It seems to be import statement somewhere in your file is incorrect.
Example: (from an issue)
// fails
import combineReducers from "redux"
// correct
import { combineReducers } from "redux"
What makes it tough is that the error returns o.default and not SomeLibrary.default so I don't really know where to start my search really...
There's nothing but exported in some library just as o. Example default export:
export default {
o: something
}
For those who tried the solution above and still cannot solve this problem, you might be importing the library successfully and then using the library in a function that is located in the same file.
But, if you export that file and import it to another file, that is where you might be having a problem.
Simply import your already exported file as -
import {myComponent} from "/util/http"
instead of -
import myComponent from "/util/http"
Hope that helps.
If this is happening for anyone with Auth.signIn using aws-amplify, please try the below update for aws-amplify. This worked as a permanent fix and didn't break any of my current code.
sudo npx npm-check-updates -i '/#?aws-amplify/' && npm update --force
Just in case it helps someone, in my case I was using React component inside a JS file which caused this error.
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';