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)
Related
I am trying to use koa-tree-router and koa-bodyparser at the same time, but I keep getting TypeScript errors:
export const userLoggingRouter = new KoaTreeRouter<any, DefaultContext>();
userLoggingRouter.post('/logs/action', (ctx) => {
const logEntries = ctx.request.body;
const user = ctx.state.user;
// ...
});
error TS2339: Property 'body' does not exist on type 'Request'.
I have #types/koa-bodyparser installed, and it contains the following definition:
import * as Koa from 'koa';
declare module 'koa' {
interface Request {
body: string | Record<string, unknown>;
rawBody: string;
}
}
But it doesn't seem to do anything. I found this question, but importing koa-bodyparser directly also does not do anything. How do I get TypeScript to recognize the extended Request type?
Edit: Creating a .d.ts file inside my project containing the following:
import {Request} from "koa";
declare module "koa" {
interface Request {
body: any;
}
}
Made the compile error go away, but this seems like an inelegant solution because I would have to copy over type information for every package that modifies koa.Request.
This was happening because I was using Yarn PnP and I had two different versions of #types/koa installed. Once I added a resolutions field to my package.json that forced all of the other TypeScript definitions to use the same version of #types/koa, everything worked.
I'm trying to use cy.taks() to load certain datasets to mongo before a test is run. But I'm getting errors. I've got a module where I export 2 functions, one from dropping a collection, and the other to load an object to a collection. Here is my cypress/plugins/index.js:
module.exports = (on, config) => {
on("task", {
"defaults:db": () => {
const {dropCollection, createUser } = require("../../lib/connectDB");
dropCollection("users");
createUser(userData)
},
});
};
Here is my /lib/connecDB.js:
export function dropCollection(collection) {
return mongoose.connection.dropCollection(collection);
}
export async function createUserInDB(userData) {
await User.create(userData);
}
So when I run the test, I'm getting:
cy.task('defaults:db') failed with the following error:
Unexpected token 'export'
Tried as well importing these function outside the index.js export, but getting same result.
I'd say it is something about export/import. The functions are exported as ES6, and imported as ES5.
I've tried to import the function the ES6 like:
import { dropCollection, createUser } from '../lib/connectDB'
And then export the plugin function also as ES6, but then I get:
Error: The plugins file is missing or invalid.
Your `pluginsFile` is set to `C:\Users\someRoute\cypress\plugins\index.js`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js`, `.ts`, or `.coffee` file.
I've also tried to import required modules outside the function like:
const globalDbUtils = require('../lib/connectDB')
And then use the functions as
globalDbUtils.dropCollection("collectionName")
globalDbUtils.createUser(userData)
But I'm getting last error. I've tried pretty much everything, I tried to import Mongoose models straight, mongo client etc...Also I tried to import just one function and return it (just copy/pasting official doc...) but cannot make it work. I researched for a couple of days getting nothing, I found there is a npm package that helps u doing this, but since cypress allows you to do this by using no more plugins, I'd like to do it with no more tools than cypress itself.
Anyone knows what I am doing wrong?
Thanks in advance!
You need to use require instead of import at the top of your file and when exporting at the bottom use
module.exports = { createUserInDB }
Instead of exporting as you are currently doing.
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.
I'm building a project ReactJS and TypeScript and want to use a module I will share between my web application and API server.
I've used create-react-app with ts-scripts for my web app. I've made my shared module without using a starter project because it's pretty simple.
My web application references my shared module using NPM's local packages feature, the command npm install --save <path/to/shared/package>
When I do npm run start for my react app I get the error
TypeError: __WEBPACK_IMPORTED_MODULE_3_validation_shared__.ValidEmail is not a constructor
validation_shared is my unimaginative module name.
The TypeScript causing the error is
const valid_email = new ValidEmail("john.doe#example.com");
Is there anything I can change in my configs or setup to get this working? I would love to use typescript & ts-node, and have shared modules.
Edit - adding code for ValidEmail and the other function in that file.
export function validate(email_address: string): boolean {
return email_address.indexOf("#") !== -1;
}
export class ValidEmail {
public email_address: string;
constructor(email_address: string) {
if(validate(email_address)) {
this.email_address = email_address;
} else {
throw new TypeError("Invalid value for email address param, it must contains an # symbol.");
}
}
}
After more investigation it looks like whatever webpack/bundling process create-react-app uses is bundling the import definitions with the front-end code but not adding the actual class & function definitions.
I found this out by checking the generated code that is loaded into chrome and looking for actual class name "ValidEmail" which isn't present.
Edit # 2 - console.log output
I updated my App.tsx to this
import { HeaderBar, IHeaderBarProps } from "./components/headerbar";
import * as vs from "validate-shared";
class App extends React.Component {
public render() {
console.log(vs);
And the result of console.log(vs) is:
/static/media/index.9d88054a.ts
When I look at the contents of the file I see only
export * from "./ValidEmail";
export * from "./User";
This makes sense because it's the contents of my index.ts file for that module. I can't find the "meat" of the files ValidEmail or User anywhere. It looks like the actual code for those classes isn't included anywhere.
When i try to import such as like this in server.js:
import SalaryService from '/components/utils/SalaryService';
and then want to use it like this:
const salaryService = new SalaryService();
res.send(salaryService.getSalaries('test'));
However I get the following error message when I try start my dev server:
C:\projects\project\server.js:10
import SalaryService from '/components/utils/SalaryService';
^^^^^^
SyntaxError: Unexpected token import
How could I achieve this?
Nodejs doesn't support ES6 modules syntax
If you want to use ES6 modules syntax you can use babel to run your code
Depends on what module.exports in '/components/utils/SalaryService' is assigned. If it's an object with many functions (or nested objects), meaning the file SalaryService.js exports an object containing a property called 'SalaryService' you can use destructuring like so:
const { SalaryService } = require('/components/utils/SalaryService');
This is nice because you can pick a few properties from a large object cleanly:
const { SalaryService, SomeOtherProp } = require('/components/utils/SalaryService');
Otherwise if the module.exports is assigned the function or object you want directly:
const SalaryService = require('/components/utils/SalaryService');