[Mobile] yarn serve-web build fails due to import resolution error (Folder screen)

Development
1

Hi everyone,
I’m M Hassaan Saleem, and I’ve been setting up the development environment packages/app-mobile on Windows 11. I ran into a module resolution error when trying to run the web version using yarn serve-web. Yesterday, this was working fine, but today it gives these errors (see logs).

MY ANALYSIS:

That error references root.js, which don't exist in the repo. I realized this is the transpiled in-memory artifact of root.tsx.

Any help would be appreciated. THANKS!
———————————————————————————————————————————

PS D:\Open Source\joplin\packages\app-mobile> yarn serve-web
*[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: http://localhost:8088/, http://[::1]:8088/
[webpack-dev-server] On Your Network (IPv4): http://172.17.160.1:8088/
[webpack-dev-server] Content not from webpack is served from './web/public/' directory
asset serviceWorker.bundle.js 129 KiB [emitted] (name: serviceWorker)
runtime modules 24.2 KiB 8 modules
modules by path ./node_modules/ 71.9 KiB
modules by path ./node_modules/webpack-dev-server/client/ 55.6 KiB 8 modules
modules by path ./node_modules/webpack/hot/.js 3.45 KiB
./node_modules/webpack/hot/dev-server.js 1.37 KiB [built] [code generated]
./node_modules/webpack/hot/log.js 1.01 KiB [built] [code generated]

  • 2 modules
    modules by path ./node_modules/@babelbabel/runtime/helpers/*.js 915 bytes
    ./node_mod@babelles/@babel/runtime/helpers/interopRequireDefault.js 214 bytes [built] [code generated]
    ./nod@babel_modules/@babel/runtime/helpers/asyncToGenerator.js 701 bytes [built] [code generated]
    ./node_modules/events/events.js 9.23 KiB [built] [code generated]
    ./node_modules/ansi-html-community/index.js 2.67 KiB [built] [code generated]
    modules by path ./web/ 8.59 KiB
    ./web/serviceWorker.ts 8.57 KiB [built] [code generated]
    ./web/mocks/empty.js 19 bytes [built] [code generated]
    webpack 5.97.1 compiled successfully in 2115 ms
    assets by info 4.3 MiB [immutable]
    assets by path *.ttf 3.41 MiB
    asset 1fcc36272ea3e53d0031.ttf 1.25 MiB [emitted] [immutable] [from@react-native-vector-icons node_modules/@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf] (auxiliary name: app)
  • 6 assets
    assets by path *.png 2.6 KiB
    asset 776172e3164fd63761b6.png 492 bytes [emitted] [immutable] [from: node_modules/react-native-dropdownalert/assets/error.png] (auxiliary name: app)
  • 5 assets
    asset 4df5e7af1d8a6b183755.wasm 917 KiB [e@sqlite.orgitted] [immutable] [from: node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm] (auxiliary name: app) (auxiliary id hint: vendors)
    assets by path *.js 25.5 MiB
    assets by chunk 1.14 MiB (id hint: vendors)
    asset vendors-node_modules_buffer_index_js-node_modules_md5_md5_js-node_modules_path-browserify_ind-4122c9.bundle.js 579 KiB [emitted] (id hint: vendors)
    asset vendors-node_modules_sqlite_org_sqlite-wasm_sqlite-wasm_jswasm_sqlite3-worker1-bundler-friendly_mjs.bundle.js 526 KiB [emitted] (id hint: vendors)
    asset vendors-node_modules_sqlite_org_sqlite-wasm_sqlite-wasm_jswasm_sqlite3-opfs-async-proxy_js.bundle.js 63 KiB [emitted] (id hint: vendors)
    asset app.bundle.js 24.2 MiB [emitted] (name: app)
    asset utils_fs-driver_fs-driver-rn_web_worker_ts-utils_node_modules_moment_locale_sync_recursive_.bundle.js 116 KiB [emitted]
    runtime modules 104 KiB 46 modules
    modules by path ../ 11.3 MiB 2044 modules
    modules by path ./ 9.33 MiB (javascript) 4.3 MiB (asset) 1105 modules
    @aws-sdk/signature-v4-crt (ignored) 15 bytes [optional] [built] [code generated]
    util (ignored) 15 bytes [built] [code generated]
    fs (ignored) 15 bytes [optional] [built] [code generated]
    util (ignored) 15 bytes [built] [code generated]
    util (ignored) 15 bytes [built] [code generated]
    util (ignored) 15 bytes [built] [code generated]
    ERROR in ./root.js 1:3449-3490
    Module not found: Error: Can't resolve './components/screens/folder.js' in 'D:\Open Source\joplin\packages\app-mobile'
    resolve './components/screens/folder.js' in 'D:\Open Source\joplin\packages\app-mobile'
    using description file: D:\Open Source\joplin\packages\app-mobile\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\Open Source\joplin\packages\app-mobile\package.json (relative path: ./components/screens/folder.js)
    no extension
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js doesn't exist
    .web.js
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.web.js doesn't exist
    .js
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.js doesn't exist
    .web.ts
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.web.ts doesn't exist
    .ts
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.ts doesn't exist
    .web.mjs
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.web.mjs doesn't exist
    .mjs
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.mjs doesn't exist
    .web.tsx
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.web.tsx doesn't exist
    .tsx
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.tsx doesn't exist
    .web.jsx
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.web.jsx doesn't exist
    .jsx
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.jsx doesn't exist
    .wasm
    Field 'browser' doesn't contain a valid alias configuration
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js.wasm doesn't exist
    as directory
    D:\Open Source\joplin\packages\app-mobile\components\screens\folder.js doesn't exist
    @ ./index.web.ts 1:366-383
    webpack 5.97.1 compiled with 1 error in 9978 ms
2

Hi, I didn't build the mobile app, but according to Building the applications | Joplin you should avoid spaces in the project path.

Make sure the path to the project directory does not contain spaces or the build may fail.

1 Like
3

Does re-running yarn tsc or yarn watch from packages/app-mobile help? yarn tsc and yarn watch are responsible for transpiling the .ts/.tsx files to .js files and folder.js was recently renamed and converted to TypeScript.

1 Like
4

Thanks!

1 Like
5

Thanks for help.
Can u plz guide that should we ask maintainer to first assign the issue and then work on that or just open the pr?
(I wasn’t able to find this in guidelines).

6

Yes, please. We usually don't assign issues, except to maintainers.

1 Like