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
Related
I'm trying to set up a simple web app with React/TypeScript so I can fiddle with some graphs with Sigma.js. But I can't get the end result to render anything with Sigma.
Here's the steps I followed:
$ npx create-react-app sigmafiddle --template typescript^C
$ cd sigmafiddle
$ yarn add sigma
$ yarn add #types/sigmajs
However, when I go to import Sigma I encounter the following problems:
import { sigma } from 'sigma'
Fails with this error message:
TypeScript error in ~/devel/sigmafiddle/src/App.tsx(4,23):
Could not find a declaration file for module 'sigma'. '~/devel/sigmafiddle/node_modules/sigma/endpoint.js' implicitly has an 'any' type.
Try npm install #types/sigma if it exists or add a new declaration (.d.ts) file containing declare module 'sigma'; TS7016
Not a real helpful message, since #types/sigma does not exist within npm.
And if I try this:
import { sigma } from 'sigmajs'
I get this failure:
TypeScript error in ~/devel/sigmafiddle/src/App.tsx(4,23):
File '~/devel/sigmafiddle/node_modules/#types/sigmajs/index.d.ts' is not a module. TS2306
I've also tried the package react-sigma:
yarn add react-sigma
// in app.tsx
import {Sigma, RandomizeNodePositions, RelativeSize} from 'react-sigma';
Unfortunately there is no #types/react-sigma package, so this results in the following error:
Cannot find module 'react-sigma'
How can I get sigma.js to work with TypeScript and React?
You didn't import what you are trying to use
replace
/// <reference types="#types/sigmajs" />
to
import { sigma } from 'sigma';
Usually, import as above is the common way to use lib in js/ts project.
Update
Since the error seems to be lacking type definition of the lib,
File '~/devel/graph-grammar/node_modules/#types/sigmajs/index.d.ts' is not a module.
npm install --save #types/sigmajs
And import as normal may work.
import { sigma } from 'sigma';
Refer to #types/sigmajs
Update No.2
You may need react-sigma npm, repo in your react project instead.
Install it, and import refer to the document seems fine.
import {Sigma, RandomizeNodePositions, RelativeSize} from 'react-sigma';
If that not work, try to install both sigma and react-sigma, since ploty.js need both ploty.js and react-ploty.js been installed, I guess you may meet the similar situation.
Update No.3
Seems react-sigma don't support typescript, they support flow-type instead.
Refer: document of react-sigma
I'm trying to use React-Leaflet-Draw to add polygons to a mapping project I'm working on. Coming unstuck on the use of EditControls.
I imported Edit control as per the example
import { EditControl } from '../src';
With an index.js file in src folder with:
export EditControl from './EditControl';
I added some code to do some different things to the example but it still ran fine (in the example version).
When I tried to run this on another project, using the same code I get the error:
Syntax error: Unexpected token, expected {
From the index.js file, using the same export command. Has anyone else encountered this problem? Any thoughts on why it might be happening?
Thanks
You need to install 'leaflet-draw'
npm install 'leaflet-draw'
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
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