React app won't compile after adding Apollo with GraphQL

[rnnyrk]

So it's my first experience with GraphQL and Apollo. I've created a small NodeJS backend serving data with the Apollo server. This works fine, but implementing the API within my React frontend application runs my into unsolvable issues. I created a repository so you can checkout the issue yourself: https://github.com/rnnyrk/graphql-parser
Within this project I try to fetch data from localhost:4000, since that's where my Apollo server is running. Although I experience the same issues using the example url: https://48p1r2roz4.sse.codesandbox.io

I've started following the "Getting Started" docs, but the above errors keep coming up. Googeling the warnings, issues like these keep coming up graphql/graphql-js#1272 suggesting adding .mjs section to your Webpack rules, or extension resolvers. I tried everything recommended, byt unfortunately nothing seems to works. This is my Webpack setup, the complete file can be found here:

import path from 'path';
import * as webpack from 'webpack';
import * as devServer from 'webpack-dev-server';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

const baseConfig: webpack.Configuration = {
  mode: 'production',
  target: 'browserslist',
  output: {
    filename: 'static/js/[name].[chunkhash].js',
    chunkFilename: 'static/js/[name].[chunkhash].js',
    path: path.resolve('dist'),
    publicPath: '/',
  },
  entry: path.resolve('src'),
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      ....
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      },
    ],
  },
  ....
  resolve: {
    extensions: ['*', '.mjs', '.js', '.jsx', '.ts', '.tsx'],
    plugins: [
      new TsconfigPathsPlugin(),
    ],
  },
};

export default baseConfig;

export type WebpackConfig = webpack.Configuration & { devServer?: devServer.Configuration };
type WebpackMergeType = (...config: WebpackConfig[]) => WebpackConfig;

export const merge: WebpackMergeType = (...config) => webpackMerge(baseConfig, ...config);

The issues occurs directly after starting my front-end application. The GraphQL/Webpack versions and Apollo setup:

"@apollo/client": "^3.3.16",
"graphql": "^15.5.0",
"webpack": "5.36.2",

  System:
    OS: macOS 11.3
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    npm: 7.6.3 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 87.0
    Safari: 14.1
  npmPackages:
    @apollo/client: ^3.3.16 => 3.3.16

Hopefully I supplied enough information. Any idea or recommendations? Kinda stuck now on first implementing it 😓

[benjamn]

@rnnyrk Just to be sure, did you also npm install graphql when you installed @apollo/client?

[rnnyrk]

@benjamn Unfortunately I have graphql installed, would've been an easy fix. Reinstalled it as well, no luck. Any other thoughts?

[rnnyrk]

Still big hurdle for me trying to use Apollo and GraphQL. Any suggestions what I can do or try out? I'd also link my repository which might help out? https://github.com/rnnyrk/graphql-parser/blob/master/config/webpack.config.base.ts

[hwillson]

@rnnyrk update your webpack config to exclude .mjs files from the file-loader:

...
      {
        exclude: [
          /\.[tj]sx?$/,
          /\.css$/,
          /\.svg$/,
          /\.(jpe?g|png|gif)$/i,
          /\.json$/,
          /\.html$/,
          /\.ejs$/,
          /\.mjs$/,     // ADD THIS
        ],
        use: [{
          loader: 'file-loader',
          options: { name: 'static/[name].[ext]' },
        }],
      },
...

[rnnyrk]

@hwillson Wonderful! This works like charm, thank you! :D