nagariahussain / doppio Goto Github PK

Hi Hussain,

I know my issue isn't directly related to this project, but I tried setting up a SPA with React + Vite - by looking at your Vue + Vite example. Thank you!

I am able to run the React app, both on production (after bench update --build) as well as in live reload (yarn dev). However, my API calls to the backend encounter the CSRF Token Error while live reloading. The API calls work after building the application and serving it using bench start. I assume this is because the build files are generated when I run bench update --build and the Python context adds the CSRF token.

How do I make this work in live reload since that's critical to a great developer experience?

Thank you!

Hey @NagariaHussain,

I would like to know how I can use the resource manager of the doppio Vue template without Frappe UI.
In the Home.vue is this example:

export default {
  resources: {
	ping() {
	  return {
		method: "frappe.ping", // Method to call on backend
		onSuccess(d) {
		  alert(d);
		},
	  };
	},
  },
};

But I would like to use it like in Frappe-UI:

<script setup>
import { ref } from 'vue'
import { createResource } from 'frappe-ui'

const ping = createResource({
  url: 'ping',
  auto: true,
})
</script>

Is that possible?

The default Vite configuration adds "type": "module" to package.json. Refer here

This causes an error while starting the live server because proxyOptions is exported

One possible solution is to remove "type": "module" from package.json. Or we could export proxyOptions in a cjs file or as a standard export.

Traceback (most recent call last):
File "/home/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 68, in get_app_commands
app_command_module = importlib.import_module(app + '.commands')
File "/home/frappe/frappe-bench/env/lib/python3.5/importlib/init.py", line 126, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "", line 986, in _gcd_import
File "", line 969, in _find_and_load
File "", line 958, in _find_and_load_unlocked
File "", line 673, in _load_unlocked
File "", line 665, in exec_module
File "", line 222, in _call_with_frames_removed
File "/home/frappe/frappe-bench/apps/doppio/doppio/commands/init.py", line 2, in
from .spa_generator import SPAGenerator
File "/home/frappe/frappe-bench/apps/doppio/doppio/commands/spa_generator.py", line 17
self.spa_path: Path = self.app_path / self.spa_name
^
SyntaxError: invalid syntax

I think this might be a config issue. However, I wanted to see if this can be fixed in a simple way.
I installed the doppio and started my dev server. I see this when the request is sent to socket.io

{code: 5, message: "Unsupported protocol version"

Is there a fix for this?

When we create an SPA with react and tailwind enabled, following is the tailwind.config.ts file being created.

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note that the content is an empty array. But it should be:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note the "./src/**/*.{js,jsx,ts,tsx}" content (template paths)

I've created a SPA and it runs on the dev environment, but doesn't render anything on the browser /path when I yarn build

I don't know what I might have missed.

Hey @NagariaHussain ,

I am planning to create a similar Frappe app to setup a React SPA with Frappe. Should I contribute to this repository or would you recommend creating a new project (Frappe app) for React?

Not having license can prevent some users from using this project.

Hi, @NagariaHussain I loved this frappy app you guys have built. It's a very handy tool for building custom UI. However, I was wondering if we could add support for the NextJS framework.

If you wish I could work on this and raise a PR for the same.

When i try to create an app using add-spa command:
bench add-spa --app <app-name> [--tailwindcss]

it is throwing the below error:
bash: app-name: No such file or directory

When I check bench commands by running:
bench --help

it did show the that add-spa command under framework commands list:

Framework commands:
add-spa
add-system-manager Add a new system manager to a site
add-to-email-queue Add an email to the Email Queue
add-to-hosts Add site to hosts
backup Backup

next i installed it in my frappe bench site, i run de command bench add-spa --app , but console show that add-spa is not a command, but when i run bench --help, add-spa is show in commands list.

run in a docker container running debian:buster-slim as image

I have created a doppio react app for a shopping cart that is support to list items on the /shop page.

I tried loading the items using a React useEffect hook, it didn't work.

Ps: Nothing works on the useEffect Hook: alert, console.log etc.

@NagariaHussain @nikkothari22

We can add an option to use the Typescript starter templates for Vue or React (vue-ts/react-ts). We would have to make some changes to boilerplates and file names for this.

• Add flag for Typescript in CLI options
• Initialise Vite with vue-ts and react-ts templates if TS selected.
• For Vue - main.js will be main.ts in link_controller_files. (If TS selected)
• For React - App.jsx will be App.tsx in create_react_files. (If TS selected)
• vite.config.js will be vite.config.ts
• Update documentation

I created a react.js app and disabled csrf validation for development. Later when deployed to production, the csrf token validation failed. When investigated, the <script>window.csrf_token = '{{ csrf_token }}';</script> part was as it is and the {{ csrf_token }} part wasn't replaced with a valida value.

Then I changed it to frappe.session.csrf_token (https://frappeframework.com/docs/v14/user/en/api/jinja#frappesessioncsrf_token)

<script>window.csrf_token = '{{ frappe.session.csrf_token }}';</script>

and it worked as expected. Should the script be updated?

https://github.com/netchampfaris/frappe-ui-starter

All it should require is just a flag:

bench add-spa --app my-app --frappe-ui

I noticed that the add-desk-page command doesn't facilitate typescript or tailwind, Is there a reason for this?

Hi Hussain.

Is there any running sample application built with frappe + doppio?

Hello, I have created a React SPA within an app, and the website_route_rules are automatically set up in hooks as follows.:

-Frappe app name: haulster
-SPA name : frontend

-website_route_rules = [{'from_route': '/frontend/<path:app_path>', 'to_route': 'frontend'}]

-react-router-dom routes:

          <Routes>
            <Route path="/" exact element ={<Trip/>}/>
            <Route path="/fuel" exact element ={<FuelRequest/>}/>
            <Route path="/maintenance" exact element ={<MaintenanceRequest/>}/>
          </Routes>
        </Router>```

-Problem: None of those routes are being rendered on production that is returning a blank page. Yet in developer mode (```localhost```)  the pages are being rendered.


![prod_environment](https://user-images.githubusercontent.com/12731579/209992337-9d12d0a4-1d16-4352-ad62-8b6e08aa5119.png)
![dev_environment](https://user-images.githubusercontent.com/12731579/209992354-0fbeb277-dedd-46fb-8ab6-0decc1077164.png)

1. Proxy Options should be typescript file.
   

2. postinstall script not added.
   

Hi Hussain,

I tried to install doppio in my Frappe v13.49, but got the error:

$ bench get-app https://github.com/NagariaHussain/doppio
Getting doppio
$ git clone https://github.com/NagariaHussain/doppio --depth 1 --origin upstream
Cloning into 'doppio'...
remote: Enumerating objects: 40, done.
remote: Counting objects: 100% (40/40), done.
remote: Compressing objects: 100% (34/34), done.
remote: Total 40 (delta 0), reused 24 (delta 0), pack-reused 0
Receiving objects: 100% (40/40), 35.65 KiB | 936.00 KiB/s, done.
Ignoring dependencies of https://github.com/NagariaHussain/doppio. To install dependencies use --resolve-deps
Installing doppio
$ /opt/frappe/frappe-bench/env/bin/python -m pip install --quiet --upgrade -e /opt/frappe/frappe-bench/apps/doppio
ERROR: pip's dependency resolver does not currently take into account all the packages that are installed. This behaviour is the source of the following dependency conflicts.
frappe 13.51.3 requires Click~=7.1.2, but you have click 8.1.3 which is incompatible.

[notice] A new release of pip is available: 23.0.1 -> 23.1.2
[notice] To update, run: pip install --upgrade pip
$ 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...
[4/4] 🔨 Building fresh packages...
✨ Done in 8.41s.
$ bench build --app doppio
Traceback (most recent call last):
File "/opt/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 73, in get_app_commands
app_command_module = importlib.import_module(app + ".commands")
File "/opt/homebrew/Cellar/[email protected]/3.10.11/Frameworks/Python.framework/Versions/3.10/lib/python3.10/importlib/init.py", line 126, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "", line 1050, in _gcd_import
File "", line 1027, in _find_and_load
File "", line 1006, in _find_and_load_unlocked
File "", line 688, in _load_unlocked
File "", line 883, in exec_module
File "", line 241, in _call_with_frames_removed
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/init.py", line 119, in
commands = get_commands()
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/init.py", line 112, in get_commands
from .site import commands as site_commands
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/site.py", line 665, in
def uninstall(context, app, dry_run, yes, no_backup, force):
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/decorators.py", line 308, in decorator
_param_memo(f, OptionClass(param_decls, **option_attrs))
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 2495, in init
super().init(param_decls, type=type, multiple=multiple, **attrs)
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 2112, in init
raise ValueError(
ValueError: 'default' must be a list when 'multiple' is true.
Traceback (most recent call last):
File "/opt/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 73, in get_app_commands
app_command_module = importlib.import_module(app + ".commands")
File "/opt/homebrew/Cellar/[email protected]/3.10.11/Frameworks/Python.framework/Versions/3.10/lib/python3.10/importlib/init.py", line 126, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "", line 1050, in _gcd_import
File "", line 1027, in _find_and_load
File "", line 1006, in _find_and_load_unlocked
File "", line 688, in _load_unlocked
File "", line 883, in exec_module
File "", line 241, in _call_with_frames_removed
File "/opt/frappe/frappe-bench/apps/erpnext/erpnext/commands/init.py", line 6, in
from frappe.commands import get_site, pass_context
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/init.py", line 119, in
commands = get_commands()
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/init.py", line 112, in get_commands
from .site import commands as site_commands
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/site.py", line 665, in
def uninstall(context, app, dry_run, yes, no_backup, force):
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/decorators.py", line 308, in decorator
_param_memo(f, OptionClass(param_decls, **option_attrs))
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 2495, in init
super().init(param_decls, type=type, multiple=multiple, **attrs)
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 2112, in init
raise ValueError(
ValueError: 'default' must be a list when 'multiple' is true.
Usage: bench [OPTIONS] COMMAND [ARGS]...
Try 'bench --help' for help.

Error: No such command 'build'.
ERROR:
subprocess.CalledProcessError: Command 'bench build --app doppio' returned non-zero exit status 2.

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
File "/opt/homebrew/bin/bench", line 8, in
sys.exit(cli())
File "/opt/homebrew/lib/python3.10/site-packages/bench/cli.py", line 127, in cli
bench_command()
File "/Users/administrator/Library/Python/3.10/lib/python/site-packages/click/core.py", line 1130, in call
return self.main(*args, **kwargs)
File "/Users/administrator/Library/Python/3.10/lib/python/site-packages/click/core.py", line 1055, in main
rv = self.invoke(ctx)
File "/Users/administrator/Library/Python/3.10/lib/python/site-packages/click/core.py", line 1657, in invoke
return _process_result(sub_ctx.command.invoke(sub_ctx))
File "/Users/administrator/Library/Python/3.10/lib/python/site-packages/click/core.py", line 1404, in invoke
return ctx.invoke(self.callback, **ctx.params)
File "/Users/administrator/Library/Python/3.10/lib/python/site-packages/click/core.py", line 760, in invoke
return __callback(*args, **kwargs)
File "/opt/homebrew/lib/python3.10/site-packages/bench/commands/make.py", line 159, in get_app
get_app(
File "/opt/homebrew/lib/python3.10/site-packages/bench/app.py", line 444, in get_app
app.install(verbose=verbose, skip_assets=skip_assets, restart_bench=restart_bench)
File "/opt/homebrew/lib/python3.10/site-packages/bench/utils/render.py", line 126, in wrapper_fn
return fn(*args, **kwargs)
File "/opt/homebrew/lib/python3.10/site-packages/bench/app.py", line 242, in install
install_app(
File "/opt/homebrew/lib/python3.10/site-packages/bench/app.py", line 586, in install_app
build_assets(bench_path=bench_path, app=app)
File "/opt/homebrew/lib/python3.10/site-packages/bench/utils/bench.py", line 351, in build_assets
exec_cmd(command, cwd=bench_path, env={"BENCH_DEVELOPER": "1"})
File "/opt/homebrew/lib/python3.10/site-packages/bench/utils/init.py", line 158, in exec_cmd
raise CommandFailedError from subprocess.CalledProcessError(return_code, cmd)
bench.exceptions.CommandFailedError
(env) Charles-MBA:frappe-bench administrator$ bench add-frappe-ui
Traceback (most recent call last):
File "/opt/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 73, in get_app_commands
app_command_module = importlib.import_module(app + ".commands")
File "/opt/homebrew/Cellar/[email protected]/3.10.11/Frameworks/Python.framework/Versions/3.10/lib/python3.10/importlib/init.py", line 126, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "", line 1050, in _gcd_import
File "", line 1027, in _find_and_load
File "", line 1006, in _find_and_load_unlocked
File "", line 688, in _load_unlocked
File "", line 883, in exec_module
File "", line 241, in _call_with_frames_removed
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/init.py", line 119, in
commands = get_commands()
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/init.py", line 112, in get_commands
from .site import commands as site_commands
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/site.py", line 665, in
def uninstall(context, app, dry_run, yes, no_backup, force):
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/decorators.py", line 308, in decorator
_param_memo(f, OptionClass(param_decls, **option_attrs))
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 2495, in init
super().init(param_decls, type=type, multiple=multiple, **attrs)
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 2112, in init
raise ValueError(
ValueError: 'default' must be a list when 'multiple' is true.
Traceback (most recent call last):
File "/opt/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 73, in get_app_commands
app_command_module = importlib.import_module(app + ".commands")
File "/opt/homebrew/Cellar/[email protected]/3.10.11/Frameworks/Python.framework/Versions/3.10/lib/python3.10/importlib/init.py", line 126, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "", line 1050, in _gcd_import
File "", line 1027, in _find_and_load
File "", line 1006, in _find_and_load_unlocked
File "", line 688, in _load_unlocked
File "", line 883, in exec_module
File "", line 241, in _call_with_frames_removed
File "/opt/frappe/frappe-bench/apps/erpnext/erpnext/commands/init.py", line 6, in
from frappe.commands import get_site, pass_context
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/init.py", line 119, in
commands = get_commands()
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/init.py", line 112, in get_commands
from .site import commands as site_commands
File "/opt/frappe/frappe-bench/apps/frappe/frappe/commands/site.py", line 665, in
def uninstall(context, app, dry_run, yes, no_backup, force):
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/decorators.py", line 308, in decorator
_param_memo(f, OptionClass(param_decls, **option_attrs))
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 2495, in init
super().init(param_decls, type=type, multiple=multiple, **attrs)
File "/opt/frappe/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 2112, in init
raise ValueError(
ValueError: 'default' must be a list when 'multiple' is true.
Dashboard Name [frontend]: ^CAborted!

Hi,
nice tool!

I tried it for creating a custom desk page. The command itself works well, a new custom page is registered, the App.jsx file gets bundled and can be viewed.

But I got stuck when I try to rebundle or watch on changes in App.jsx file. How should this happen? I cannot find any reference to the created files or folders.

@NagariaHussain can you help me with the issue?

/frappe-bench$ bench add-spa
Dashboard Name [dashboard]:
App Name: demo_app
Which framework do you want to use? (vue, react) [vue]: vue
Configure TypeScript? [y/N]: N
Generating spa...
Scafolding vue project...
Traceback (most recent call last):
File "/usr/lib/python3.10/runpy.py", line 196, in _run_module_as_main
return _run_code(code, main_globals, None,
File "/usr/lib/python3.10/runpy.py", line 86, in _run_code
exec(code, run_globals)
File "/home/ubuntu/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 114, in
main()
File "/home/ubuntu/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 20, in main
click.Group(commands=commands)(prog_name="bench")
File "/home/ubuntu/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 1157, in call
return self.main(*args, **kwargs)
File "/home/ubuntu/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 1078, in main
rv = self.invoke(ctx)
File "/home/ubuntu/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 1688, in invoke
return _process_result(sub_ctx.command.invoke(sub_ctx))
File "/home/ubuntu/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 1688, in invoke
return _process_result(sub_ctx.command.invoke(sub_ctx))
File "/home/ubuntu/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 1434, in invoke
return ctx.invoke(self.callback, **ctx.params)
File "/home/ubuntu/frappe-bench/env/lib/python3.10/site-packages/click/core.py", line 783, in invoke
return __callback(*args, **kwargs)
File "/home/ubuntu/frappe-bench/apps/doppio/doppio/commands/init.py", line 35, in generate_spa
generator.generate_spa()
File "/home/ubuntu/frappe-bench/apps/doppio/doppio/commands/spa_generator.py", line 34, in generate_spa
self.initialize_vue_vite_project()
File "/home/ubuntu/frappe-bench/apps/doppio/doppio/commands/spa_generator.py", line 140, in initialize_vue_vite_proje
ct
subprocess.run(
File "/usr/lib/python3.10/subprocess.py", line 503, in run
with Popen(*popenargs, **kwargs) as process:
File "/usr/lib/python3.10/subprocess.py", line 971, in init
self._execute_child(args, executable, preexec_fn, close_fds,
File "/usr/lib/python3.10/subprocess.py", line 1863, in _execute_child
raise child_exception_type(errno_num, err_msg, err_filename)
FileNotFoundError: [Errno 2] No such file or directory: PosixPath('../apps/demo_app')

Frappe Framework: v15.6.1 (version-15)
$ npm --version
10.2.3
$ node --version
v18.19.0

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 " > [email protected]" has unmet peer dependency "react@>= 16.8.3".
warning " > [email protected]" 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

Hi @NagariaHussain ,

We've created the custom desk page using Doppio, now page is showing default dummy text.

We want to use DataTable or create custom form inside that page using React, but we don't know how we should get the data from frappe for that.

For Example, lets say we want to use any DataTable plugin to render the data using React in that case how should we get the fields info that we defined while creating doctype and use it inside react component. If you can help with that will be great hepful for us.

If you have done something like that then please provide the code sample.

I have react project build on Next.js and i want to add my site in my custom app