I'm making a netflix clone app in nodejs and got stuck on generateMedia function.
On TabContentOne.js file, On import { generateMedia } from 'react-media-query' it is dotted and when I run npm install #types/react-media-query it gives me errors. I did npm i react-media-query.
import React from 'react';
import styled from 'styled-components';
import { Button } from './Button';
import { generateMedia } from 'react-media-query'
// Media Query
const customMedia = generateMedia({
smDesktop: '1440px',
tablet: '960px'
})
This is the link from my bitbucket https://bitbucket.org/danclaudiu95/nodejs-reactjs.git
I'm expecting to use generateMedia function the put style on some elements in my application but the npm server doesn't start anymore.
I recommend using another package that does the same thing, "react-media-query" is outdated and removed from github.
Related
I have a naive question regarding importing npm modules on Node.js server.
I have installed 'ml-random-forest' module via npm and have been trying to import the package.
I can import it via import { RandomForestClassifier as RFClassifier } from 'ml-random-forest'; but I cannot import like var RFClassifier = require('ml-random-forest');
How can I import that package using 'require' ?
It seems that when you call :
import {existingVariableFromTheLib as
yourOwnNameForIt} from 'that_library'
You're actually importing an element of this library.
But when you're calling :
const anAlias = require('this_lib')
You're putting inside of the constant "anAlias" the totality of the library.
What you could try is then to call :
anAlias.existingVariableFromTheLib
Or, another way of dealing with this is to import using this way :
const {existingVariableFromTheLib}
=require('lib')
//or :
const anAlias =
require('lib').existingVar
//maybe
const anAlias =
require('lib').existingFunction()
I'm converting my Angular app REST backend to GraphQL. I'm trying to import gql from graphql-tag. I'm searching and searching and my import looks like everyone elses...
import { Angular2Apollo } from 'angular2-apollo';
import { ApolloClient } from 'apollo-client';
import { gql } from 'graphql-tag';
But the gql has the red underline indicating not found. When i run ng serve I get this error in cmder...
... /node_modules/graphql-tag/index"' has no exported member 'gql'.)
I have run many, many apollo and angular npm installs, including npm install --save graphql-tag, trying install whatever I'm missing, doesn't seem to matter what I install.
What am I doing wrong?
Use the default export instead:
import gql from 'graphql-tag';
I see it. What is happening here is your code is trying to destructure gql off of the object that is exported out of graphql-tag, but the error is telling you there is no exported member of this name, meaning the exported object doesn't have a method of that name, or there are more than one object exported.
If you were to look in the code for graphql-tag, you would see it probably has a few export objects or it only has one that doesnt have a method called gql, so what you need to do is take gql directly, ie: without destructuring it, ie: without the { }.
This will be correct: import gql from 'graphql-tag'
You can see this all the time depending how you export and import things from modules.
Commit to memory that every time you see { something }, it is pulling something off an object.
Here is some sample code to illustrate:
const object = {
test: { name = 'Locohost' }
}
const { name } = object.test
console.log(name)
I have encountered a problem when use some npm package in Meteor (version 1.5.1), any help on it will be much appreciated.
My Environment:
meteor: 1.5.1
buffermaker: 1.2.0
What I Did:
Create a sample Meteor app.
meteor create test
Install buffermaker
meteor npm install --save buffermaker
Import buffermaker in Meteor app by editing test/client/main.js, add line:
import { BufferMaker } from 'buffermaker';
Full content of test/client/main.js:
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { BufferMaker } from 'buffermaker';
import './main.html';
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});
Run the Meteor app
meteor npm install
meteor
I got this error in the console of browser (Chrome).
modules-runtime.js?hash=8587d18…:231 Uncaught Error: Cannot find module './lib/BufferMaker'
at makeMissingError (modules-runtime.js?hash=8587d18…:231)
at require (modules-runtime.js?hash=8587d18…:241)
at index.js (modules.js?hash=e9fc8db…:1016)
at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
at require (modules-runtime.js?hash=8587d18…:238)
at main.js (main.js:1)
at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
at require (modules-runtime.js?hash=8587d18…:238)
at app.js?hash=3f48780…:101
Did you try:
import BufferMaker from 'buffermaker';
Some if not most modules do a default export meaning that you don't need the curley braces in your import statement
Turns out buffermaker re-exports it’s main module in a strange way, so first step is to bypass it by importing BufferMaker directly:
import BufferMaker from 'buffermaker/lib/BufferMaker';
Then you’ll find when you call .make(), it will complain about Buffer not existing. To get Buffer on the client, first install meteor-node-stubs
$ meteor npm install --save meteor-node-stubs
Then load the buffer module and stick it on the window so BufferMaker can access it
import { Buffer } from 'buffer';
window.Buffer = Buffer;
/* OR do it with require */
window.Buffer = require('buffer').Buffer;
I am trying to use Forge (https://github.com/digitalbazaar/forge) in my Angular 2 project.
I ran the following command :npm install node-forge
This command created the node-forge directory in my application (in the node-modules directory).
I added the node-forge reference in my package.json file: "node-forge": "0.6.39" (dependencies section).
Now, i want to import the node-forge dependency in my angular 2 service (typescript file) with the following code:
import { Injectable } from '#angular/core';
import { Forge } from 'node-forge';
#Injectable()
export class HashPasswordService {
constructor() {}
buildHash(input: string) {
var hmac = forge.hmac.create();
hmac.start('sha512', input);
hmac.update(input);
return hmac.digest().toHex();
}
}
but the import does not work : import { Forge } from 'node-forge'; and i have the following errors in the console (ng serve command):
hash-password.service.ts (2, 23): Cannot find module 'node-forge'.
hash-password.service.ts (11, 16): Cannot find name 'forge'.
So, someone know how i can import this node-forge dependency (use a npm package)? Do I miss a step in my process ?
Thanks for your help !
Just import * as forge from 'node-forge', that's it.
You need the typescript definitions as well as the npm package..
I'm not sure if this package has a DefinitelyTyped package so you can try
npm install typings -g
typings install node-forge
If this doesn't work try:
import { Injectable } from '#angular/core';
declare var Forge: any;
#Injectable()
export class HashPasswordService {
private forge: any;
constructor() {
this.forge = new Forge();
}
buildHash(input: string) {
var hmac = forge.hmac.create();
hmac.start('sha512', input);
hmac.update(input);
return hmac.digest().toHex();
}
}
Install these two packages
npm install node-forge
npm install #types/node-forge
and import * as forge from 'node-forge', that's all...You are good to go.
This is because 'node-forge' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export.
The following works for me:
import pkg from 'node-forge';
const {pkcs5, cipher, util} = pkg;
I am trying to create a node module for all the reusable react components that i have. I am stuck while importing a jsx file.
I have a basic jsx module i.e greeting.jsx in components folder.
//greeting.jsx
import React from 'react';
export default class Greeting extends React.Component {
render() {
return (
<p>Hello World</p>
)
}
}
Folder structure :-
- index.js
- components
¦-- Greeting
¦-- greeting.jsx
¦-- <Other Modules like Greeting>
index.js which imports all the components and exports them
//index.js
import Greeting from './components/Greeting/greeting.jsx';
export default {
Greeting
};
When i have to use greeting module i have to import the module. Like the way in below code. But doing this gives me error on the page
import React from 'react';
import ReactDOM from 'react-dom';
import GreetingModule from './index.js';
ReactDOM.render( <GreetingModule />, document.getElementById('content') );
Errors:-
warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
invariant.js:39 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
This is where i am stuck now. Although if i import jsx file directly (like below) then it works.
import React from 'react';
import ReactDOM from 'react-dom';
import GreetingModule from './components/Greeting/greeting.jsx';
ReactDOM.render( <GreetingModule />, document.getElementById('content') );
But this is not the way i want to do as i am trying to create a npm module and my index.js should export all the react components.
I have tried googling for creating a npm module for react componets but couldn't find any thing. Please Help, in resolving the issue
The problem is that you are running a babel transform on module in isolation.
I bet that your index.js after transform looks something like:
var Greeting = require('./components/Greeting/greeting.jsx');
exports.default = {
Greeting
};
And here lies the problem. Your module is exporting all its meat under the default property. So a person using your module needs to use it as follows:
var Greeting = require('greeting').default;
You may either live with this, or use the old way of exporting modules in your index.js. So, you'd change only your index.js to this:
//index.js
import Greeting from './components/Greeting/greeting.jsx';
module.exports = {
Greeting
};
That should do the trick.