Warning: You may need an appropriate loader to handle this file type.

[swyxio]

hi folks! I am getting 6 big scary yellow warnings all of this nature when trying to use the graphiql React component.. how do i silence this please?

WARNING in ./~/graphql-language-service-interface/dist/getOutline.js.flow
Module parse failed: ROUTE_TO_ABOVEMENTIONED_FILE Unexpected token (11:12)
You may need an appropriate loader to handle this file type.
|  */
|
| import type {
|   Outline,
|   TextToken,
 @ ./~/graphql-language-service-interface/dist ^.*$
 @ ./~/graphql-language-service-interface/dist/GraphQLLanguageService.js
 @ ./~/graphql-language-service-interface/dist/index.js
 @ ./~/codemirror-graphql/hint.js
 @ ./~/graphiql/dist/components/QueryEditor.js
 @ ./~/graphiql/dist/components/GraphiQL.js
 @ ./~/graphiql/dist/index.js
 @ ./client/components/graphql.js
 @ ./client/components/user-home.js
 @ ./client/components/index.js
 @ ./client/routes.js
 @ ./client/index.js

[aperkaz]

Hello @sw-yx ,
Any news on this? I am getting the same warning...

[levindixon]

As a temporary solution I ended up installing ignore-loader and adding the following to my webpack config:

{ test: /\.flow$/, loader: 'ignore-loader' }

[swyxio]

no news, sorry. i just kept going because i had some time pressure. thanks very much for the tip @levindixon

[darimpulso]

@levindixon, @aperkaz ... i don't know if you have still this issue, but you can install and include graphql-tag and use the loader in webpack

{ "test": /\.graphql$|\.flow$/, "exclude": /node_modules/, "use": [ { "loader": 'graphql-tag/loader' } ] }

[dandean]

This fix for this issue is to have a Webpack Loader configured to strip flow types:

npm install remove-flow-types-loader

webpack config:

      {
        test: /\.js/, // assuming the files are named .js.flow 
        enforce: 'pre',
        use: ['remove-flow-types-loader']
      },

[benmosher]

Here in the future, I adapted @levindixon's solution into

{ test: /\.flow$/, use: 'null-loader' }

after yarn add --dev null-loader-ing.

I don't totally understand why this doesn't destroy it, but I'm using this in a devteam-facing server anyway.

[cindhyandhini333]

Here in the future, I adapted @levindixon's solution into

{ test: /\.flow$/, use: 'null-loader' }

after yarn add --dev null-loader-ing.

I don't totally understand why this doesn't destroy it, but I'm using this in a devteam-facing server anyway.

[barbalex]

This is very annoying as it completely spams the output when building my app - serching for meaningful output is made nearly impossible :-(

[barbalex]

Seems related to #882

[gautierrollin]

Since 36ed669, temporary solutions based on flow types doesn't work anymore...

Now we have warning on .ts, .ts.map and .js.map files. 😞

New possible solution:

{
  test : /\.(ts|ts.map|js.map)$/,
  include : [".node_modules/graphql-language-service-interface"],
  use : "ignore-loader"
}

[acao]

I have a WIP PR for #882 and this issue that should solve this upstream. The problem as discussed in #882 is that we are requiring files using variables in the gls-interface without specifying the extension which makes webpack do this. Just need to add test coverage. Soon, gls-interface will need to be isomorphic anyways.