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
Related
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 have a create-react-app project, and I am working on reducing my bundled JS file size. About half of my bundle size is coming from a dependency called MDBReact (a react component library), and majority of it is not being used. I am trying to find out how/if I can remove dead code with tree shaking from the bundled build. I have been looking into this for a while and the closest article I found was this. This article leaves me confused and it does not give any explanation into how or if it can be done. I also found this guide on webpack tree shaking explaining how it can be done, but this does not seem to solve the problem.
CRA is using webpack to bundle code. Webpack can only treeshake es modules by default and commonjs modules when using plugins.
To help you on the way, how are you currently importing from MDBReact?
It looks like MDBReact is not written in es modules and webpack is therefore going to have a hard time tree shaking if you use the following import statement:
import { module } from 'MDBReact';
Instead you could try to import using the following
import modules from 'MDBReact/module';
You might have to change the path to the module depending on how MDBReact is structured. Take a look in the node_modules folder to find out.
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';
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
I'm trying to use Webpack in my React project using VS Code and running into an issue because webpack is now requiring the file extensions for my components.
For example, webpack tells me that it's unable to resolve the following component:
import MyComponent from '../components/Component123';
If I change it to the following by adding the file extension, it works fine:
import MyComponent from '../components/Component123.jsx';
I've never had this before and it's not even the conventional norm. What's causing this and how do I fix it?
BTW, my webpack version is 2.6.1.