Webpack Import Alias Not Working

[aboe026]

I'm attempting to use aliases in my imports across my projects. For some reason, they do not work for my .gql files (I get Cannot find module). Here is my webpack config:

var ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var LiveReloadPlugin = require('webpack-livereload-plugin')
var path = require('path')

var config = {
  entry: 'src/client/index.js',
  output: {
    path: path.resolve(__dirname, 'build/client'),
    publicPath: '/',
    filename: 'index_bundle.js'
  },
  mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.gql$/,
        use: 'graphql-tag/loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    alias: {
      'src': path.resolve(__dirname, 'src')
    },
    extensions: ['.webpack.js', '.mjs', '.js', '.json', '.gql']
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'ABCSTravels',
      template: 'src/client/index.html'
    }),
    new ExtraWatchWebpackPlugin({
      files: [
        'src/client/**/*.gql'
      ]
    })
  ]
}

if (process.env.NODE_ENV === 'development') {
  // don't parse minified bundles (vendor libs) for faster builds
  config.module.noParse = [
    /\.min\.js$/
  ]
  config.plugins.push(new LiveReloadPlugin({
    appendScriptTag: true
  }))
}

module.exports = config

This import statement works:

import VISITS_QUERY from './VisitsQuery.gql'

but not this one:

import VISITS_QUERY from 'src/client/visits/VisitsQuery.gql'

I don't have this issue with any other file types in my project (.js, .json, .css)

graphql-tag version: 2.9.2 node version: 9.3.0 OS: Windows 10 Build 17134

[sebas5384]

having the same issue

[ethanshry]

I am unable to even import MyQuery from './queries.gql, I just get [ts] Cannot find module errors

[PaulKujawa]

@ethanshry https://webpack.js.org/guides/typescript/#importing-other-assets might help you. With TS we can also use the paths CompilerOption with TS-loader or AWT, that works.

[MattMorrisDev]

@ethanshry See https://github.com/apollographql/graphql-tag/issues/59 - I had the same issue until I added a definition type to my project with this:

declare module '*.graphql' {
  import {DocumentNode} from 'graphql';

  const value: DocumentNode;
  export = value;
}