Importing Frappe UI in desk page Vue file breaks the build

[RanaOsamaAsif]

Hello, I'd love to use Frappe UI when building my custom desk page.

However, importing frappe-ui in the default App.vue generated by doppio does not work. Please see the attached import that I'm writing:

import { ref, onMounted } from "vue";
import { Button, LoadingText, createResource } from 'frappe-ui'

I'm doing this in development mode when 'bench start' is running in the terminal. When I save the code with the frappe-ui import the following errors are shown in the terminal where bench is running. It seems like the build framework used for desk page doesn't work with frappe-ui's importing.

How to fix this? Any help would be great!

▲ [WARNING] "import.meta" is not available in the configured target environment ("es2017") and will be empty [empty-import-meta]
14:30:26 watch.1 |
14:30:26 watch.1 | ../wg_core/node_modules/frappe-ui/src/utils/socketio.js:5:17:
14:30:26 watch.1 | 5 │ let siteName = import.meta.env.DEV ? host : window.site_name
14:30:26 watch.1 | ╵ ~~~~~~~~~~~
14:30:26 watch.1 |
14:30:26 watch.1 | ✘ [ERROR] [plugin vue] [@vue/compiler-sfc] No fs option provided to compileScript in non-Node environment. File system access is required for resolving imported types.
14:30:26 watch.1 |
14:30:26 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/DatePicker/DateRangePicker.vue
14:30:26 watch.1 | 134| import type { DatePickerEmits, DatePickerProps } from './DatePicker'
14:30:26 watch.1 | 135|
14:30:26 watch.1 | 136| const props = defineProps()
14:30:26 watch.1 | | ^^^^^^^^^^^^^^^
14:30:26 watch.1 | 137| const emit = defineEmits()
14:30:26 watch.1 | 138|
14:30:26 watch.1 |
14:30:26 watch.1 | ../wg_core/node_modules/frappe-ui/src/index.js:12:43:
14:30:26 watch.1 | 12 │ ...teRangePicker } from './components/DatePicker/DateRangePicker.vue'
14:30:26 watch.1 | ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
14:30:26 watch.1 |
14:30:26 watch.1 | This error came from the "onLoad" callback registered here:
14:30:26 watch.1 |
14:30:26 watch.1 | node_modules/esbuild-plugin-vue3/dist/index.js:217:34:
14:30:26 watch.1 | 217 │ ... build.onLoad({ filter: /.vue$/ }, funct...
14:30:26 watch.1 | ╵ ~~~~~~
14:30:26 watch.1 |
14:30:26 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:217:35
14:30:26 watch.1 | at step (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:67:23)
14:30:26 watch.1 | at Object.next (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:48:53)
14:30:26 watch.1 | at fulfilled (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:39:58)
14:30:26 watch.1 |
14:30:26 watch.1 | ✘ [ERROR] [plugin vue] [@vue/compiler-sfc] No fs option provided to compileScript in non-Node environment. File system access is required for resolving imported types.
14:30:26 watch.1 |
14:30:26 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/DatePicker/DatePicker.vue
14:30:26 watch.1 | 139| import type { DatePickerEmits, DatePickerProps } from './DatePicker'
14:30:26 watch.1 | 140|
14:30:26 watch.1 | 141| const props = defineProps()
14:30:26 watch.1 | | ^^^^^^^^^^^^^^^
14:30:26 watch.1 | 142| const emit = defineEmits()
14:30:26 watch.1 | 143|
14:30:26 watch.1 |
14:30:26 watch.1 | ../wg_core/node_modules/frappe-ui/src/index.js:10:38:
14:30:26 watch.1 | 10 │ ...ault as DatePicker } from './components/DatePicker/DatePicker.vue'
14:30:26 watch.1 | ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
14:30:26 watch.1 |
14:30:26 watch.1 | This error came from the "onLoad" callback registered here:
14:30:26 watch.1 |
14:30:26 watch.1 | node_modules/esbuild-plugin-vue3/dist/index.js:217:34:
14:30:26 watch.1 | 217 │ ... build.onLoad({ filter: /.vue$/ }, funct...
14:30:26 watch.1 | ╵ ~~~~~~
14:30:26 watch.1 |
14:30:26 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:217:35
14:30:26 watch.1 | at step (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:67:23)
14:30:26 watch.1 | at Object.next (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:48:53)
14:30:26 watch.1 | at fulfilled (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:39:58)
14:30:26 watch.1 |
14:30:26 watch.1 | ✘ [ERROR] [plugin vue] [@vue/compiler-sfc] No fs option provided to compileScript in non-Node environment. File system access is required for resolving imported types.
14:30:26 watch.1 |
14:30:26 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/DatePicker/DateTimePicker.vue
14:30:26 watch.1 | 202| import type { DatePickerEmits, DatePickerProps } from './DatePicker'
14:30:26 watch.1 | 203|
14:30:26 watch.1 | 204| const props = defineProps()
14:30:26 watch.1 | | ^^^^^^^^^^^^^^^
14:30:26 watch.1 | 205| const emit = defineEmits()
14:30:26 watch.1 | 206|
14:30:26 watch.1 |
14:30:26 watch.1 | ../wg_core/node_modules/frappe-ui/src/index.js:11:42:
14:30:26 watch.1 | 11 │ ...DateTimePicker } from './components/DatePicker/DateTimePicker.vue'
14:30:26 watch.1 | ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
14:30:26 watch.1 |
14:30:26 watch.1 | This error came from the "onLoad" callback registered here:
14:30:26 watch.1 |
14:30:26 watch.1 | node_modules/esbuild-plugin-vue3/dist/index.js:217:34:
14:30:26 watch.1 | 217 │ ... build.onLoad({ filter: /.vue$/ }, funct...
14:30:26 watch.1 | ╵ ~~~~~~
14:30:26 watch.1 |
14:30:26 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:217:35
14:30:26 watch.1 | at step (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:67:23)
14:30:26 watch.1 | at Object.next (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:48:53)
14:30:26 watch.1 | at fulfilled (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:39:58)
14:30:26 watch.1 |
14:30:27 watch.1 | ✘ [ERROR] [plugin vue] Error parsing JavaScript expression: Unexpected token, expected "," (3:47)
14:30:27 watch.1 |
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/Checkbox.vue:20:0:
14:30:27 watch.1 | 20 │
14:30:27 watch.1 | ╵ ^
14:30:27 watch.1 |
14:30:27 watch.1 | (e) =>
14:30:27 watch.1 | $emit('update:modelValue', (e.target as HTMLInputElement).checked)
14:30:27 watch.1 |
14:30:27 watch.1 |
14:30:27 watch.1 | The plugin "vue" was triggered by this import
14:30:27 watch.1 |
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/Checkbox.vue:1:154:
14:30:27 watch.1 | 1 │ ...der } from "/Users/osama/waseela/frappe-bench/apps/wg_core/node_...
14:30:27 watch.1 | ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
14:30:27 watch.1 |
14:30:27 watch.1 | ✘ [ERROR] [plugin vue] Missing template
14:30:27 watch.1 |
14:30:27 watch.1 | node_modules/esbuild-plugin-vue3/dist/index.js:291:54:
14:30:27 watch.1 | 291 │ ... throw new Error("Missing template");
14:30:27 watch.1 | ╵ ^
14:30:27 watch.1 |
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:291:55
14:30:27 watch.1 | at step (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:67:23)
14:30:27 watch.1 | at Object.next (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:48:53)
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:42:71
14:30:27 watch.1 | at new Promise ()
14:30:27 watch.1 | at _awaiter (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:38:12)
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:284:172
14:30:27 watch.1 | at AsyncCache.get (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/utils.js:129:20)
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:284:118
14:30:27 watch.1 | at callback (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:993:34)
14:30:27 watch.1 |
14:30:27 watch.1 | This error came from the "onLoad" callback registered here:
14:30:27 watch.1 |
14:30:27 watch.1 | node_modules/esbuild-plugin-vue3/dist/index.js:284:34:
14:30:27 watch.1 | 284 │ ... build.onLoad({ filter: /.*/, namespace: ...
14:30:27 watch.1 | ╵ ~~~~~~
14:30:27 watch.1 |
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:284:35
14:30:27 watch.1 | at step (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:67:23)
14:30:27 watch.1 | at Object.next (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:48:53)
14:30:27 watch.1 | at fulfilled (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:39:58)
14:30:27 watch.1 |
14:30:27 watch.1 | The plugin "vue" was triggered by this import
14:30:27 watch.1 |
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/FeatherIcon.vue:1:157:
14:30:27 watch.1 | 1 │ ...der } from "/Users/osama/waseela/frappe-bench/apps/wg_core/node...
14:30:27 watch.1 | ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
14:30:27 watch.1 |
14:30:27 watch.1 | ✘ [ERROR] [plugin vue] Missing template
14:30:27 watch.1 |
14:30:27 watch.1 | node_modules/esbuild-plugin-vue3/dist/index.js:291:54:
14:30:27 watch.1 | 291 │ ... throw new Error("Missing template");
14:30:27 watch.1 | ╵ ^
14:30:27 watch.1 |
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:291:55
14:30:27 watch.1 | at step (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:67:23)
14:30:27 watch.1 | at Object.next (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:48:53)
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:42:71
14:30:27 watch.1 | at new Promise ()
14:30:27 watch.1 | at awaiter (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:38:12)
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:284:172
14:30:27 watch.1 | at AsyncCache.get (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/utils.js:129:20)
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:284:118
14:30:27 watch.1 | at callback (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:993:34)
14:30:27 watch.1 |
14:30:27 watch.1 | This error came from the "onLoad" callback registered here:
14:30:27 watch.1 |
14:30:27 watch.1 | node_modules/esbuild-plugin-vue3/dist/index.js:284:34:
14:30:27 watch.1 | 284 │ ... build.onLoad({ filter: /.*/, namespace: ...
14:30:27 watch.1 | ╵ ~~~~~~
14:30:27 watch.1 |
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:284:35
14:30:27 watch.1 | at step (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:67:23)
14:30:27 watch.1 | at Object.next (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:48:53)
14:30:27 watch.1 | at fulfilled (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild-plugin-vue3/dist/index.js:39:58)
14:30:27 watch.1 |
14:30:27 watch.1 | The plugin "vue" was triggered by this import
14:30:27 watch.1 |
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/Resource.vue:1:154:
14:30:27 watch.1 | 1 │ ...der } from "/Users/osama/waseela/frappe-bench/apps/wg_core/node...
14:30:27 watch.1 | ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
14:30:27 watch.1 |
14:30:27 watch.1 | ✘ [ERROR] [plugin vue] Error parsing JavaScript expression: Unexpected token, expected "," (1:16)
14:30:27 watch.1 |
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/Tree/Tree.vue:47:24:
14:30:27 watch.1 | 47 │ child[nodeKey] as string
14:30:27 watch.1 | ╵ ^
14:30:27 watch.1 |
14:30:27 watch.1 | The plugin "vue" was triggered by this import
14:30:27 watch.1 |
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/Tree/Tree.vue:1:155:
14:30:27 watch.1 | 1 │ ...der } from "/Users/osama/waseela/frappe-bench/apps/wg_core/node...
14:30:27 watch.1 | ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
14:30:27 watch.1 |
14:30:27 watch.1 | ✘ [ERROR] [plugin frappe-vue-style] Cannot read properties of undefined (reading 'outputs')
14:30:27 watch.1 |
14:30:27 watch.1 | /Users/osama/waseela/frappe-bench/apps/frappe/esbuild/frappe-vue-style.js:10:41:
14:30:27 watch.1 | 10 │ let files = get_files(result.metafile.outputs);
14:30:27 watch.1 | ╵ ^
14:30:27 watch.1 |
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/esbuild/frappe-vue-style.js:10:42
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:1052:21
14:30:27 watch.1 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
14:30:27 watch.1 |
14:30:27 watch.1 | This error came from the "onEnd" callback registered here:
14:30:27 watch.1 |
14:30:27 watch.1 | /Users/osama/waseela/frappe-bench/apps/frappe/esbuild/frappe-vue-style.js:9:8:
14:30:27 watch.1 | 9 │ build.onEnd((result) => {
14:30:27 watch.1 | ╵ ~~~~~
14:30:27 watch.1 |
14:30:27 watch.1 | at setup (/Users/osama/waseela/frappe-bench/apps/frappe/esbuild/frappe-vue-style.js:9:9)
14:30:27 watch.1 | at handlePlugins (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:855:23)
14:30:27 watch.1 |
14:30:27 watch.1 | ERROR There were some problems during build
14:30:27 watch.1 |
14:30:27 watch.1 | Error: Build failed with 8 errors:
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/Checkbox.vue:20:16: ERROR: [plugin: vue] Error parsing JavaScript expression: Unexpected token, expected "," (3:47)
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/Tree/Tree.vue:47:48: ERROR: [plugin: vue] Error parsing JavaScript expression: Unexpected token, expected "," (1:16)
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/index.js:10:38: ERROR: [plugin: vue] [@vue/compiler-sfc] No fs option provided to compileScript in non-Node environment. File system access is required for resolving imported types.
14:30:27 watch.1 |
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/DatePicker/DatePicker.vue
14:30:27 watch.1 | 139| import type { DatePickerEmits, DatePickerProps } from './DatePicker'
14:30:27 watch.1 | 140|
14:30:27 watch.1 | 141| const props = defineProps()
14:30:27 watch.1 | | ^^^^^^^^^^^^^^^
14:30:27 watch.1 | 142| const emit = defineEmits()
14:30:27 watch.1 | 143|
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/index.js:11:42: ERROR: [plugin: vue] [@vue/compiler-sfc] No fs option provided to compileScript in non-Node environment. File system access is required for resolving imported types.
14:30:27 watch.1 |
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/DatePicker/DateTimePicker.vue
14:30:27 watch.1 | 202| import type { DatePickerEmits, DatePickerProps } from './DatePicker'
14:30:27 watch.1 | 203|
14:30:27 watch.1 | 204| const props = defineProps()
14:30:27 watch.1 | | ^^^^^^^^^^^^^^^
14:30:27 watch.1 | 205| const emit = defineEmits()
14:30:27 watch.1 | 206|
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/index.js:12:43: ERROR: [plugin: vue] [@vue/compiler-sfc] No fs option provided to compileScript in non-Node environment. File system access is required for resolving imported types.
14:30:27 watch.1 |
14:30:27 watch.1 | ../wg_core/node_modules/frappe-ui/src/components/DatePicker/DateRangePicker.vue
14:30:27 watch.1 | 134| import type { DatePickerEmits, DatePickerProps } from './DatePicker'
14:30:27 watch.1 | 135|
14:30:27 watch.1 | 136| const props = defineProps()
14:30:27 watch.1 | | ^^^^^^^^^^^^^^^
14:30:27 watch.1 | 137| const emit = defineEmits()
14:30:27 watch.1 | 138|
14:30:27 watch.1 | ...
14:30:27 watch.1 | at failureErrorWithLog (/Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:1624:15)
14:30:27 watch.1 | at /Users/osama/waseela/frappe-bench/apps/frappe/node_modules/esbuild/lib/main.js:1266:28
14:30:27 watch.1 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)