search

NagariaHussain / doppio

A Frappe app (CLI) to magically setup single page applications and Vue/React powered desk pages on your custom Frappe apps.
MIT License
182 stars 74 forks source link

Custom page with react fails on `bench get-app` command #26

Open IMS94 opened 10 months ago

IMS94 commented 10 months ago

I used bench --site <site-name> add-custom-page --app <app-name> to create a custom page with React. When I commit my changes and try to get that app to another bench via bench get-app, it fails at the bench build --app <app> command.

Here's the complete output when I tried to install this app on a bench in frappe cloud. Note the lines like [ERROR] Could not resolve "react".

bench get-app blinds_app
Getting blinds_manufacturing_app
$ git clone file:///home/frappe/context/apps/blinds_app  --depth 1 --origin upstream
Cloning into 'blinds_app'...
Ignoring dependencies of file:///home/frappe/context/apps/blinds_app. To install dependencies use --resolve-deps
Installing blinds_app
$ /home/frappe/frappe-bench/env/bin/python -m pip install --quiet --upgrade -e /home/frappe/frappe-bench/apps/blinds_app
$ yarn install
yarn install v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > react-data-table-component@7.5.4" has unmet peer dependency "react@>= 16.8.3".
warning " > react-data-table-component@7.5.4" has unmet peer dependency "styled-components@>= 4".
[4/4] Building fresh packages...
Done in 2.38s.
$ bench build --app blinds_app
Linking /home/frappe/frappe-bench/apps/frappe/frappe/public to ./assets/frappe
Linking /home/frappe/frappe-bench/apps/frappe/node_modules to ./assets/frappe/node_modules
Linking /home/frappe/frappe-bench/apps/blinds_app/blinds_app/public to ./assets/blinds_app
Linking /home/frappe/frappe-bench/apps/blinds_app/node_modules to ./assets/blinds_app/node_modules
Linking /home/frappe/frappe-bench/apps/erpnext/erpnext/public to ./assets/erpnext
Linking /home/frappe/frappe-bench/apps/erpnext/node_modules to ./assets/erpnext/node_modules
Linking /home/frappe/frappe-bench/apps/builder/builder/public to ./assets/builder
Linking /home/frappe/frappe-bench/apps/builder/node_modules to ./assets/builder/node_modules
✔ Application Assets Linked

yarn run v1.22.19
$ node esbuild --production --apps blinds_app --run-build-command
✘ [ERROR] Could not resolve "react"

    ../blinds_app/blinds_app/public/js/blinds_dashboard/blinds_dashboard.bundle.jsx:1:23:
      1 │ import * as React from "react";
        ╵                        ~~~~~~~

  You can mark the path "react" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "react-dom/client"

    ../blinds_app/blinds_app/public/js/blinds_dashboard/blinds_dashboard.bundle.jsx:3:27:
      3 │ import { createRoot } from "react-dom/client";
        ╵                            ~~~~~~~~~~~~~~~~~~

  You can mark the path "react-dom/client" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "react"

    ../blinds_app/blinds_app/public/js/blinds_dashboard/App.tsx:1:23:
      1 │ import * as React from "react";
        ╵                        ~~~~~~~

  You can mark the path "react" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "react"

    ../blinds_app/blinds_app/public/js/blinds_dashboard/SalesOrderProgress.tsx:1:23:
      1 │ import * as React from "react";
        ╵                        ~~~~~~~

  You can mark the path "react" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] [plugin frappe-vue-style] Cannot read properties of undefined (reading 'outputs')

    /home/frappe/frappe-bench/apps/frappe/esbuild/frappe-vue-style.js:10:41:
      10 │       let files = get_files(result.metafile.outputs);
         ╵                                             ^

    at /home/frappe/frappe-bench/apps/frappe/esbuild/frappe-vue-style.js:10:42
    at /home/frappe/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:1052:21
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

  This error came from the "onEnd" callback registered here:

    /home/frappe/frappe-bench/apps/frappe/esbuild/frappe-vue-style.js:9:8:
      9 │     build.onEnd((result) => {
        ╵           ~~~~~

    at setup (/home/frappe/frappe-bench/apps/frappe/esbuild/frappe-vue-style.js:9:9)
    at handlePlugins (/home/frappe/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:855:23)

 ERROR  There were some problems during build

Error: Build failed with 5 errors:
../blinds_app/blinds_app/public/js/blinds_dashboard/App.tsx:1:23: ERROR: Could not resolve "react"
../blinds_app/blinds_app/public/js/blinds_dashboard/SalesOrderProgress.tsx:1:23: ERROR: Could not resolve "react"
../blinds_app/blinds_app/public/js/blinds_dashboard/blinds_dashboard.bundle.jsx:1:23: ERROR: Could not resolve "react"
../blinds_app/blinds_app/public/js/blinds_dashboard/blinds_dashboard.bundle.jsx:3:27: ERROR: Could not resolve "react-dom/client"
/home/frappe/frappe-bench/apps/frappe/esbuild/frappe-vue-style.js:10:41: ERROR: [plugin: frappe-vue-style] Cannot read properties of undefined (reading 'outputs')
    at failureErrorWithLog (/home/frappe/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:1624:15)
    at /home/frappe/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:1266:28
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Terminated
error Command failed with exit code 143.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Traceback (most recent call last):
  File "<frozen runpy>", line 198, in _run_module_as_main
  File "<frozen runpy>", line 88, in _run_code
  File "/home/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 114, in <module>
    main()
  File "/home/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 20, in main
    click.Group(commands=commands)(prog_name="bench")
  File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1157, in __call__
    return self.main(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1078, in main
    rv = self.invoke(ctx)
         ^^^^^^^^^^^^^^^^
  File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1688, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1688, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1434, in invoke
    return ctx.invoke(self.callback, **ctx.params)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 783, in invoke
    return __callback(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/frappe-bench/apps/frappe/frappe/commands/utils.py", line 72, in build
    bundle(
  File "/home/frappe/frappe-bench/apps/frappe/frappe/build.py", line 257, in bundle
    frappe.commands.popen(command, cwd=frappe_app_path, env=get_node_env(), raise_err=True)
  File "/home/frappe/frappe-bench/apps/frappe/frappe/commands/__init__.py", line 97, in popen
    raise subprocess.CalledProcessError(return_, command)
subprocess.CalledProcessError: Command 'yarn run production --apps blinds_app --run-build-command' returned non-zero exit status 143.
ERROR:
Traceback (most recent call last):
  File "/home/frappe/.local/bin/bench", line 8, in <module>
    sys.exit(cli())
             ^^^^^
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/cli.py", line 127, in cli
    bench_command()
  File "/home/frappe/.local/lib/python3.11/site-packages/click/core.py", line 1157, in __call__
    return self.main(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/.local/lib/python3.11/site-packages/click/core.py", line 1078, in main
    rv = self.invoke(ctx)
         ^^^^^^^^^^^^^^^^
  File "/home/frappe/.local/lib/python3.11/site-packages/click/core.py", line 1688, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/.local/lib/python3.11/site-packages/click/core.py", line 1434, in invoke
    return ctx.invoke(self.callback, **ctx.params)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/.local/lib/python3.11/site-packages/click/core.py", line 783, in invoke
    return __callback(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/commands/make.py", line 159, in get_app
    get_app(
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/app.py", line 444, in get_app
    app.install(verbose=verbose, skip_assets=skip_assets, restart_bench=restart_bench)
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/utils/render.py", line 126, in wrapper_fn
    return fn(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/app.py", line 242, in install
    install_app(
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/app.py", line 586, in install_app
    build_assets(bench_path=bench_path, app=app)
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/utils/bench.py", line 345, in build_assets
    exec_cmd(command, cwd=bench_path, env={"BENCH_DEVELOPER": "1"})
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/utils/__init__.py", line 158, in exec_cmd
    raise CommandFailedError
bench.exceptions.CommandFailedError
INFO: A newer version of bench is available: 5.16.0 → 5.19.0
executor failed running [/bin/sh -c bench get-app file:///home/frappe/context/apps/blinds_app `#stage-apps-blinds_app`]: exit code: 1
> [stage-0 28/30] RUN --mount=type=cache,target=/home/frappe/.cache,uid=1000,gid=1000 --mount=type=bind,source=apps/blinds_app,target=/home/frappe/context/apps/blinds_app bench get-app file:///home/frappe/context/apps/blinds_app `#stage-apps-blinds_app`:
executor failed running [/bin/sh -c bench get-app file:///home/frappe/context/apps/blinds_app `#stage-apps-blinds_app`]: exit code: 1
IMS94 commented 9 months ago

Adding a postinstall script like below to the app's package.json solves the issue.

{
  "scripts": {
    "postinstall": "cd <app_dir> && yarn install"
  }
}

We should probably add the above postinstall script when the custom page is being created.

NagariaHussain commented 9 months ago

Weird 🤔 , this should not be the case. The install should already install react deps.

this-gavagai commented 7 months ago

for what it's worth, I just ran into the same issue with a vue app. Thanks @IMS94 for posting your solution.

pboes commented 3 months ago

Might it be that the package.json is simply installed one directory too deep? On the react option, the package.json lies at //package.json, which is unlike the default place at /package.json, hence requiring an extra cd? In any case for me the solution posted by @IMS94 unfortunately doesn't work. Haven't found a solution yet. @IMS94 was there anything else you had to do? Is the package.json also at the extra depth? Cheers

pboes commented 3 months ago

Might it be that the package.json is simply installed one directory too deep? On the react option, the package.json lies at //package.json, which is unlike the default place at /package.json, hence requiring an extra cd? In any case for me the solution posted by @IMS94 unfortunately doesn't work. Haven't found a solution yet. @IMS94 was there anything else you had to do? Is the package.json also at the extra depth? Cheers

ok nevermind I figured it out. As I had my package.json in //package.json, the solution for me was to initiate a new yarn project at the app root and then add the above postinstall script to that (and no "build" or "dev" script), not touching the inner package.json.