[Regression] [macOS, tizen, webOS] rnv/template-starter@1.0.0-canary.1 cannot run (RNV new project)

[GabrieleKaceviciute]

Describe the bug
Can't run/build/export template on macOS, tizen, tizenmobile, tizenwatch, webos simulators and devices

To Reproduce
Steps to reproduce the behavior:

1. Install rnv@1.0.0-canary.1 with npm globally
2. create new project with rnv new and choose rnv/template-starter with same version
3. do npx rnv run -p macos / tizen / tizen --hosted / tizenmobile / tizenwatch/ webos/ webos --hosted

Error: Cannot find module 'babel-loader'
Require stack:
- /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-webpack/lib/config/webpack.config.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-webpack/lib/scripts/start.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-webpack/lib/index.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-tizen/lib/runner.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-tizen/lib/index.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/engine-core/lib/common.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/engine-core/lib/tasks/task.rnv.platform.configure.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/engine-core/lib/index.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/rnv/lib/runner.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/rnv/lib/index.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/cli/lib/index.js
- /Users/gabriele/Desktop/tests/bimbam/node_modules/rnv/bin/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Function.resolve (node:internal/modules/cjs/helpers:125:19)
    at module.exports (/Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-webpack/src/config/webpack.config.js:389:45)
    at /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-webpack/src/scripts/start.js:56:24
    at new Promise (<anonymous>)
    at /Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-webpack/src/scripts/start.js:30:5
    at step (/Users/gabriele/Desktop/tests/bimbam/node_modules/tslib/tslib.js:195:27)
    at Object.next (/Users/gabriele/Desktop/tests/bimbam/node_modules/tslib/tslib.js:176:57)
    at /Users/gabriele/Desktop/tests/bimbam/node_modules/tslib/tslib.js:169:75
    at new Promise (<anonymous>) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-webpack/lib/config/webpack.config.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-webpack/lib/scripts/start.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-webpack/lib/index.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-tizen/lib/runner.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/sdk-tizen/lib/index.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/engine-core/lib/common.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/engine-core/lib/tasks/task.rnv.platform.configure.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/engine-core/lib/index.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/rnv/lib/runner.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/rnv/lib/index.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/@rnv/cli/lib/index.js',
    '/Users/gabriele/Desktop/tests/bimbam/node_modules/rnv/bin/index.js'
  ]
}

 $ rnv run -p macos - Done! 🚀
┌──────────────────────────────────────────────────────────────────────────────┐
│  🚀  SUMMARY | 10/5/2023, 4:04:17 PM                                         │
│  $ rnv run -p macos                                                          │
├──────────────────────────────────────────────────────────────────────────────┤
│  ReNative Version: 1.0.0-canary.1                                            │
│  Project Name ($package.name): bimbam                                        │
│  Project Version ($package.version): 0.1.0                                   │
│  Workspace ($.workspaceID): rnv                                              │
│  Platform (-p): macos                                                        │
│  Engine ($.platforms.macos.engine): engine-rn-electron                       │
│  Template: @rnv/template-starter@1.0.0-canary.1                              │
│  App Config (-c): app                                                        │
│  Build Scheme (-s): debug                                                    │
│  Supported Platforms: macos                                                  │
│  Env Info: darwin | x64 | node v18.18.0                                      │
│  Executed Time: 0h:0m:1s:79ms                                                │
│                                                                              │
│  All good as 🦄                                                              │
│                                                                              │
│  Project location:                                                           │
│  ./platformBuilds/app_macos                                                  │
└──────────────────────────────────────────────────────────────────────────────┘
➜  ~/Desktop/tests/bimbam

Desktop (please complete the following information):

• OS: macOS Ventura 13.5.2
• Node Version 18.18.0
• RNV Version 1.0.0-canary.1

[GabrieleKaceviciute]

Macos, tizen, webos issue - not reproduced on 1.0.0-canary.8
Tizenwatch, tizenmobile issue moved to separate ticket - #1246

[GabrieleKaceviciute]

1.0.0-rc.4

• npx rnv run -p macos -> white blank screen opens on electron and error appears on cli ->
  NOTE - This only happens the first time you run a new project doesn’t matter on which platform (macos/tizen/tizen --hosted/tizenwatch/webos --hosted). After that, the second time - it works fine.

[ info ] [run] Your macos devServerHost 127.0.0.1 at port 8086 is not running. Starting it up for you...
[ task ] [run] _runWebBrowser[1] ip:127.0.0.1 port:8086 openBrowser:false
┌──────────────────────────────────────────────────────────────────────────────┐
│  🚀  BUNDLER STARTED | 12/19/2023, 5:24:41 PM                                │
│  $ npx rnv run -p macos                                                      │
├──────────────────────────────────────────────────────────────────────────────┤
│  ReNative Version: 1.0.0-rc.4                                                │
│  Project Name ($package.name): zxc                                           │
│  Project Version ($package.version): 0.1.0                                   │
│  Workspace ($.workspaceID): rnv                                              │
│  Platform (-p): macos                                                        │
│  Engine ($.platforms.macos.engine): engine-rn-electron                       │
│  Template: @rnv/template-starter@1.0.0-rc.4                                  │
│  App Config (-c): app                                                        │
│  Build Scheme (-s): debug                                                    │
│  Supported Platforms: macos                                                  │
│  Env Info: darwin | x64 | node v18.14.2                                      │
│  Executed Time: 0h:0m:54s:846ms                                              │
│                                                                              │
│ [ success ] [project configure] /react-native-gesture-handler/ios/Handlers/RNHoverHandler.m requires override by: /rnv/pluginTemplates/react-native-gesture-handler/overrides.json. FIXING...DONE
│ [ success ] [project configure] /react-native-gesture-handler/ios/RNGestureHandlerButtonComponentView.mm requires override by: /rnv/pluginTemplates/react-native-gesture-handler/overrides.json. FIXING...DONE
│ [ success ] [project configure] /@react-native-community/cli-platform-ios/build/tools/listIOSDevices.js requires override by: /rnv/pluginTemplates/@react-native-community/cli-platform-ios/overrides@11.3.7.json. FIXING...DONE
│ [ success ] [project configure] /@react-native-community/cli-platform-ios/build/tools/findMatchingSimulator.js requires override by: /rnv/pluginTemplates/@react-native-community/cli-platform-ios/overrides@11.3.7.json. FIXING...DONE
│ [ success ] [project configure] /@react-native-community/cli-platform-ios/build/commands/runIOS/index.js requires override by: /rnv/pluginTemplates/@react-native-community/cli-platform-ios/overrides@11.3.7.json. FIXING...DONE
│                                                                              │
│  Project location:                                                           │
│  ./platformBuilds/app_macos                                                  │
└──────────────────────────────────────────────────────────────────────────────┘
[ task ] [run] _runWebDevServer[1]
[ task ] [run] parsePlugins[4]
(node:36566) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:36566) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

Failed to compile.

file:///Users/gabriele/Desktop/tests/zxc/node_modules/find-cache-dir/index.js:5
import {packageDirectorySync} from 'pkg-dir';
        ^^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'packageDirectorySync' not found. The requested module 'pkg-dir' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'pkg-dir';
const {packageDirectorySync} = pkg;
asset static/js/bundle.js 40.7 KiB [emitted] (name: main) 1 related asset
asset index.html 1.7 KiB [emitted]
asset asset-manifest.json 190 bytes [emitted]
runtime modules 24.6 KiB 7 modules
modules with errors 117 bytes [errors]
  ./node_modules/@rnv/sdk-webpack/node_modules/@pmmmwh/react-refresh-webpack-plugi...(truncated) 39 bytes [built] [code generated] [1 error]
  ./node_modules/webpack/hot/dev-server.js 39 bytes [built] [code generated] [1 error]
  ./index.js 39 bytes [built] [code generated] [1 error]

ERROR in ./index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
file:///Users/gabriele/Desktop/tests/zxc/node_modules/find-cache-dir/index.js:5
import {packageDirectorySync} from 'pkg-dir';
        ^^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'packageDirectorySync' not found. The requested module 'pkg-dir' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'pkg-dir';
const {packageDirectorySync} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:190:5)

ERROR in ./node_modules/webpack/hot/dev-server.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
file:///Users/gabriele/Desktop/tests/zxc/node_modules/find-cache-dir/index.js:5
import {packageDirectorySync} from 'pkg-dir';
        ^^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'packageDirectorySync' not found. The requested module 'pkg-dir' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'pkg-dir';
const {packageDirectorySync} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:190:5)

ERROR in ./node_modules/@rnv/sdk-webpack/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
file:///Users/gabriele/Desktop/tests/zxc/node_modules/find-cache-dir/index.js:5
import {packageDirectorySync} from 'pkg-dir';
        ^^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'packageDirectorySync' not found. The requested module 'pkg-dir' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'pkg-dir';
const {packageDirectorySync} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:190:5)

webpack 5.89.0 compiled with 3 errors in 291 ms
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
[ task ] [run] _runElectronSimulator:macos[1]
✔ Executing: node /Users/gabriele/Desktop/tests/zxc/node_modules/electron/cli.js /Users/gabriele/Desktop/tests/zxc/platformBuilds/app_macos/main.js

No issues found.

*webos not tested - emulator issue