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';
Related
Im trying to store my nft metadata to ipfs using nft.storage (Reactjs)
When I import the library as explained in their docs I get this error
enter image description here
I read a similar error online for web3storage library and that it is probably a webpack version issue, but there is no solution. Any ideas?
This is how I am importing it:
import { NFTStorage, File } from 'nft.storage'
Exactly as shown in the docs.
Since there's insufficient info on how to deal with this out of the box, this is how I resolved it. It worked fine.
Go to node_modules/nft.storage directory.
Make sure you have ipfs-car/dist/esm/blockstore and ipfs-car/dist/esm/pack. If not, install ipfs-car with npm i ipfs-car. Copy ipfs-car/dist/esm to nft.storage/src.
Inside nft.storage/src, update the ipfs-car import statements in the following files like so:
Inside platform.web.js, update to this: import { MemoryBlockStore } from 'ipfs-car/dist/esm/blockstore/memory'
Inside lib.js, update to this: import { pack } from 'ipfs-car/dist/esm/pack'
Inside token.js, update to this: import { pack } from 'ipfs-car/dist/esm/pack'
This solved my problem.
Crude but works.
importing pack from built version should also work but crude as well...the package doesn't work at all without doing these, they should update it...I will send a pull request later on.
import { Web3Storage } from 'web3.storage/dist/bundle.esm.min.js'
I just upgraded Create React App to 5.0.0 (which upgrades to webpack 5) and it's working fine. Some relevant tips here.
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'm brand new to React and trying to figure out how to use Ract-Recaptcha library (https://github.com/appleboy/react-recaptcha) without NPM.
here is the source code for the Recaptcha wrapper : index.js
Looks like the library imports import PropTypes from 'prop-types';
and in my env NPM is disabled, so I'm wrecking my head ( with very limited React knowledge) trying to understand how to do without PropTypes.
Very much appreciate any help !!
Clone the package into a lib directory or private_modules and import it manually and let Webpack (or whatever module bundler you use) resolve the dependency like code you've written.
In your package.json you can do something like:
{
"name": "MyApp",
"dependencies": {
"myLocalModule": "file:./lib/myLocalModule/dist/index.js"
}
}
Remember, this is our virtual world. There is always a way or at worst a hack! Cheers
https://docs.npmjs.com/files/package.json#local-paths
For example, to import the test utils:
import ReactTestUtils from 'react-addons-test-utils'
It works, but there is no such module as 'react-addons-test-utils' under node_modules.
And a cursory look at React source code under node_modules reveals that 'react-addons-test-utils' does not exist. In the module root directory there are only react.js and addons.js.
How does this work? What am I missing with my understanding of NPM?
It shouldn't work. Sounds like you may have installed the dependency somewhere globally. I am certain it shouldn't work without the actually package.
BTW, react source code does not actually use react-addons-test-utils:
https://github.com/facebook/react/search?utf8=%E2%9C%93&q=react-addons-test-utils
I have a reactjs app written using ES6 standards, and I use webpack to build it. The webpack loads the js modules using babel-loader. To be specific, I use the following versions of packages:
├── babel#5.8.34
├── babel-core#5.8.34
├── babel-loader#5.4.0
└── webpack#1.12.6
However, after building it, the IE 10 gives the following error 'Symbol' is undefined. Shouldn't the babel be supposed to define the Symbol? Is there any specific configuration for webpack or babel I need to set in order to make it work? I use {stage: 0} configuration in my .babelrc.
Any help would be appreciated,
Thank you !
You can require polyfill in the entry point to your code so it will get bundled up with the rest of JavaScript.
One option is to use:
require('babel-polyfill');
Or:
import 'babel-polyfill';
All of that is explained in the documentation.
Ok, I eventually found out that babel alone does no polyfill. Including script <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script> solved this issue for me.
This solution will work for sure, it worked for me when I encountered the error: 'Symbol' is undefined in IE . It worked earlier in Chrome and Firefox but IE was throwing this error.It took me few hours to find this solution.
I am using the latest React at this time react "react": "^16.5.0" on windows machine.
1. Install babel-polyfill
npm install --save-dev babel-polyfill
In package.json, it should have the following entries
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-polyfill": "^6.26.0",
"babel-preset-react": "^6.24.1"
}
2. In index.js, add
import babelPolyfill from 'babel-polyfill';
Problem should get solved
OK, I had the same issue, but in my case that was quite different, so basically you need to include script in the index file as below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
But in my case, I already included that, after some investigations I found out that my proxy blocked the script...
So make sure you include it in index.html and also make sure that you have access to the script from where you need it to avoid the error happening...best way just copy and paste the url in the browser...
But now which we get to this point, it's not talking about Symbol itself, what's Symbol which can not be recognised in IE?
The Symbol() function returns a value of type symbol, has static
properties that expose several members of built-in objects, has static
methods that expose the global symbol registry, and resembles a
built-in object class but is incomplete as a constructor because it
does not support the syntax "new Symbol()".
Every symbol value returned from Symbol() is unique. A symbol value
may be used as an identifier for object properties; this is the data
type's only purpose. Some further explanation about purpose and usage
can be found in the glossary entry for Symbol.
The data type symbol is a primitive data type.
in documentation about Runtime
// in bash
npm install babel-transform-runtime --save-dev
// in gulpfile
.pipe(babel({
plugins: ['transform-runtime']
}))
edit:
better yet on heroku in prod mode use --save instead of --save-dev
If you are getting this error in an Angular app, you need to un-comment the following lines in polyfills.ts -
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';