expo-cli@6.2.x breaks legacy build:web

[eettaa]

Summary

expo build:web worked on expo-cli 6.1.x and below
expo build:web breaks with expo-cli 6.2.x with errors like:
[18:00:53] ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.node should be one of these:
false | object { __dirname?, __filename?, global? }
-> Include polyfills or mocks for various node stuff.
Details:
* configuration.node has an unknown property 'module'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'dgram'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'dns'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'fs'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'http2'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'net'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'tls'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'child_process'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.

These errors have been reproduced in AWS Amplify build environments and on local machines.

The fix for us is to move to export:web, but I still believe this is an undocumented breaking change (or just a bug :) )

Environment

AWS Amplify hosting and also local linux environment

Please specify your device/emulator/simulator platform, model and version

AWS and linux

Error output

[18:00:53] ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.node should be one of these:
false | object { __dirname?, __filename?, global? }
-> Include polyfills or mocks for various node stuff.
Details:
* configuration.node has an unknown property 'module'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'dgram'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'dns'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'fs'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'http2'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'net'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'tls'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'child_process'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.

Reproducible demo or steps to reproduce from a blank project

create a blank project
npm i g expo-cli@6.1.x
expo build:web // Works

npm i g expo-cli@6.2.x
expo build:web // broken
npx expo export:web // works, although note this is invoking a different package

[Jackman3005]

We just woke up to this issue as well. Our end-to-end tests were failing in CI because we need to start the web server without user interaction.

We used to have:

yarn global add expo-cli
expo start:web --port $WEB_PORT

and changed it to pin the version for now, which fixed things for now.

yarn global add expo-cli@6.1.0
expo start:web --port $WEB_PORT

We tried to switch to using the expo-cli shipped with expo (we're on Expo 47), but yarn expo start --web does not support the --port flag, which is a regression from the globally installed version 😢

[dylanrandle]

I also found that expo build:web is broken in 6.2.x but works in 6.1.0. The error I receive is:

Module not found: Error: Can't resolve './dist/abort-controller' in node_modules/abort-controller
Did you mean 'abort-controller.mjs'?
BREAKING CHANGE: The request './dist/abort-controller' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, 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.

I will further add that running expo start --web also fails with a multitude of Failed to parse source map errors.

Rolling back to 6.1.0 fixes these issues.

For reference, I am using Expo SDK 45.0.0.

When I use expo-cli@6.2.1 and run expo export:web it does not work for me and I receive the error:

"export:web" is not an expo command

[EvanBacon]

This appears to be a result of the recent migration to Webpack 5, this bug won't automatically effect projects that migrated to the new versioned Expo CLI as it requires you to choose the version of Webpack that is used. To address this issue in the global CLI, we deprecated in favor of the versioned CLI.

You can work around the issue by installing @expo/webpack-config@0.17.4 locally in your project to use Webpack 4.

I cannot reproduce the build failing in a new project so I'm going to need a reproducible example in order to fix the issue. I also ask any potential commenters to be sure that their issue is related to the original post, otherwise open a new issue.

[EvanBacon]

@Jackman3005 your comment seems unrelated to the original issue, will respond here but the thread may get a little confusing.

It's unclear why you're using the following:

expo start:web --port $WEB_PORT

You can do: WEB_PORT=8081 expo start:web and expo start:web --port 8081, you don't need to use both together to set a custom port.

Further, if you'd like to open a PR to expo/expo which adds EXPO_WEBPACK_PORT or related, I'm happy to review it. I didn't add the start:web command because I'm planning to drop Webpack in favor of universal Metro which runs on the same port across all platforms, but an environment variable is nonintrusive enough to be added if it will help migration.

[eettaa]

Thanks for the response here!

You can work around the issue by installing @expo/webpack-config@0.17.4 locally in your project to use Webpack 4.

Just a warning to others here that unless expo/expo-cli#4517 has been fixed (had not as of 0.17.2 and bug is still open), this recommendation will break all prod builds of React Native Web. This caused a production outage for us a few weeks ago.

---

As to repro: we are using a basic managed expo project and have an extended webpack-config.js using webpack 4 syntax, so that probably explains it. Here's a truncated version

const createExpoWebpackConfigAsync = require('@expo/webpack-config')

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {

  const config = await createExpoWebpackConfigAsync(env, argv)
  // .... 
  config.module.rules.unshift({
    test: ....
    // Specify a single UseEntry for the use clause: https://webpack.js.org/configuration/module/#useentry
    // Note type: 'asset/resource' (webpack 5 flavor) fails- perhaps expo is still on webpack 4.
    use: {
      // See https://webpack.js.org/concepts/loaders/ for what loaders are.
      // See https://v4.webpack.js.org/loaders/file-loader/ to learn more about file-loader and associated options
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        esModule: false // Need this so require() doesn't export an object, just exports the default value
      }
    }
  })

  // Finally return the new config for the CLI to use.
  return config
}

[dylanrandle]

@EvanBacon thanks for the response! you and your team at Expo rock!

I'm a bit confused by the distinction between the "global CLI" and the "versioned CLI", which you say is preferred. could you please refer me to any of the documentation about this? I installed the Expo CLI months ago and at the time it was recommended to install it globally.

Thanks 👍

[groger]

@eettaa i have the same issue " ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

• configuration.node should be one of these:.."
  I'm using Nx, how did you fix it?

[eettaa]

There are two options discussed on the thread so far:

1. use the local expo cli instead (you need to be on expo 46+)
2. downgrade the global expo cli to 6.1.x

I believe both work

[Vadko]

I also found that expo build:web is broken in 6.2.x but works in 6.1.0. The error I receive is:

Module not found: Error: Can't resolve './dist/abort-controller' in node_modules/abort-controller
Did you mean 'abort-controller.mjs'?
BREAKING CHANGE: The request './dist/abort-controller' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, 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.

I will further add that running expo start --web also fails with a multitude of Failed to parse source map errors.

Rolling back to 6.1.0 fixes these issues.

For reference, I am using Expo SDK 45.0.0.

When I use expo-cli@6.2.1 and run expo export:web it does not work for me and I receive the error:

"export:web" is not an expo command

Faced exactly same issue after webpack v5 upgrade.

Since this is referred to the webpack itself, not to the expo solutions are referred to the webpack config.

For the issue with abort-controller:

  config.module.rules.push({
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  });

source: stoplightio/elements#1777 (comment)

for the sourcemap warnings:
https://stackoverflow.com/a/64035413

there are also more explanation why this is happening in each link :)

[eacanalg]

Just wanted to point out that im having the same issue here as @eettaa . For the moment im going to downgrade to expo 6.1.0. Hope there is a solution soon.

[aeroholic]

Same issue with SDK 48 and expo-cli@6.3.2

SDK 48
npx expo export:web => Error: Can't resolve './dist/abort-controller'

expo-cli 6.1.0
expo-cli build:web => Error: error:0308010C:digital envelope routines::unsupported

expo-cli 6.3.2
expo-cli build:web => Error: Can't resolve './dist/abort-controller'

So SDK 48 can't build web.

[RecognitionApp]

I have the same issue as the original post.

I'm using Expo SDK 45 and the automated build process as part of the AWS Amplify hosting. My app is in production so I am unable to update the web version at the moment. 😡 Been trying to resolve this for four days and feel like I've tried everything. 😢 Locally, I am using Node 16 and Expo 6.2.1.

If I use npx expo export:web in my amplify.yml, I get: Invalid project root:

If I use npx expo build:web in my amplify.yml, I get: Invalid project root:

If I use expo build:web in my amplify.yml, I get:

                                 # Executing command: expo build:web
2023-03-20T12:14:00.584Z [WARNING]: [12:14:00] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
                                    - configuration.node should be one of these:
                                    false | object { __dirname?, __filename?, global? }
                                    -> Include polyfills or mocks for various node stuff.
                                    Details:
                                    * configuration.node has an unknown property 'module'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'dgram'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'dns'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'fs'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'http2'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'net'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'tls'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'child_process'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
2023-03-20T12:14:00.599Z [WARNING]: [12:14:00] ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
                                    - configuration.node should be one of these:
                                    false | object { __dirname?, __filename?, global? }
                                    -> Include polyfills or mocks for various node stuff.
                                    Details:
                                    * configuration.node has an unknown property 'module'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'dgram'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'dns'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'fs'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'http2'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'net'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'tls'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'child_process'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    at validate (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/webpack/node_modules/schema-utils/dist/validate.js:105:11)
                                    at validateSchema (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/webpack/lib/validateSchema.js:78:2)
                                    at create (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/webpack/lib/webpack.js:111:24)
                                    at webpack (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/webpack/lib/webpack.js:158:32)
                                    at f (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/webpack/lib/index.js:64:16)
                                    at bundleWebAppAsync (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/xdl/src/Webpack.ts:316:27)
                                    at Object.bundleAsync (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/xdl/src/Webpack.ts:359:9)
2023-03-20T12:14:00.608Z [ERROR]: !!! Build failed
2023-03-20T12:14:00.609Z [ERROR]: !!! Non-Zero Exit Code detected

If I get rid of the webpack.config.js entirely, I get:

2023-03-20T12:22:01.912Z [WARNING]: [12:22:01] Module not found: Error: Can't resolve './dist/abort-controller' in '/codebuild/output/src236708788/src/recognition/node_modules/abort-controller'
                                    Did you mean 'abort-controller.mjs'?
                                    BREAKING CHANGE: The request './dist/abort-controller' failed to resolve only because it was resolved as fully specified
                                    (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, 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.
2023-03-20T12:22:01.933Z [ERROR]: !!! Build failed

Here is my package.json:

{
  "name": "recognitionapp",
  "version": "1.3.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@aws-sdk/client-secrets-manager": "^3.226.0",
    "@expo/vector-icons": "^13.0.0",
    "@expo/webpack-config": "~0.16.21",
    "@react-native-async-storage/async-storage": "^1.17.5",
    "@react-native-community/netinfo": "8.2.0",
    "@react-native-picker/picker": "2.4.0",
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/drawer": "^6.4.1",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "amazon-cognito-identity-js": "^5.2.11",
    "aws-amplify": "^4.3.24",
    "aws-amplify-react-native": "^6.0.4",
    "crypto-browserify": "^3.12.0",
    "expo": "~45.0.0",
    "expo-asset": "~8.5.0",
    "expo-av": "~11.2.3",
    "expo-cli": "6.2.x",
    "expo-constants": "~13.1.1",
    "expo-crypto": "~10.2.0",
    "expo-device": "~4.2.0",
    "expo-font": "~10.1.0",
    "expo-image-picker": "~13.1.1",
    "expo-linking": "~3.1.0",
    "expo-notifications": "~0.15.4",
    "expo-splash-screen": "~0.15.1",
    "expo-status-bar": "~1.3.0",
    "expo-system-ui": "~1.2.0",
    "expo-web-browser": "~10.2.1",
    "g": "^2.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-image-colors": "^1.5.1",
    "react-native-reanimated": "~2.8.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-svg": "12.3.0",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.13",
    "jest": "^26.6.3",
    "jest-expo": "~45.0.0",
    "react-test-renderer": "17.0.2",
    "typescript": "~4.3.5"
  },
  "private": true
}

Here is my webpack.config.js:

const createExpoWebpackConfigAsync = require('@expo/webpack-config')

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {

  const config = await createExpoWebpackConfigAsync(env, argv)
 
  config.module.rules.push({
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  });

  // Finally return the new config for the CLI to use.
  return config
}

Here is my amplify.yml:

version: 1.0
backend: 
  phases: 
    build: 
      commands: 
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
        - nvm use 16
        - npm install --silent --global expo-cli
        - |-
          if [ -f yarn.lock ]; then
           yarn
          elif [ -f package-lock.json ] || [ -f npm-shrinkwrap.json ]; then
           npm ci
          else
           npm install
          fi
    build:
      commands:
       - 'npx expo export:web'
  artifacts:
    baseDirectory: web-build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - $(npm root --global)/**/*

Please can someone help me resolve this?

[eacanalg]

I have the same issue as the original post.

I'm using Expo SDK 45 and the automated build process as part of the AWS Amplify hosting. My app is in production so I am unable to update the web version at the moment. 😡 Been trying to resolve this for four days and feel like I've tried everything. 😢 Locally, I am using Node 16 and Expo 6.2.1.

If I use npx expo export:web in my amplify.yml, I get: Invalid project root:

If I use npx expo build:web in my amplify.yml, I get: Invalid project root:

If I use expo build:web in my amplify.yml, I get:

                                 # Executing command: expo build:web
2023-03-20T12:14:00.584Z [WARNING]: [12:14:00] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
                                    - configuration.node should be one of these:
                                    false | object { __dirname?, __filename?, global? }
                                    -> Include polyfills or mocks for various node stuff.
                                    Details:
                                    * configuration.node has an unknown property 'module'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'dgram'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'dns'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'fs'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'http2'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'net'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'tls'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'child_process'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
2023-03-20T12:14:00.599Z [WARNING]: [12:14:00] ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
                                    - configuration.node should be one of these:
                                    false | object { __dirname?, __filename?, global? }
                                    -> Include polyfills or mocks for various node stuff.
                                    Details:
                                    * configuration.node has an unknown property 'module'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'dgram'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'dns'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'fs'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'http2'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'net'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'tls'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    * configuration.node has an unknown property 'child_process'. These properties are valid:
                                    object { __dirname?, __filename?, global? }
                                    -> Options object for node compatibility features.
                                    at validate (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/webpack/node_modules/schema-utils/dist/validate.js:105:11)
                                    at validateSchema (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/webpack/lib/validateSchema.js:78:2)
                                    at create (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/webpack/lib/webpack.js:111:24)
                                    at webpack (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/webpack/lib/webpack.js:158:32)
                                    at f (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/webpack/lib/index.js:64:16)
                                    at bundleWebAppAsync (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/xdl/src/Webpack.ts:316:27)
                                    at Object.bundleAsync (/root/.nvm/versions/node/v16.19.1/lib/node_modules/expo-cli/node_modules/xdl/src/Webpack.ts:359:9)
2023-03-20T12:14:00.608Z [ERROR]: !!! Build failed
2023-03-20T12:14:00.609Z [ERROR]: !!! Non-Zero Exit Code detected

If I get rid of the webpack.config.js entirely, I get:

2023-03-20T12:22:01.912Z [WARNING]: [12:22:01] Module not found: Error: Can't resolve './dist/abort-controller' in '/codebuild/output/src236708788/src/recognition/node_modules/abort-controller'
                                    Did you mean 'abort-controller.mjs'?
                                    BREAKING CHANGE: The request './dist/abort-controller' failed to resolve only because it was resolved as fully specified
                                    (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, 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.
2023-03-20T12:22:01.933Z [ERROR]: !!! Build failed

Here is my package.json:

{
  "name": "recognitionapp",
  "version": "1.3.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@aws-sdk/client-secrets-manager": "^3.226.0",
    "@expo/vector-icons": "^13.0.0",
    "@expo/webpack-config": "~0.16.21",
    "@react-native-async-storage/async-storage": "^1.17.5",
    "@react-native-community/netinfo": "8.2.0",
    "@react-native-picker/picker": "2.4.0",
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/drawer": "^6.4.1",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "amazon-cognito-identity-js": "^5.2.11",
    "aws-amplify": "^4.3.24",
    "aws-amplify-react-native": "^6.0.4",
    "crypto-browserify": "^3.12.0",
    "expo": "~45.0.0",
    "expo-asset": "~8.5.0",
    "expo-av": "~11.2.3",
    "expo-cli": "6.2.x",
    "expo-constants": "~13.1.1",
    "expo-crypto": "~10.2.0",
    "expo-device": "~4.2.0",
    "expo-font": "~10.1.0",
    "expo-image-picker": "~13.1.1",
    "expo-linking": "~3.1.0",
    "expo-notifications": "~0.15.4",
    "expo-splash-screen": "~0.15.1",
    "expo-status-bar": "~1.3.0",
    "expo-system-ui": "~1.2.0",
    "expo-web-browser": "~10.2.1",
    "g": "^2.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-image-colors": "^1.5.1",
    "react-native-reanimated": "~2.8.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-svg": "12.3.0",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.66.13",
    "jest": "^26.6.3",
    "jest-expo": "~45.0.0",
    "react-test-renderer": "17.0.2",
    "typescript": "~4.3.5"
  },
  "private": true
}

Here is my webpack.config.js:

const createExpoWebpackConfigAsync = require('@expo/webpack-config')

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {

  const config = await createExpoWebpackConfigAsync(env, argv)
 
  config.module.rules.push({
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  });

  // Finally return the new config for the CLI to use.
  return config
}

Here is my amplify.yml:

version: 1.0
backend: 
  phases: 
    build: 
      commands: 
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
        - nvm use 16
        - npm install --silent --global expo-cli
        - |-
          if [ -f yarn.lock ]; then
           yarn
          elif [ -f package-lock.json ] || [ -f npm-shrinkwrap.json ]; then
           npm ci
          else
           npm install
          fi
    build:
      commands:
       - 'npx expo export:web'
  artifacts:
    baseDirectory: web-build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - $(npm root --global)/**/*

Please can someone help me resolve this?

As fas as I know the solution will be to manually migrate your webpack.config to make it compatible with the new webpack version. Another option (the one I used) is to force expo to work with a previous working version.

[RecognitionApp]

Thanks so much for the response, @eacanalg

Please can you provide a little more detail on how you forced Expo to work?

Thanks in advance

[eacanalg]

@RecognitionApp In your case go into your amplify build settings. Edit the YML, look for "frontend", "prebuild", "commands".
One of the lines in there should look like "- npm install --silent --global expo-cli", modify this line to "- npm install --silent --global expo-cli@6.1.0" this will force amplify to work with the previous amplify version and you app will compile.

[RecognitionApp]

@eacanalg Thank you so much. Build completed. Really appreciate your help.

[russell-d]

just putting this out there so it can help others out, since this post helped me out a lot.

my aws amplify app was failing frontend builds due to this in my amplify.yml, I changed
build: commands: - expo build:web

to

build: commands: - npx expo export:web

and builds started working!

expo version: ~47
expo CLI version: 6.3

[wardjk87]

@russell-d This change worked for me on Expo 48. I've been working on the issue of amplify builds failing for the past several hours trying to deploy my app. Thank you so much!

The specific error I had been fighting was the following:

TypeError: The 'compilation' argument must be an instance of Compilation associated with webpack