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

Rails javascript not triggering even after the page is loaded with `page:load`

My experience with using Stripe in Rails has been smooth, except for some issues with Ajax calls not working properly after page refresh. I suspect this might be related to Turbolinks as the 'ready page:load' event doesn't behave as expected ...

javascriptjqueryruby-on-railsajaxturbolinks

What is the best way to add a character within a YouTube JSON link?

Fetching json data from a link, the youtube format in the link is http:\/\/www.youtube.com\/watch?v=UVKsd8z6scw. However, I need to add the letter "v" in between this link to display it in an iframe. So, the modified link should appear as ht ...

javascriptjqueryjsonhtml

Enhance the readability of your Angular/Ionic applications with proper hyphenation

In my Ionic 3 app, I am using an ion-grid. Some words do not fit within the columns and are cut off, continuing on the next row without any hyphens added for proper grammar context. See image https://i.stack.imgur.com/3Q9FX.png. This layout appears quite ...

javascriptangulartypescripthybrid-mobile-appionic3

I would like to automatically log out when closing the tab in Mozilla, Internet Explorer 8.0, or Chrome

Hello there, I was wondering if it's feasible to end the session and log out when I close my tab. I'd appreciate it if you could confirm whether this feature has been implemented on your end. Thank you, Manish ...

phpjavascripthtml

Is there a way to optimize Typescript compiler to avoid checking full classes and improve performance?

After experiencing slow Typescript compilation times, I decided to utilize generateTrace from https://github.com/microsoft/TypeScript/pull/40063 The trace revealed that a significant amount of time was spent comparing intricate classes with their subclass ...

javascriptnode.jstypescripttsconfigtypescript-compiler-api

Failed verification of C-Lang in React-Hardware/Particle

Currently, I am utilizing React, React Hardware ([https://github.com/iamdustan/react-hardware/]), and Johnny-Five along with the Particle Photon. The error stack displayed below is what pops up when executing my lib/app.js file: # Fatal error in ../deps/v ...

javascriptcreactjsjohnny-fivefirmata

Combining platform-express and platform-fastify for optimal performance

I am currently working on a NestJS application and my goal is to upload files using the package @types/multer. However, I encountered an issue while following the guidelines from the official documentation: Upon starting my application development, I dec ...

javascriptnode.jstypescriptnestjs

Optimizing Performance in Firebase Cloud Functions - Defining Functions for Efficiency

Currently, I am organizing the code in my index.ts by creating simple line function definitions like: HTTP Example export const demoHttpApp = functions.https.onRequest( (req, resp) => new DemoHttpClass(req, resp).run() ); Real-Time Database Example ...

typescriptfirebasegoogle-cloud-functions

The index module is not being recognized by the NodeJS Lambda function

Struggling with setting up a lambda function in IntelliJ WebStorm using node 16, Typescript, and modules instead of plain Javascript with commonJS. After deployment, attempting to run the function results in an error: { "errorType": "Runti ...

node.jstypescriptlambda

Assign false to all properties in the nested object with the exception of one

In order to manage the open/close state of my panel, I am using setState similar to the method described in this post. My goal is to only allow one panel to be open at a time, meaning there will be only one true value in the state. Here is the snippet of ...

javascriptreactjsreact-hooksantd

React animation failing to render underline animation

After tinkering with the underline animation while scrolling down on Codepen using Javascript, I successfully implemented it. You can check out the working version on Codepen. This animation utilizes Intersection Observer and a generated svg for the underl ...

javascriptcssreactjstypescriptmaterial-ui

Concerns about the Dependency Tree in React

I need some assistance with my current issue. I'm having trouble installing the mui search bar component. npm i --save material-ui-search-bar Unfortunately, I'm encountering this error message: PS Z:\WebDev\ApplyWithin\frontend> ...

javascriptnode.jsnpm

What is the best way to create a list using only distinct elements from an array?

If I have a collection of different colors: Red Blue Blue Green I aim to extract only the unique colors and store them in an array. Subsequently, I plan to incorporate each color from that array into an existing color list. The desired outcome would l ...

javascriptjqueryarrays

Autocomplete Data Origin

I'm currently exploring the use of Typeahead and implementing AJAX to fetch my data source: $(document).ready(function() { $('input.typeahead').typeahead( { hint: true, highlight: true, m ...

javascriptjqueryajaxtypeahead

Incorporating a new textfield in Codeigniter through a button/link activation

Currently, I am working on designing a request form for my website. I am facing an issue with creating a button that can dynamically add new input fields when clicked. Unfortunately, I am unsure of how to resolve this problem. Picture this: [ button ] A ...

javascriptphpmysqlcodeigniter

Preserving the information from a webpage by utilizing casperjs for scraping and saving table data

What is the most efficient way to preserve table data collected during a web scraping process with casperjs? Saving it as a file after serializing into a json object. Sending an ajax request to php and then storing it in a mysql database. ...

javascriptmysqljsonphantomjscasperjs

A guide on smoothly navigating to the desired row in a gridview using Asp.net

Currently, I am developing a project using ASP.net and C# technology. In my application, I integrated a GridView that contains multiple rows. Within the grid, there is a text box and a search button available. The columns displayed in the grid are Id and ...

javascriptc#jqueryasp.netgridview

Performing bulk operations on all selected rows in a table using Angular 6

Within my Angular 6 web application, there is a table with checkboxes in each row. My goal is to be able to perform bulk actions on the selected rows, such as deleting them. One approach I considered was adding an isSelected boolean property to the data m ...

angularhtmltypescript

Opening a new tab in Angular 6 from a component with freshly generated HTML (containing input data)

Hello everyone. I have a requirement where I need to open a new browser tab with formatted input data from a modal component. Here's an example code snippet that attempts to achieve this using ng-template: @Component({ template: '< ...

htmlangulartypescript

Reading cached JSON value in a Node.js application

Recently, I embarked on creating a node.js application and reached a stage where I needed to retrieve a value from an updated JSON file. However, my attempts using the 'sleep' module to introduce a small delay were unsuccessful. I'm relativ ...

javascriptjsonnode.jsasynchronous