Encountering build:web failure within npm script due to TypeScript

Our project is utilizing the expo-cli as a local dependency in order to execute build:web from an npm script without requiring the global installation of expo-cli. However, when we run npm run build:web, we encounter the following exception.

To isolate the issue, we created a basic TypeScript project using expo init and then performed npm install expo-cli -D. Interestingly, everything worked fine without TypeScript, leading us to suspect that TypeScript might be causing the problem.

The error occurs during the build process:

>>npm run build:web

> @ build:web /home/anna/examplets
> expo build:web

(node:24316) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'replace' of undefined
    at Object.<anonymous> (/home/anna/examplets/node_modules/@expo/webpack-config/src/withWorkbox.ts:142:10)
    at Generator.next (<anonymous>)
    at fulfilled (/home/anna/examplets/node_modules/@expo/webpack-config/webpack/withWorkbox.js:4:58)
(node:24316) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:24316) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Output provided by expo-diagnostics:

Expo CLI 3.4.1 environment info:
    System:
      OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
      Shell: 4.4.20 - /bin/bash
    Binaries:
      Node: 10.16.2 - ~/.nvm/versions/node/v10.16.2/bin/node
      Yarn: 1.19.1 - /usr/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v10.16.2/bin/npm
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5900203
    npmPackages:
      @types/react: ^16.8.23 => 16.9.11 
      @types/react-native: ^0.57.65 => 0.57.65 
      expo: ^35.0.0 => 35.0.0 
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz => 0.59.8

This is our package.json configuration:

{
  "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",
    "build:web": "expo build:web"
  },
  "dependencies": {
    "expo": "^35.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-web": "^0.11.7"
  },
  "devDependencies": {
    "@types/react": "^16.8.23",
    "@types/react-native": "^0.57.65",
    "babel-preset-expo": "^7.1.0",
    "expo-cli": "^3.4.1",
    "typescript": "^3.6.3"
  },
  "private": true
}
javascripttypescriptreact-nativenpmexpo

Answer №1

To incorporate webpack-config into your project, follow these steps:

Use the command: yarn add -D @expo/webpack-config

Create a new file called webpack.config.js in the root directory of your project and include the following code:

const createExpoWebpackConfig = require("@expo/webpack-config");
module.exports = function(env, argv) {
  env.mode = "development";
  const config = createExpoWebpackConfig(env, argv);
  return config;
};

For more information, visit the source at https://medium.com/@toastui/from-zero-to-publish-expo-web-react-native-for-web-tutorial-e3e020d6d3ff

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I have developed a function that adds up price values, but for some reason it is always lagging one step behind

I am facing an issue with my React container that has add and subtract functions. These functions are triggered whenever a user clicks on '+' or '-' spans, to calculate the total 'price' of three different 'products' ...

javascriptreactjsfunctionreact-redux

What is the best way to prevent a directory from being included in the Webpack bundle?

Issue: Despite configuring my Webpack settings in webpack.config.js to exclude files from the ./src/Portfolio directory, all files are being bundled by Webpack. Code Snippet: Webpack.config.js const path = require('path'); module.exports = { ...

javascriptnpmwebpack

What is the method for extracting user input from a text box on a webpage?

Having trouble with retrieving the value from a text box in my search function. SearchBar Component import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-search', templateUrl: './search.compon ...

angulartypescript

javascript cannot utilize html reset functionality

My drop down menu includes an onChange event that triggers a JavaScript method. However, when I select a new value and then click the reset button, the dropdown reverts back to its original value but the onChange event does not fire. <select onChange= ...

javascripthtml

Is there a method to incorporate a scroll event into the ng-multi-selectdropdown, a npm package?

Query: I need to incorporate a scroll event in the given html code that triggers when the div is scrolled. However, I am facing issues with implementing a scroll event that works when the elements are being scrolled. <ng-mult ...

javascripthtmlangular

Encountering an issue on Safari: WeakMap variable not found in .NET Core 1.1.0 and Angular 2 application

I recently deployed a .NET Core 1.1.0 + Angular 2 + Typescript app on ASPHostPortal and encountered an issue while accessing it from Safari. The console showed the following exception: Can't find variable:WeakMap This caused the site to not load p ...

angulartypescriptpolyfills

Using JQuery to monitor the loading of a newly selected image src attribute

As a newcomer to JavaScript and JQuery, I am facing a challenge that I couldn't find a solution for in other discussions: I have a function that retrieves the path to an image (/API/currentImage) using a GET request and needs to update the src attrib ...

javascriptjqueryhtmlajaximage

Invoking a parent method from a child component in a TypeScript and React application

I'm facing an issue where I am unable to call a method from a parent component in my child component. The method in the parent element is not being triggered when the child component tries to call it. This problem is showcased in a simple example with ...

reactjstypescript

After removing an item from the array, React fails to display the updated render

As a newcomer, I am struggling with a particular issue. I have implemented a delete button for each item in a list. When the button is clicked, the object in the firstItems array is successfully deleted (as confirmed by logging the array to the console), b ...

javascriptreactjsreact-grid-layout

How can I delete the onmouseover function in HTML?

Is there a way to remove the (onmouseover="mouseoversound.playclip()") function from the following HTML code? <a href="roster.html" onmouseover="mouseoversound.playclip()">Roster</a> Can we instead implement this functionality in a JavaScript ...

javascriptjqueryhtml

Determine whether an element is currently focused using a Vue.js directive

I'm attempting to verify if an element is currently in focus, specifically an input field, and then apply a class to another element. This is the code I have been working on, but for some reason the hasFocus() function isn't functioning as expect ...

javascriptvue.jsvue-directives

Completion of the form within the Bootstrap popover

I have a feature where dynamically created rows contain an "add" button. When the user clicks on the add button, a form is loaded into a Bootstrap popover. See FIDDLE DEMO My issue is: Why isn't this code being triggered? I am trying to validate ...

javascriptjqueryajaxtwitter-bootstrap

Issue: npmcli is unable to locate the npmlog module required for operation

I'm encountering an issue while trying to install some dependencies for Jupyter using npm to work with JavaScript. Every npm command I try throws this error: node:internal/modules/cjs/loader:998 throw err; ^ Error: Cannot find module 'npmlog ...

node.jsnpmnpm-install

Creating a table in VueJs and populating it with values retrieved from an MSSQL database in a .NET Core web application

I am developing a table within a .NET Core Web Application that includes multiple rows and columns filled with data retrieved from a MSSQL server through a WEB API Given the need for numerous rows and columns, I am considering using a for loop inside my & ...

javascriptc#htmlasp.net-mvcvue.js

Purge the inversify-js container and fetch fresh service instances

My frontend application in react-native utilizes inversify-js for service classes. I have implemented an IOC structure where services are shared as singleton instances, each with an init/destroy method to manage internal state. While the init/destroy mec ...

typescriptreact-nativesingletoninversion-of-controlinversifyjs

Steps to access arrays that are embedded in a file and are loaded asynchronously

https://gyazo.com/e80eea9f69c0cbb52cc7929d0a46ea2f The name of the object is totalCount. How can I retrieve the count from it? Object.result was my first attempt, but it returned undefined. For my second attempt: var count = totalCount.resu ...

javascriptarraysangularjsobject

Executing cypress tests with tags in nrwl nx workspace: A simple guide

Currently, I am working within a nrwl nx workspace where I have set up a cypress BDD cucumber project. My goal is to run cypress tests based on tags using nrwl. In the past, I would typically use the "cypress-tags" command to achieve this. For example: &q ...

typescriptcypresspipelinenrwl-nx

Can one extract a property from an object and assign it to a property on the constructor?

Currently working with TypeScript, I am looking to destructure properties from an object. The challenge lies in the fact that I need to assign it to a property on the constructor of the class: var someData = [{title: 'some title', desc: 'so ...

javascripttypescriptdestructuring

What is the process for retrieving the packages in each lerna repository once the node_modules have been removed from the subfolders?

My current Repository Structure is: codebook -packages -clii -local-api -local-client -lerna.json -package.json The issue arose when I tried to change the name of local-api and local-client in order to publish them. After renaming them to @codebook/ ...

reactjsnpmyarnpkglerna

AWS Amplify build is unexpectedly crashing due to Node "N/A" not being installed

Something seems off with Amplify as I encountered issues after a simple code adjustment to a button, resulting in build failures. Strangely, the commit hash passed on production but failed on staging. Upon attempting a redeployment, it failed on both produ ...

npmaws-amplifyamazon-ami