I'm trying to use graphql-tag to import graphql queries from .graphql files using webpack, as described here.

Thus, my webpack.config is looking like this:

{

    // ...

    module: {
        rules: [{
            test: /\.(graphql|gql)$/,
            exclude: /node_modules/,
            loader: "graphql-tag/loader",
        }],
    },

    entry: "./index.js",

    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "../dist"),
    },

    mode: "development",

}

Executing

import signin from "./signin.graqhql";

inside index.js yields the webpack error

ERROR in ./index.js 1:0-35
Module not found: Error: Can't resolve './signin.graqhql' in 'D:\DevOps\Foo\app\src'
resolve './signin.graqhql' in 'D:\DevOps\Foo\app\src'
  using description file: D:\DevOps\Foo\app\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\DevOps\Foo\app\package.json (relative path: ./src/signin.graqhql)        
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\DevOps\Foo\app\src\signin.graqhql doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\DevOps\Foo\app\src\signin.graqhql.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        D:\DevOps\Foo\app\src\signin.graqhql.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        D:\DevOps\Foo\app\src\signin.graqhql.wasm doesn't exist
      as directory
        D:\DevOps\Foo\app\src\signin.graqhql doesn't exist

I've installed graphql and graphql-tag.

signin.graphql should be fine:

mutation Mutation($id: String!, $password: String!) {
    signin(id: $id, password: $password) {
        token,
        user {
            id
        }
    }
}

CodePudding user response：

Sorry, it was a typo

import signin from "./signin.graqhql";
                                ^*p

Easy to miss this one.