Graphiql: Build throws warnings originating in `graphql-language-service-interface`

[wdolek]

I have React app which depends on graphiql which we render on certain route (graphiql is not deployed as standalone app).

When executing:

npm run build

Several warnings are returned. Since our CI/CD treats warnings as errors, this is preventing us from building on CI/CD (unless we turn this off)

./node_modules/graphql-language-service-interface/dist/getOutline.d.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type.
| import { Outline } from 'graphql-language-service-types';
> export declare function getOutline(queryText: string): Outline | null | undefined;
| //# sourceMappingURL=getOutline.d.ts.map

./node_modules/graphql-language-service-interface/dist/getDefinition.d.ts 3:7
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type.
| import { FragmentSpreadNode, FragmentDefinitionNode, OperationDefinitionNode, NamedTypeNode } from 'graphql';
| import { DefinitionQueryResult, FragmentInfo, Uri, ObjectTypeInfo } from 'graphql-language-service-types';
> export declare const LANGUAGE = "GraphQL";
| export declare function getDefinitionQueryResultForNamedType(text: string, node: NamedTypeNode, dependencies: Array<ObjectTypeInfo>): Promise<DefinitionQueryResult>;
| export declare function getDefinitionQueryResultForFragmentSpread(text: string, fragment: FragmentSpreadNode, dependencies: Array<FragmentInfo>): Promise<DefinitionQueryResult>;

./node_modules/graphql-language-service-interface/dist/autocompleteUtils.d.ts 3:7
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type.
| import { GraphQLField, GraphQLSchema, GraphQLType } from 'graphql';
| import { CompletionItem, ContextToken, State, AllTypeInfo } from 'graphql-language-service-types';
> export declare function getDefinitionState(tokenState: State): State | null | undefined;
| export declare function getFieldDef(schema: GraphQLSchema, type: GraphQLType, fieldName: string): GraphQLField<any, any> | null | undefined;
| export declare function forEachState(stack: State, fn: (state: State) => AllTypeInfo | null | void): void;

./node_modules/graphql-language-service-interface/dist/getAutocompleteSuggestions.d.ts 3:7
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type.
| import { GraphQLSchema } from 'graphql';
| import { CompletionItem, ContextToken, State, AllTypeInfo, Position } from 'graphql-language-service-types';
> export declare function getAutocompleteSuggestions(schema: GraphQLSchema, queryText: string, cursor: Position, contextToken?: ContextToken): Array<CompletionItem>;
| export declare function getTokenAtPosition(queryText: string, cursor: Position): ContextToken;
| export declare function getTypeInfo(schema: GraphQLSchema, tokenState: State): AllTypeInfo;

./node_modules/graphql-language-service-interface/dist/GraphQLLanguageService.d.ts 4:7
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import { CompletionItem, DefinitionQueryResult, Diagnostic, GraphQLCache, GraphQLConfig, GraphQLProjectConfig, Uri, Position } from 'graphql-language-service-types';
| import { Hover } from 'vscode-languageserver-types';
> export declare class GraphQLLanguageService {
|     _graphQLCache: GraphQLCache;
|     _graphQLConfig: GraphQLConfig;

./node_modules/graphql-language-service-interface/dist/getHoverInformation.d.ts 4:7
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import { ContextToken, Position } from 'graphql-language-service-types';
| import { Hover } from 'vscode-languageserver-types';
> export declare function getHoverInformation(schema: GraphQLSchema, queryText: string, cursor: Position, contextToken?: ContextToken): Hover['contents'];
| //# sourceMappingURL=getHoverInformation.d.ts.map

./node_modules/graphql-language-service-interface/dist/getDiagnostics.d.ts 4:7
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import { Diagnostic, CustomValidationRule } from 'graphql-language-service-types';
| import { Range } from 'graphql-language-service-utils';
> export declare const SEVERITY: {
|     ERROR: number;
|     WARNING: number;

Toolset versions:

• node: v10.16.3
• npm: 6.9.0
• tcs: 3.7.2

I'm not sure whether this is the same issue as #882, I saw webpack being used by react build script, but errors are different.

[acao]

Yes, webpack shouldn’t be a problem. Is there a reason you are importing
.d.ts files?

On Wed, Nov 13, 2019 at 6:02 AM Zdenek Havlin [e-mail]
wrote:

I have React app which depends on graphiql which we render on certain
route (graphiql is not deployed as standalone app).

When executing:

npm run build

Several warnings are returned. Since our CI/CD treats warnings as errors,
this is preventing us from building on CI/CD (unless we turn this off)

./node_modules/graphql-language-service-interface/dist/getOutline.d.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type.
| import { Outline } from 'graphql-language-service-types';

export declare function getOutline(queryText: string): Outline | null | undefined;
| //# sourceMappingURL=getOutline.d.ts.map

./node_modules/graphql-language-service-interface/dist/getDefinition.d.ts 3:7
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type.
| import { FragmentSpreadNode, FragmentDefinitionNode, OperationDefinitionNode, NamedTypeNode } from 'graphql';
| import { DefinitionQueryResult, FragmentInfo, Uri, ObjectTypeInfo } from 'graphql-language-service-types';

export declare const LANGUAGE = "GraphQL";
| export declare function getDefinitionQueryResultForNamedType(text: string, node: NamedTypeNode, dependencies: Array): Promise;
| export declare function getDefinitionQueryResultForFragmentSpread(text: string, fragment: FragmentSpreadNode, dependencies: Array): Promise;

./node_modules/graphql-language-service-interface/dist/autocompleteUtils.d.ts 3:7
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type.
| import { GraphQLField, GraphQLSchema, GraphQLType } from 'graphql';
| import { CompletionItem, ContextToken, State, AllTypeInfo } from 'graphql-language-service-types';

export declare function getDefinitionState(tokenState: State): State | null | undefined;
| export declare function getFieldDef(schema: GraphQLSchema, type: GraphQLType, fieldName: string): GraphQLField | null | undefined;
| export declare function forEachState(stack: State, fn: (state: State) => AllTypeInfo | null | void): void;

./node_modules/graphql-language-service-interface/dist/getAutocompleteSuggestions.d.ts 3:7
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type.
| import { GraphQLSchema } from 'graphql';
| import { CompletionItem, ContextToken, State, AllTypeInfo, Position } from 'graphql-language-service-types';

export declare function getAutocompleteSuggestions(schema: GraphQLSchema, queryText: string, cursor: Position, contextToken?: ContextToken): Array;
| export declare function getTokenAtPosition(queryText: string, cursor: Position): ContextToken;
| export declare function getTypeInfo(schema: GraphQLSchema, tokenState: State): AllTypeInfo;

./node_modules/graphql-language-service-interface/dist/GraphQLLanguageService.d.ts 4:7
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import { CompletionItem, DefinitionQueryResult, Diagnostic, GraphQLCache, GraphQLConfig, GraphQLProjectConfig, Uri, Position } from 'graphql-language-service-types';
| import { Hover } from 'vscode-languageserver-types';

export declare class GraphQLLanguageService {
| _graphQLCache: GraphQLCache;
| _graphQLConfig: GraphQLConfig;

./node_modules/graphql-language-service-interface/dist/getHoverInformation.d.ts 4:7
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import { ContextToken, Position } from 'graphql-language-service-types';
| import { Hover } from 'vscode-languageserver-types';

export declare function getHoverInformation(schema: GraphQLSchema, queryText: string, cursor: Position, contextToken?: ContextToken): Hover['contents'];
| //# sourceMappingURL=getHoverInformation.d.ts.map

./node_modules/graphql-language-service-interface/dist/getDiagnostics.d.ts 4:7
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import { Diagnostic, CustomValidationRule } from 'graphql-language-service-types';
| import { Range } from 'graphql-language-service-utils';

export declare const SEVERITY: {
| ERROR: number;
| WARNING: number;

Toolset versions:

• node: v10.16.3
• npm: 6.9.0
• tcs: 3.7.2

I'm not sure whether this is the same issue as #882
https://github.com/graphql/graphiql/issues/882, I saw webpack being
used by react build script, but errors are different.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/graphql/graphiql/issues/996?email_source=notifications&email_token=AAKOFF63NKN2NXDI6SYI4WTQTPNFHA5CNFSM4JMZDJZ2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HY7CKUA,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAKOFF7Y6BMNUI75HJVE7R3QTPNFHANCNFSM4JMZDJZQ
.

[wdolek]

@acao I don't import anything myself, this seems to be done somewhere within react build scripts.

I did only:

• npm install graphiql (this brought dependency on graphql-language-service-interface)
• import GraphiQL from 'graphiql'
• import ...css
• <GraphiQL .../>

nothing more.

[acao]

We have a webpack example we will be merging in the next week, until we
make this fix it wont work with create react app without overriding the
webpack config. but it should work fine with CRA once we merge that dynamic
file resolution bugfix for webpack. Been talking with a webpack maintainer
about it, very tricky!

On Wed, Nov 13, 2019 at 1:07 PM Zdenek Havlin [e-mail]
wrote:

@acao https://github.com/acao I don't import anything myself, this
seems to be done somewhere within react build scripts.

I did only:

• npm install graphiql (this brought dependency on
  graphql-language-service-interface)
• `import GraphiQL from 'graphiql'
• import ...css

nothing more.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/graphql/graphiql/issues/996?email_source=notifications&email_token=AAKOFF5JUMMK5Y6IXS4SPLDQTQ65VA5CNFSM4JMZDJZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED7DE7Y#issuecomment-553529983,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAKOFF4LRGLRF3HZRADOYWDQTQ65VANCNFSM4JMZDJZQ
.

[robbertkl]

I'm using GraphiQL in the exact same way as @wdolek and was experiencing the same warnings.

I've just updated to GraphiQL 0.17.0 and can confirm the warnings are gone!

[wdolek]

Fixed!

+-- [email protected]
| +-- [email protected]
| +-- [email protected]   <-- got updated
| | +-- [email protected]   <-- got updated
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]   <-- got updated
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]