expo: web server failed : [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated.

Summary

Description

Hi,

I have followed the official doc for setting up the react native with expo:

https://reactnative.dev/docs/environment-setup

I work under Linux Mint 21.1

I try many things, but all fail with the same error : web server can’t run with the message:

(node:931142) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:931142) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use the async 'start' or 'startCallback' method.
node:events:490
      throw er; // Unhandled 'error' event
      ^

Error: spawn galeon ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:285:19)
    at onErrorNT (node:internal/child_process:483:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:291:12)
    at onErrorNT (node:internal/child_process:483:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn galeon',
  path: 'galeon',
  spawnargs: [ 'http://localhost:19006' ]
}

Node.js v19.7.0

I tried all the version of node I could with the same result. I tried npx and yarn too 😦

I saw that the problem has been identified here

https://github.com/heartexlabs/label-studio-frontend/commit/ded728c002d510d00d386b5cb5fc84feb977dbad

and I understand the problem (to permute args), but I can’t success by installing the good solution. How to fix it properly by installing via npx or yarn?

Thanks,

What platform(s) does this occur on?

No response

SDK Version

Environment

expo-env-info 1.0.5 environment info: System: OS: Linux 5.15 Linux Mint 21.1 (Vera) Shell: 5.8.1 - /bin/zsh Binaries: Node: 19.7.0 - /usr/bin/node npm: 9.5.0 - /usr/bin/npm npmPackages: @expo/webpack-config: ^18.0.1 => 18.0.1 expo: ~48.0.6 => 48.0.7 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 react-native: 0.71.3 => 0.71.3 react-native-web: ~0.18.10 => 0.18.12 Expo Workflow: managed

Minimal reproducible example

Steps to reproduce

By following the official doc:

for instance,

% npx create-expo-app project
% cd project
% npx expo install react-native-web@~0.18.10 react-dom@18.2.0 "@expo/webpack-config@^18.0.1"
% npx expo start

then active web server Snack, code example, screenshot, or link to a repository

% npm run web

> project@1.0.0 web
> expo start --web

Starting project at /home/pk/dev/project
Starting Metro Bundler
Starting Webpack on port 19006 in development mode.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █   █▄ ▀▄▀█ ▄▄▄▄▄ █
█ █   █ █ ▀▄ █▀█ ▄█ █   █ █
█ █▄▄▄█ █▀██▀▀▄▀▄██ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄▀▄█ █ █▄█▄▄▄▄▄▄▄█
█▄ ▀█▄▄▄██▀▀▄▀█▄ ███ ▀▄▄ ▄█
█▄▄▄▄▄ ▄▄██▀ ▄▄█ ▀▀ █▄  ▀██
█▀█ ▀ ▀▄▄██▄█▄▀▄▀▄▀▄▀▀▄ ▀██
███ █▄▄▄▄ ▀▀█▀█▀▄▄▄█▄▀ ▀███
█▄▄▄██▄▄█▀▀▄▄ █▄▄ ▄▄▄ ▀ ▄▄█
█ ▄▄▄▄▄ █▀▄▄ ██▀▀ █▄█ ▀▀███
█ █   █ █▄▄ ▀▀▀▄█▄▄ ▄▄▀ ▀▀█
█ █▄▄▄█ █▀██ ███▄██▄▀█▀▀ ██
█▄▄▄▄▄▄▄█▄█████▄████▄▄▄▄▄▄█

› Metro waiting on exp://192.168.1.103:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Web is waiting on http://localhost:19006

› Press a │ open Android
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

I press w here

Logs for your project will appear below. Press Ctrl+C to exit.
(node:931142) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:931142) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use the async 'start' or 'startCallback' method.
node:events:490
      throw er; // Unhandled 'error' event
      ^

Error: spawn galeon ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:285:19)
    at onErrorNT (node:internal/child_process:483:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:291:12)
    at onErrorNT (node:internal/child_process:483:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn galeon',
  path: 'galeon',
  spawnargs: [ 'http://localhost:19006' ]
}

Node.js v19.7.0

Notice that the android part run well.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 9
Comments: 26 (2 by maintainers)

Most upvoted comments

I was able to remove the warning by adding "bundler": "metro" to the app.json.

{ "expo": { //... "web": { "bundler": "metro", //... } } }

EDIT: I notice some thumbs down on this and want to add the caveat that I do not know if this is the proper solution, but since I’ve been unable to find another solution I wanted to share what worked for me. I found this solution by looking at a previous project I had built with create-expo-app to see what configurations differed between the projects. I noticed this was missing from the project where I was getting the warning and adding it seemed to resolve things. If you have a better solution or can point out why this may be incorrect, please do!

+15

Munkyfoot on Jun 26, 2023

I just downgrade expo version to expo : “~47.0.14”, and it’s worked, i think it’s about new expo version is not stable yet

egecanyldrm on May 6, 2023

I was facing the same error with expo sdk 48 bare workflow.

I fixed it using the following code inside my webpack.config.js


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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.module.rules.forEach(rule => {
    if (rule.oneOf instanceof Array) {
      rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/]
    }
    return rule
  })

  return config;
};

Leonardocezar on Aug 25, 2023

I fixed it by adding "bundler": "metro" to the app.json.

{ "expo": { //... "web": { "bundler": "metro", //... } } }

@Munkyfoot Hey, where did you find this fix?

I also faced the same web server deprecated warning after updating to expo 48 and also some warning in react-native-reanimated and react-native-paper.

I tried your provided fix and it worked to remove all warnings. It started working without any warnings again.

But after few hours, I was getting react-native-reanimated export namespace error. https://github.com/software-mansion/react-native-reanimated/issues/3364

So, I tried the solution provided in that issue to add @babel/plugin-proposal-export-namespace-from and insert in babel.config.js plugin array and the error was fixed. One user also reported that adding this plugin fixes the error but may hide some runtime errors.

Is anyone else also facing these issues after updating to expo 48?

smwq on Jun 26, 2023

Same issue with Expo SDK 48, brand new project. Followed the official doc.

erisvaldojunior on May 15, 2023

Sure change expo version in package.json and run the yarn/npm install, after install run that command in order

npm i -g eas-cli
expo-cli doctor ( that command will show you new versions of dependcies and it will be updated )

egecanyldrm on May 6, 2023