Imports missing extensions, build failing with Webpack 5

[mikemykhaylov]

Description

When building my react app with webpack 5, I encounter Module not found errors, which prevent me from building the app.

Example error:

ERROR in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs 49:0-53:205
Module not found: Error: Can't resolve './language' in '/Users/mike/Projects/reactTemplate/node_modules/@aws-amplify/pubsub/node_modules/graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './language' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js 90:0-39 221:41-53 345:49-61 501:37-49 517:46-58 541:37-49
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js 15:0-45 15:0-45
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/index.js 14:0-28 14:0-28
 @ ./node_modules/aws-amplify/lib-esm/index.js 27:0-45 27:0-45
 @ ./src/index.jsx 3:0-34 6:0-17

Additional information

Putting the extensions in the index.mjs file seems to fix the issue. However, I am not familiar with the Flow types, and therefore unable to make a pull request.

export { graphql, graphqlSync } from './graphql.js'; // Create and operate on GraphQL type definitions and schema.

export { GraphQLSchema, // Definitions
GraphQLScalarType, GraphQLObjectType, GraphQLInterfaceType, GraphQLUnionType, GraphQLEnumType, GraphQLInputObjectType, GraphQLList, GraphQLNonNull, GraphQLDirective, // "Enum" of Type Kinds
TypeKind, // Scalars
specifiedScalarTypes, GraphQLInt, GraphQLFloat, GraphQLString, GraphQLBoolean, GraphQLID, // Built-in Directives defined by the Spec
specifiedDirectives, GraphQLIncludeDirective, GraphQLSkipDirective, GraphQLDeprecatedDirective, // Constant Deprecation Reason
DEFAULT_DEPRECATION_REASON, // Meta-field definitions.
SchemaMetaFieldDef, TypeMetaFieldDef, TypeNameMetaFieldDef, // GraphQL Types for introspection.
introspectionTypes, __Schema, __Directive, __DirectiveLocation, __Type, __Field, __InputValue, __EnumValue, __TypeKind, // Predicates
isSchema, isDirective, isType, isScalarType, isObjectType, isInterfaceType, isUnionType, isEnumType, isInputObjectType, isListType, isNonNullType, isInputType, isOutputType, isLeafType, isCompositeType, isAbstractType, isWrappingType, isNullableType, isNamedType, isRequiredArgument, isRequiredInputField, isSpecifiedScalarType, isIntrospectionType, isSpecifiedDirective, // Assertions
assertType, assertScalarType, assertObjectType, assertInterfaceType, assertUnionType, assertEnumType, assertInputObjectType, assertListType, assertNonNullType, assertInputType, assertOutputType, assertLeafType, assertCompositeType, assertAbstractType, assertWrappingType, assertNullableType, assertNamedType, // Un-modifiers
getNullableType, getNamedType, // Validate GraphQL schema.
validateSchema, assertValidSchema } from './type/index.js';
// Parse and operate on GraphQL language source files.
export { Source, getLocation, // Parse
parse, parseValue, parseType, // Print
print, // Visit
visit, visitInParallel, visitWithTypeInfo, getVisitFn, Kind, TokenKind, DirectiveLocation, BREAK, // Predicates
isDefinitionNode, isExecutableDefinitionNode, isSelectionNode, isValueNode, isTypeNode, isTypeSystemDefinitionNode, isTypeDefinitionNode, isTypeSystemExtensionNode, isTypeExtensionNode } from './language/index.js';
// Execute GraphQL queries.
export { execute, defaultFieldResolver, responsePathAsArray, getDirectiveValues } from './execution/index.js';
export { subscribe, createSourceEventStream } from './subscription/index.js'; // Validate GraphQL queries.

export { validate, ValidationContext, // All validation rules in the GraphQL Specification.
specifiedRules, // Individual validation rules.
FieldsOnCorrectTypeRule, FragmentsOnCompositeTypesRule, KnownArgumentNamesRule, KnownDirectivesRule, KnownFragmentNamesRule, KnownTypeNamesRule, LoneAnonymousOperationRule, NoFragmentCyclesRule, NoUndefinedVariablesRule, NoUnusedFragmentsRule, NoUnusedVariablesRule, OverlappingFieldsCanBeMergedRule, PossibleFragmentSpreadsRule, ProvidedRequiredArgumentsRule, ScalarLeafsRule, SingleFieldSubscriptionsRule, UniqueArgumentNamesRule, UniqueDirectivesPerLocationRule, UniqueFragmentNamesRule, UniqueInputFieldNamesRule, UniqueOperationNamesRule, UniqueVariableNamesRule, ValuesOfCorrectTypeRule, VariablesAreInputTypesRule, VariablesInAllowedPositionRule } from './validation/index.js'; // Create, format, and print GraphQL errors.

export { GraphQLError, formatError, printError } from './error/index.js';
// Utilities for operating on GraphQL type schema and parsed sources.
export { // Produce the GraphQL query recommended for a full schema introspection.
// Accepts optional IntrospectionOptions.
getIntrospectionQuery, // @deprecated: use getIntrospectionQuery - will be removed in v15
introspectionQuery, // Gets the target Operation from a Document
getOperationAST, // Gets the Type for the target Operation AST.
getOperationRootType, // Convert a GraphQLSchema to an IntrospectionQuery
introspectionFromSchema, // Build a GraphQLSchema from an introspection result.
buildClientSchema, // Build a GraphQLSchema from a parsed GraphQL Schema language AST.
buildASTSchema, // Build a GraphQLSchema from a GraphQL schema language document.
buildSchema, // @deprecated: Get the description from a schema AST node and supports legacy
// syntax for specifying descriptions - will be removed in v16
getDescription, // Extends an existing GraphQLSchema from a parsed GraphQL Schema
// language AST.
extendSchema, // Sort a GraphQLSchema.
lexicographicSortSchema, // Print a GraphQLSchema to GraphQL Schema language.
printSchema, // Prints the built-in introspection schema in the Schema Language
// format.
printIntrospectionSchema, // Print a GraphQLType to GraphQL Schema language.
printType, // Create a GraphQLType from a GraphQL language AST.
typeFromAST, // Create a JavaScript value from a GraphQL language AST with a Type.
valueFromAST, // Create a JavaScript value from a GraphQL language AST without a Type.
valueFromASTUntyped, // Create a GraphQL language AST from a JavaScript value.
astFromValue, // A helper to use within recursive-descent visitors which need to be aware of
// the GraphQL type system.
TypeInfo, // Coerces a JavaScript value to a GraphQL type, or produces errors.
coerceValue, // @deprecated use coerceValue - will be removed in v15
isValidJSValue, // @deprecated use validation - will be removed in v15
isValidLiteralValue, // Concatenates multiple AST together.
concatAST, // Separates an AST into an AST per Operation.
separateOperations, // Comparators for types
isEqualType, isTypeSubTypeOf, doTypesOverlap, // Asserts a string is a valid GraphQL name.
assertValidName, // Determine if a string is a valid GraphQL name.
isValidNameError, // Compares two GraphQLSchemas and detects breaking changes.
findBreakingChanges, findDangerousChanges, BreakingChangeType, DangerousChangeType, // Report all deprecated usage within a GraphQL document.
findDeprecatedUsages } from './utilities/index.js';

To reproduce

git clone https://github.com/mmykhaylov/amplifyWebpack5Demo.git
yarn install
yarn dev

[martoncsikos]

workaround: #2721 (comment)

[christopher-caldwell]

Is there a workaround without being able to edit your webpack config? React scripts 5.0.0 uses Webpack 5, which causes this error, however you cannot change the webpack config. I don't think this is your problem, just wondering if anyone else has this with CRA

[stuthib]

@christopher-caldwell I am not sure if this is the right way to go about, as I am still having issues on CRA.

I used react-app-rewired package to override the current webpack config and created another file called config-overrides.js and added this -

const webpack = require('webpack'); 
module.exports = function override(config) { 
  const fallback = config.resolve.fallback || {}; 
  Object.assign(fallback, { 
    "stream": require.resolve("stream-browserify"), 
    "path": require.resolve("path-browserify")
  }) 
  const rules = config.module.rules || {};
  Object.assign(rules, {
    test: /\.(mjs|js)?$/,
    resolve: {
      fullySpecified: false
    }
  })
  config.resolve.fallback = fallback; 
  config.module.rules = rules;
  config.resolve.extensions = ['*', '.mjs', '.js', '.json', '.gql', '.graphql']
  config.plugins = (config.plugins || []).concat([ 
    new webpack.ProvidePlugin({ 
      process: 'process/browser', 
      Buffer: ['buffer', 'Buffer'] 
    }) 
  ]) 
  return config; 
}

While the node_modules error are gone, it is not resolving .ts and .tsx files in my src folder. Not sure what I am missing here. Tried adding .ts, .tsx to the extensions array and it went back to showing the errors from node_modules again.

[Ravint20]

delete your node_modules and reinstall it.