Fresh create-react-app is failing to run

[alharris-at]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

Create React App

Please describe your bug.

Creating a new create-react-app, and adding a dependency on @aws-amplify/ui-react, and importing a ui component causes my build to fail w/ the following stack.

Failed to compile.

TypeError: /Users/alharris/workplace/test-app/node_modules/@aws-crypto/ie11-detection/build/CryptoOperation.js: Cannot read property 'originalPositionFor' of undefined
at run.next ()
assets by path static/ 5.27 MiB
asset static/js/bundle.js 5.26 MiB [emitted] (name: main) 1 related asset
asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.92 KiB [emitted] 1 related asset
asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 546 bytes [emitted]
orphan modules 9.04 MiB [orphan] 1304 modules
runtime modules 31.4 KiB 16 modules
cacheable modules 4.39 MiB
modules by path ./node_modules/ 4.37 MiB 638 modules
modules by path ./src/ 18.4 KiB
modules by path ./src/.css 8.82 KiB
./src/index.css 2.72 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css 1.37 KiB [built] [code generated]
+ 2 modules
modules by path ./src/.js 5.97 KiB
./src/index.js 1.81 KiB [built] [code generated]
./src/App.js 2.74 KiB [built] [code generated]
./src/reportWebVitals.js 1.41 KiB [built] [code generated]
./src/logo.svg 3.61 KiB [built] [code generated]
crypto (ignored) 15 bytes [optional] [built] [code generated]

ERROR in ./node_modules/@aws-crypto/ie11-detection/build/CryptoOperation.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/alharris/workplace/test-app/node_modules/@aws-crypto/ie11-detection/build/CryptoOperation.js: Cannot read property 'originalPositionFor' of undefined
at SourceMapTree.originalPositionFor (/Users/alharris/workplace/test-app/node_modules/@ampproject/remapping/dist/remapping.umd.js:159:27)
at trace (/Users/alharris/workplace/test-app/node_modules/@ampproject/remapping/dist/remapping.umd.js:102:37)
at EncodedSourceMapImpl.map (/Users/alharris/workplace/test-app/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:347:36)
at TraceMap.map (/Users/alharris/workplace/test-app/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:430:31)
at SourceMapTree.traceMappings (/Users/alharris/workplace/test-app/node_modules/@ampproject/remapping/dist/remapping.umd.js:85:34)
at remapping (/Users/alharris/workplace/test-app/node_modules/@ampproject/remapping/dist/remapping.umd.js:258:36)
at mergeSourceMap (/Users/alharris/workplace/test-app/node_modules/@babel/core/lib/transformation/file/merge-map.js:19:30)
at generateCode (/Users/alharris/workplace/test-app/node_modules/@babel/core/lib/transformation/file/generate.js:72:39)
at run (/Users/alharris/workplace/test-app/node_modules/@babel/core/lib/transformation/index.js:55:33)
at run.next ()
@ ./node_modules/@aws-crypto/ie11-detection/build/index.js 9:21-49
@ ./node_modules/@aws-crypto/sha256-browser/build/crossPlatformSha256.js 16:23-60
@ ./node_modules/@aws-crypto/sha256-browser/build/index.js 10:26-58
@ ./node_modules/@aws-sdk/client-cognito-identity/dist/es/runtimeConfig.browser.js 3:0-52 33:10-16
@ ./node_modules/@aws-sdk/client-cognito-identity/dist/es/CognitoIdentityClient.js 2:0-79 36:42-63
@ ./node_modules/@aws-sdk/client-cognito-identity/dist/es/index.js 1:0-40 1:0-40
@ ./node_modules/@aws-amplify/core/lib-esm/Credentials.js 164:0-121 449:32-53 470:49-61 531:57-69 608:28-49 656:28-49 684:39-51 697:39-71
@ ./node_modules/@aws-amplify/core/lib-esm/index.js 27:0-62 27:0-62 27:0-62
@ ./node_modules/aws-amplify/lib-esm/index.js 13:0-59 20:0-12 21:0-13 22:0-21 22:24-37 34:0-135 34:0-135 34:0-135 34:0-135 34:0-135 34:0-135 34:0-135 34:0-135 34:0-135 37:0-19 42:15-22
@ ./node_modules/@aws-amplify/ui-react/dist/esm/index.js 37349:0-55 37353:13-15 37371:20-32
@ ./src/App.js 6:0-45 44:37-41
@ ./src/index.js 7:0-24 11:33-36
... etc

webpack 5.68.0 compiled with 25 errors in 32485 ms

### What's the expected behaviour?

App should run with a ui component.

### Help us reproduce the bug!

App was created w/

npx create-react-app test-app
npm i @aws-amplify/ui-react
npm start

Update App.js to:

import { Card } from '@aws-amplify/ui-react';

export default function App() {
return card Contents;
}

### Code Snippet

```typescript
// Put your code below this line.

Additional information and screenshots

No response

[alharris-at]

Seems like this is related to the recent release of @babel/core to 7.17.0.

Locally it appears that pinning my dependency of @babe/core to 7.16.12 addresses these issues.

[dbanksdesign]

It appears to be with aws-amplify package, I did CRA with only that package and not UI and got the same errors.

[ecraig12345]

My team hit a similar issue with our library's CRA template, and I found this issue in a search for originalPositionFor. It looks like the issue was introduced by babel/babel#14209 which was released with @babel/core@7.17.0.

[alharris-at]

@ecraig12345 Thank you for the link! We'll be using this to look into ways to mitigate w/o requiring customers to manually resolve.

[ashika01]

yes. Resolution until we have clear indication would be to add

"resolutions": {
    "@babel/core": "7.16.12"
  },

[ashika01]

Cross reference - facebook/create-react-app#12017

[patotoma]

this should be now resolved as per babel/babel#14229 (comment)

[alharris-at]

Yep, confirming that rerunning the above commands is now working. I'll resolve this issue. Thanks everybody!