yarn start --web

[sumer-alhussein]

yarn start --web

Uncaught Error: Module parse failed: Unexpected token (16:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     // | Vars |
|     // ========
>     layout;
|     navRef;
|     navIsReadyRef;
    at ./node_modules/rn-navio/dist/index.js (index.js:120:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at ./src/screens/index.tsx (index.tsx:1:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at ./App.tsx (bootstrap:856:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at ./node_modules/expo/AppEntry.js (AppEntry.js:1:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at 1 (enums.ts:42:1)
    at __webpack_require__ (bootstrap:789:1)
    at bootstrap:856:1
    at bootstrap:856:1

./node_modules/rn-navio/dist/index.js 16:10
Module parse failed: Unexpected token (16:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     // | Vars |
|     // ========
>     layout;
|     navRef;
|     navIsReadyRef;
console.<computed> @ index.js:1

Uncaught ReferenceError: process is not defined
    at 4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at 8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at 8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at e.onload (index.js:1:1)

node v16.18.1

[kanzitelli]

Hey @sumer-alhussein! Thanks for reporting the issue. I'll take a look into this but I think I know what causing this error.

[seanadkinson]

Any hints @kanzitelli ? Seeing the same issue, and wondering what you were thinking the cause was, so that I can help diagnose.

[kanzitelli]

Hey guys! Apologies for the late reply, super busy with the current project.

And as I can see the issue is the same as with rn-bounceable and Expo Web. You can read about it here -- https://github.com/kanzitelli/rn-bounceable#expo-web. And I think this is what causes the problem.

Can you try adding rn-navio to webpack.config.js among with rn-bounceable and if-component. So it should look something like below:

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {dangerouslyAddModulePathsToTranspile: ['rn-bounceable', '@kanzitelli/if-component', 'rn-navio']},
    },
    argv,
  );

  return config;
};

@seanadkinson I would appreciate your help with testing it!

[seanadkinson]

Yep, that looks like it fixes it!

[localjo]

After applying this fix, I also had to upgrade react-native-ui-lib to v6.27.3 using expo install react-native-ui-lib@latest. Otherwise I was running into this bug: wix/react-native-ui-lib#2407

[kanzitelli]

Closed by #35