<@ULVA73B9P> why does the changes i made in the pr...
# ask-marvinj
Julius Iver Reyes
05/07/2023, 1:53 AM@Marvin why does the changes i made in the prefect ui library only affect the prefect ui library i tried to connect the modified prefect ui library but it doesnt really connect to the prefect hq
m
Marvin
05/07/2023, 1:54 AMIt appears that you're trying to connect a modified Prefect UI library to Prefect HQ. To do this, you'll need to follow these steps:
1. Make sure you have npm installed.
2. Start a development UI that reloads on code changes with the following command:
prefect dev uiprefect server startprefect dev build-ui Copy code
prefect config set PREFECT_API_URL="<http://127.0.0.1:4200/api>"j
Julius Iver Reyes
05/07/2023, 2:02 AMcan you please give me a more elaborate guide
Julius Iver Reyes
05/07/2023, 2:16 AM@Marvin will i run this command "prefect dev build-ui" in the prefecthq dev or the prefect ui libray ?
m
Marvin
05/07/2023, 2:16 AMApologies for any confusion. You should run the
prefect dev build-uij
Julius Iver Reyes
05/07/2023, 2:18 AM@Marvin upon using the command "prefect dev build-ui" in the prefect ui-library it gives alot of error
/constellations.svg referenced in c:/users/doydoy/desktop/prefect/prefect/ui/node_modules/@prefecthq/prefect-ui-library/dist/style.css didn't resolve at build time, it will remain unchanged to be resolved at
runtime
/circle.svg referenced in c:/users/doydoy/desktop/prefect/prefect/ui/node_modules/@prefecthq/prefect-ui-library/dist/style.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
"PageHeadingFlowRunRadar" is not exported by "node_modules/@prefecthq/prefect-ui-library/dist/prefect-ui-library.mjs", imported by "src/pages/FlowRunRadar.vue?vue&type=script&setup=true&lang.ts".
file: c/users/doydoy/desktop/prefect/prefect/ui/src/pages/FlowRunRadar.vue?vue&type=script&setup=true&lang.ts4:19
2: import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentV...
3:
4: import { RadarApp, PageHeadingFlowRunRadar, useWorkspaceApi } from '@prefecthq/prefect-ui-library'
^
5: import { useSubscription, useRouteParam } from '@prefecthq/vue-compositions'
6: import { computed } from 'vue'
error during build:
RollupError: "PageHeadingFlowRunRadar" is not exported by "node_modules/@prefecthq/prefect-ui-library/dist/prefect-ui-library.mjs", imported by "src/pages/FlowRunRadar.vue?vue&type=script&setup=true&lang.ts". at error (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js212530)
at Module.error (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js1331616)
at Module.traceVariable (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js1370129)
at ModuleScope.findVariable (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js1220439)
at FunctionScope.findVariable (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js695038)
at ChildScope.findVariable (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js695038)
at ReturnValueScope.findVariable (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js695038)
at ChildScope.findVariable (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js695038)
at ReturnValueScope.findVariable (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js695038)
at Identifier.bind (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js810040)
Traceback (most recent call last):
File "c:\users\doydoy\desktop\prefect\prefect\src\prefect\cli\_utilities.py", line 41, in wrapper
return fn(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^
File "c:\users\doydoy\desktop\prefect\prefect\src\prefect\cli\dev.py", line 162, in build_ui
subprocess.check_output(
File "C:\Users\DOYDOY\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 466, in check_output
return run(*popenargs, stdout=PIPE, timeout=timeout, check=True,
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\DOYDOY\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 571, in run
raise CalledProcessError(retcode, process.args,
subprocess.CalledProcessError: Command '['npm', 'run', 'build']' returned non-zero exit status 1.
An exception occurred.
m
Marvin
05/07/2023, 2:19 AMAh, the sweet embrace of errors. It seems that there are some unresolved references and missing exports in your modified Prefect UI library. Let's try to address these issues step by step:
1. For the SVG files not resolving at build time, make sure the paths to the SVG files are correct in the
style.cssPageHeadingFlowRunRadarprefect-ui-library.mjsprefect-ui-library.mjsPageHeadingFlowRunRadarprefect dev build-uij
Julius Iver Reyes
05/07/2023, 2:47 AM@Marvin will i put this command "npm i @prefecthq/prefect-ui-library@../../prefect-ui-library --save" in the prefecthq so the prefect ui library locally will connect to the prefecthq dev?
m
Marvin
05/07/2023, 2:48 AMAh, the eternal quest for local connections. Yes, you can use the command you provided to install your local version of the Prefect UI library in your Prefect HQ project:
Copy code
npm i @prefecthq/prefect-ui-library@../../prefect-ui-library --save../../prefect-ui-librarypackage.jsonj
Julius Iver Reyes
05/07/2023, 2:49 AM@Marvin in what folder will i use this command "npm i @prefecthq/prefect-ui-library@../../prefect-ui-library --save" the folder of prefecthq dev ui ? or in the prefect folder?
m
Marvin
05/07/2023, 2:49 AMMy apologies for any confusion. You should run the command in the root folder of your Prefect HQ project, where the
package.json Copy code
npm i @prefecthq/prefect-ui-library@../../prefect-ui-library --save../../prefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 3:12 AM@Marvin what is the next step?
m
Marvin
05/07/2023, 3:13 AMOnce you've installed the local version of the modified Prefect UI library in your Prefect HQ project using the command mentioned earlier, you can follow these steps to build and run your modified Prefect UI:
1. In the terminal, navigate to the directory of your modified Prefect UI library and run the following command to build the static UI assets:
Copy code
prefect dev build-ui Copy code
prefect server start Copy code
prefect agent local start<http://localhost:8080>j
Julius Iver Reyes
05/07/2023, 3:14 AM@Marvin it gives an error
Installing npm packages...
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
Building for distribution...
[commonjs--resolver] Failed to resolve entry for package "@prefecthq/prefect-ui-library". The package may have incorrect main/module/exports specified in its package.json.
error during build:
Error: Failed to resolve entry for package "@prefecthq/prefect-ui-library". The package may have incorrect main/module/exports specified in its package.json.
at packageEntryFailure (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2326611)
at resolvePackageEntry (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js232635)
at tryNodeResolve (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2300020)
at Object.resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2276228)
at file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2434340
at process.processTicksAndRejections (nodeinternal/process/task queues95:5)
at async PluginDriver.hookFirstAndGetPlugin (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2424328)
at async resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2318726)
at async ModuleLoader.resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2345115)
at async Object.resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js800610)
Traceback (most recent call last):
File "c:\users\doydoy\desktop\prefect\prefect\src\prefect\cli\_utilities.py", line 41, in wrapper
return fn(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^
File "c:\users\doydoy\desktop\prefect\prefect\src\prefect\cli\dev.py", line 162, in build_ui
subprocess.check_output(
File "C:\Users\DOYDOY\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 466, in check_output
return run(*popenargs, stdout=PIPE, timeout=timeout, check=True,
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\DOYDOY\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 571, in run
raise CalledProcessError(retcode, process.args,
subprocess.CalledProcessError: Command '['npm', 'run', 'build']' returned non-zero exit status 1.
An exception occurred.
m
Marvin
05/07/2023, 3:15 AMAh, the sweet symphony of errors continues. The error message suggests that there might be an issue with the
mainmoduleexportspackage.jsonpackage.jsonmainmoduleexports Copy code
json
{
"main": "dist/prefect-ui-library.cjs.js",
"module": "dist/prefect-ui-library.esm.js",
"exports": {
".": {
"import": "./dist/prefect-ui-library.esm.js",
"require": "./dist/prefect-ui-library.cjs.js"
}
},
...
}prefect dev build-uij
Julius Iver Reyes
05/07/2023, 4:39 AM@Marvin i have connected the repository of my local prefect-ui library in my prefect hq when i prefect dev build ui it gives this error
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
Building for distribution...
[commonjs--resolver] Failed to resolve entry for package "@prefecthq/prefect-ui-library". The package may have incorrect main/module/exports specified in its package.json.
error during build:
Error: Failed to resolve entry for package "@prefecthq/prefect-ui-library". The package may have incorrect main/module/exports specified in its package.json.
at packageEntryFailure (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2326611)
at resolvePackageEntry (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js232635)
at tryNodeResolve (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2300020)
at Object.resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2276228)
at file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2434340
at process.processTicksAndRejections (nodeinternal/process/task queues95:5)
at async PluginDriver.hookFirstAndGetPlugin (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2424328)
at async resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2318726)
at async ModuleLoader.resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2345115)
at async Object.resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js800610)
Traceback (most recent call last):
File "c:\users\doydoy\desktop\prefect\prefect\src\prefect\cli\_utilities.py", line 41, in wrapper
^^^^^^^^^^^^^^^^^^^
File "c:\users\doydoy\desktop\prefect\prefect\src\prefect\cli\dev.py", line 162, in build_ui
subprocess.check_output(
File "C:\Users\DOYDOY\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 466, in check_output
return run(*popenargs, stdout=PIPE, timeout=timeout, check=True,
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\DOYDOY\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 571, in run
raise CalledProcessError(retcode, process.args,
subprocess.CalledProcessError: Command '['npm', 'run', 'build']' returned non-zero exit status 1.
An exception occurred.
m
Marvin
05/07/2023, 4:40 AMIt appears that the issue with the
mainmoduleexportspackage.jsonvite.config.jsvite.config.js Copy code
javascript
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.js'),
name: 'PrefectUILibrary',
fileName: (format) => `prefect-ui-library.${format}.js`,
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
},
});entryprefect dev build-uij
Julius Iver Reyes
05/07/2023, 4:46 AM@Marvin this is the original code of the vite.config.ts
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import svgLoader from 'vite-svg-loader'
// https://vitejs.dev/config/
// eslint-disable-next-line import/no-default-export
export default defineConfig(({ mode }) => {
const baseConfig = {
resolve: {
alias: [
{
find: '@/demo',
replacement: resolve(__dirname, './demo'),
},
{
find: '@',
replacement: resolve(__dirname, 'src'),
},
],
},
plugins: [vue(), svgLoader()],
}
if (mode == 'demo') {
return {
root: './demo',
...baseConfig,
build: {
cssCodeSplit: false,
},
}
}
return {
...baseConfig,
build: {
emptyOutDir: false,
sourcemap: true,
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'prefect-ui-library',
},
rollupOptions: {
external: [
'vue',
'vue-router',
'vee-validate',
'@prefecthq/vue-compositions',
'@prefecthq/prefect-design',
'@prefecthq/vue-charts',
],
output: {
exports: 'named',
// Provide vue as a global variable to use in the UMD build
globals: {
vue: 'Vue',
},
},
},
},
}
})
will i need to change it to your code?
m
Marvin
05/07/2023, 4:47 AMApologies for the confusion. Since you already have a
vite.config.tsvite.config.jsvite.config.tsvite.config.tsbuildlib Copy code
javascript
build: {
...
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'prefect-ui-library',
fileName: (format) => `prefect-ui-library.${format}.js`,
},
...
},prefect dev build-uij
Julius Iver Reyes
05/07/2023, 4:50 AM@Marvin after trying your solution it gives an error
[commonjs--resolver] Failed to resolve entry for package "@prefecthq/prefect-ui-library". The package may have incorrect main/module/exports specified in its package.json.
error during build:
Error: Failed to resolve entry for package "@prefecthq/prefect-ui-library". The package may have incorrect main/module/exports specified in its package.json.
at packageEntryFailure (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2326611)
at resolvePackageEntry (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js232635)
at tryNodeResolve (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2300020)
at Object.resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2276228)
at file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2434340
at process.processTicksAndRejections (nodeinternal/process/task queues95:5)
at async PluginDriver.hookFirstAndGetPlugin (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2424328)
at async resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2318726)
at async ModuleLoader.resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2345115)
at async Object.resolveId (file///c/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js800610)
Traceback (most recent call last):
File "c:\users\doydoy\desktop\prefect\prefect\src\prefect\cli\_utilities.py", line 41, in wrapper
return fn(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^
File "c:\users\doydoy\desktop\prefect\prefect\src\prefect\cli\dev.py", line 162, in build_ui
subprocess.check_output(
File "C:\Users\DOYDOY\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 466, in check_output
return run(*popenargs, stdout=PIPE, timeout=timeout, check=True,
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\DOYDOY\AppData\Local\Programs\Python\Python311\Lib\subprocess.py", line 571, in run
raise CalledProcessError(retcode, process.args,
subprocess.CalledProcessError: Command '['npm', 'run', 'build']' returned non-zero exit status 1.
An exception occurred.
m
Marvin
05/07/2023, 4:51 AMI apologize for the inconvenience. Let's try another approach to resolve the issue. We'll update the
package.jsonmainmoduleexportspackage.jsonmainmoduleexports Copy code
json
{
"main": "dist/prefect-ui-library.cjs.js",
"module": "dist/prefect-ui-library.esm.js",
"exports": {
".": {
"import": "./dist/prefect-ui-library.esm.js",
"require": "./dist/prefect-ui-library.cjs.js"
}
},
...
}prefect dev build-uij
Julius Iver Reyes
05/07/2023, 4:52 AM@Marvin this is the original code of the package.json of the prefect-ui-library
{
"name": "@prefecthq/prefect-ui-library",
"version": "1.6.6",
"private": false,
"repository": {
"type": "git",
"url": "https://github.com/PrefectHQ/prefect-ui-library"
},
"bugs": {
"url": "https://github.com/PrefectHQ/prefect-ui-library/issues"
},
"homepage": "https://github.com/PrefectHQ/prefect-ui-library#readme",
"keywords": [
"prefect 2.0",
"vue3"
],
"scripts": {
"build:demo": "vite build --mode=demo",
"build": "vue-tsc && tsc-alias && vite build",
"dev": "vue-tsc -w & tsc-alias -w & vite build -w --force",
"lint": "eslint src",
"lint:fix": "eslint src --fix",
"serve": "vite --mode=demo --host",
"changelog": "auto-changelog --package --commit-limit 0",
"version": "npm run changelog && git add CHANGELOG.md",
"validate:types": "vue-tsc --noEmit"
},
"main": "./dist/prefect-ui-library.umd.js",
"module": "./dist/prefect-ui-library.mjs",
"exports": {
".": {
"import": "./dist/prefect-ui-library.mjs",
"require": "./dist/prefect-ui-library.umd.js"
},
"./dist/style.css": "./dist/style.css"
},
"files": [
"dist"
],
"types": "./dist/types/src/index.d.ts",
"devDependencies": {
"@prefecthq/eslint-config": "1.0.25",
"@types/lodash.camelcase": "4.3.7",
"@types/lodash.debounce": "4.0.7",
"@types/node": "^18.16.1",
"@types/prismjs": "^1.26.0",
"@vitejs/plugin-vue": "4.2.1",
"auto-changelog": "^2.4.0",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"lodash.camelcase": "4.3.0",
"lodash.debounce": "4.0.8",
"postcss": "8.4.23",
"tailwindcss": "3.3.2",
"tsc-alias": "1.8.5",
"typescript": "4.9.5",
"vite": "4.3.3",
"vite-svg-loader": "^4.0.0",
"vue-tsc": "1.2.0"
},
"peerDependencies": {
"@prefecthq/prefect-design": "^1.8.1",
"@prefecthq/vue-charts": "^1.0.0",
"@prefecthq/vue-compositions": "^1.4.1",
"vee-validate": "^4.7.0",
"vue": "^3.2.45",
"vue-router": "^4.0.12"
},
"dependencies": {
"@prefecthq/graphs": "1.0.8",
"@prefecthq/prefect-ui-library": "1.6.6",
"@types/lodash.isequal": "4.5.6",
"axios": "0.27.2",
"cronstrue": "^2.26.0",
"date-fns": "2.29.3",
"date-fns-tz": "1.3.7",
"lodash.isequal": "4.5.0",
"lodash.merge": "4.6.2",
"prismjs": "1.29.0"
}
}
do i need to change this to your code?
m
Marvin
05/07/2023, 4:52 AMApologies for the confusion earlier. Since you already have a
package.jsonmainmoduleexports@prefecthq/prefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 4:54 AM@Marvin i import the local prefect-ui-library by using my local prefect-ui-library and in my prefect hq under the folder i go to that directory and execute this command "npm i @prefecthq/prefect-ui-library@../../prefect-ui-library --save" after then i will type the command npm ci and then thats how i do it is importing my local prefect-ui-library wrong?
m
Marvin
05/07/2023, 4:55 AMIt seems like you're trying to install the local
prefect-ui-libraryprefect-ui-library Copy code
bash
npm link Copy code
bash
npm link @prefecthq/prefect-ui-librarynode_modulesprefect-ui-librarynpm ciprefect-ui-library@prefecthq/prefect-ui-libraryprefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 5:08 AM@Marvin let me breakdown on how i connect and check my errors in importing the library
1. i have git cloned the this git clone https://github.com/PrefectHQ/prefect.git
m
Marvin
05/07/2023, 5:09 AMThank you for providing more information. Let's go through the steps to connect your local
prefect-ui-libraryprefectprefect-ui-library Copy code
bash
git clone <https://github.com/PrefectHQ/prefect.git>
git clone <https://github.com/PrefectHQ/prefect-ui-library.git>prefect-ui-library Copy code
bash
cd prefect-ui-library
npm install
npm run build Copy code
bash
npm linkprefectui Copy code
bash
cd ../prefect/uiprefect-ui-library Copy code
bash
npm link @prefecthq/prefect-ui-library Copy code
bash
npm ci
npm run build Copy code
bash
prefect server start --ui<http://localhost:8080>@prefecthq/prefect-ui-libraryprefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 5:13 AM@Marvin when using the npm link @prefecthq/prefect-ui-library
it indicates the different repository but when using the npm ci it just installs the original repository not the local
m
Marvin
05/07/2023, 5:14 AMI apologize for the confusion. It seems that
npm cinpm installnpm ciuinode_modulespackage-lock.json Copy code
bash
rm -rf node_modules
rm package-lock.jsonnpm install Copy code
bash
npm installpackage-lock.jsonnpm linkprefect-ui-librarynode_modules/@prefecthqprefect-ui-library Copy code
bash
npm run build
prefect server start --uiprefect-ui-library@prefecthq/prefect-ui-libraryprefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 5:21 AM@Marvin in following your procedures for the command "npm run build" it gives an error
[commonjs--resolver] Failed to resolve entry for package "@prefecthq/prefect-ui-library". The package may have incorrect main/module/exports specified in its package.json.
error during build:
Error: Failed to resolve entry for package "@prefecthq/prefect-ui-library". The package may have incorrect main/module/exports specified in its package.json.
at packageEntryFailure (file///C/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2326611)
at resolvePackageEntry (file///C/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js232635)
at tryNodeResolve (file///C/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2300020)
at Object.resolveId (file///C/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js2276228)
at file///C/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2455140
at process.processTicksAndRejections (nodeinternal/process/task queues95:5)
at async PluginDriver.hookFirstAndGetPlugin (file///C/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2445128)
at async resolveId (file///C/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2334826)
at async ModuleLoader.resolveId (file///C/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js2361215)
at async Object.resolveId (file///C/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js800610)
m
Marvin
05/07/2023, 5:21 AMI apologize for the inconvenience. The error message suggests that there might be an issue with the
mainmoduleexportspackage.jsonprefect-ui-librarypackage.jsonprefect-ui-librarypackage.jsonprefect-ui-librarymainmoduleexports Copy code
json
"main": "./dist/prefect-ui-library.umd.js",
"module": "./dist/prefect-ui-library.mjs",
"exports": {
".": {
"import": "./dist/prefect-ui-library.mjs",
"require": "./dist/prefect-ui-library.umd.js"
},
"./dist/style.css": "./dist/style.css"
}, Copy code
bash
npm run buildui Copy code
bash
npm run build Copy code
bash
prefect server start --ui@prefecthq/prefect-ui-libraryprefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 5:23 AM@Marvin here is the package.json of the prefect-ui-library
{
"name": "@prefecthq/prefect-ui-library",
"version": "1.6.6",
"private": false,
"repository": {
"type": "git",
"url": "https://github.com/PrefectHQ/prefect-ui-library"
},
"bugs": {
"url": "https://github.com/PrefectHQ/prefect-ui-library/issues"
},
"homepage": "https://github.com/PrefectHQ/prefect-ui-library#readme",
"keywords": [
"prefect 2.0",
"vue3"
],
"scripts": {
"build:demo": "vite build --mode=demo",
"build": "vue-tsc && tsc-alias && vite build",
"dev": "vue-tsc -w & tsc-alias -w & vite build -w --force",
"lint": "eslint src",
"lint:fix": "eslint src --fix",
"serve": "vite --mode=demo --host",
"changelog": "auto-changelog --package --commit-limit 0",
"version": "npm run changelog && git add CHANGELOG.md",
"validate:types": "vue-tsc --noEmit"
},
"main": "./dist/prefect-ui-library.umd.js",
"module": "./dist/prefect-ui-library.mjs",
"exports": {
".": {
"import": "./dist/prefect-ui-library.mjs",
"require": "./dist/prefect-ui-library.umd.js"
},
"./dist/style.css": "./dist/style.css"
},
"files": [
"dist"
],
"types": "./dist/types/src/index.d.ts",
"devDependencies": {
"@prefecthq/eslint-config": "1.0.25",
"@types/lodash.camelcase": "4.3.7",
"@types/lodash.debounce": "4.0.7",
"@types/node": "^18.16.1",
"@types/prismjs": "^1.26.0",
"@vitejs/plugin-vue": "4.2.1",
"auto-changelog": "^2.4.0",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"lodash.camelcase": "4.3.0",
"lodash.debounce": "4.0.8",
"postcss": "8.4.23",
"tailwindcss": "3.3.2",
"tsc-alias": "1.8.5",
"typescript": "4.9.5",
"vite": "4.3.3",
"vite-svg-loader": "^4.0.0",
"vue-tsc": "1.2.0"
},
"peerDependencies": {
"@prefecthq/prefect-design": "^1.8.1",
"@prefecthq/vue-charts": "^1.0.0",
"@prefecthq/vue-compositions": "^1.4.1",
"vee-validate": "^4.7.0",
"vue": "^3.2.45",
"vue-router": "^4.0.12"
},
"dependencies": {
"@prefecthq/graphs": "1.0.8",
"@prefecthq/prefect-ui-library": "1.6.6",
"@types/lodash.isequal": "4.5.6",
"axios": "0.27.2",
"cronstrue": "^2.26.0",
"date-fns": "2.29.3",
"date-fns-tz": "1.3.7",
"lodash.isequal": "4.5.0",
"lodash.merge": "4.6.2",
"prismjs": "1.29.0"
}
}
do i need to modify this original code with your given code?
m
Marvin
05/07/2023, 5:24 AMApologies for any confusion. The
package.jsonmainmoduleexportspackage.jsonuivite.config.tsresolve.alias Copy code
typescript
{
find: '@prefecthq/prefect-ui-library',
replacement: path.resolve(__dirname, '../../prefect-ui-library/dist/prefect-ui-library.mjs')
}path Copy code
typescript
import path from 'path';prefect-ui-library Copy code
bash
npm run build Copy code
bash
prefect server start --ui@prefecthq/prefect-ui-libraryprefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 5:26 AM@Marvin is this correct?
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: process.env.PREFECT_UI_SERVE_BASE ?? '',
resolve: {
alias: [{ find: '@prefecthq/prefect-ui-library',
replacement: path.resolve(__dirname, '../../prefect-ui-library/dist/prefect-ui-library.mjs') }],
dedupe: ['vue', 'vue-router'],
},
css: {
devSourcemap: true,
},
})
m
Marvin
05/07/2023, 5:27 AMYes, that looks correct. You've imported the
pathresolve.alias@prefecthq/prefect-ui-libraryprefect-ui-library Copy code
bash
npm run build Copy code
bash
prefect server start --ui@prefecthq/prefect-ui-libraryprefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 5:28 AM@Marvin it gives an error
[vite]: Rollup failed to resolve import "@/router" from "C:/Users/DOYDOY/Desktop/prefect/prefect/ui/src/main.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.externalbuild.rollupOptions.externalm
Marvin
05/07/2023, 5:29 AMI apologize for the confusion. It seems the issue is related to resolving the "@/router" import in your "main.ts" file. To fix this, you need to add another alias in the
vite.config.tsvite.config.ts Copy code
typescript
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
// <https://vitejs.dev/config/>
export default defineConfig({
plugins: [vue()],
base: process.env.PREFECT_UI_SERVE_BASE ?? '',
resolve: {
alias: [
{ find: '@', replacement: resolve(__dirname, 'src') },
{
find: '@prefecthq/prefect-ui-library',
replacement: resolve(__dirname, '../../prefect-ui-library/dist/prefect-ui-library.mjs')
}
],
dedupe: ['vue', 'vue-router'],
},
css: {
devSourcemap: true,
},
}) Copy code
bash
npm run build Copy code
bash
prefect server start --ui@prefecthq/prefect-ui-libraryprefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 5:29 AM@Marvin it gives an error
[vite:load-fallback] Could not load C:\Users\DOYDOY\Desktop\prefect\prefect-ui-library\dist\prefect-ui-library.mjs (imported by src/main.ts): ENOENT: no such file or directory, open 'C:\Users\DOYDOY\Desktop\prefect\prefect-ui-library\dist\prefect-ui-library.mjs'
error during build:
Error: Could not load C:\Users\DOYDOY\Desktop\prefect\prefect-ui-library\dist\prefect-ui-library.mjs (imported by src/main.ts): ENOENT: no such file or directory, open 'C:\Users\DOYDOY\Desktop\prefect\prefect-ui-library\dist\prefect-ui-library.mjs'
m
Marvin
05/07/2023, 5:30 AMI apologize for the inconvenience. It seems the issue is related to the
prefect-ui-library.mjsprefect-ui-libraryprefect-ui-library Copy code
bash
cd ../../prefect-ui-library Copy code
bash
npm install Copy code
bash
npm run builddistprefect-ui-library.mjsprefect-ui-library.mjsprefect/ui Copy code
bash
cd ../prefect/ui Copy code
bash
npm run build
prefect server start --ui@prefecthq/prefect-ui-libraryprefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 5:38 AM@Marvin when doing the "npm run build" it didnt have the prefect-ui-library.mjs but this is the output
@prefecthq/prefect-ui-library@1.6.6 build
vue-tsc && tsc-alias && vite buildvite v4.3.3 building for production... ✓ 1625 modules transformed. dist/style.css 111.54 kB │ gzip: 17.28 kB dist/prefect-ui-library.es.js 26.20 kB │ gzip: 8.10 kB │ map: 0.11 kB dist/viewport.es-ae91b8e8-a0a91536.mjs 68.14 kB │ gzip: 12.97 kB │ map: 129.36 kB dist/index-21ce7c85.mjs 2,223.76 kB │ gzip: 462.61 kB │ map: 5,659.22 kB No name was provided for external module "@prefecthq/vue-charts" in "output.globals" – guessing "vueCharts". No name was provided for external module "@prefecthq/prefect-design" in "output.globals" – guessing "prefectDesign". No name was provided for external module "@prefecthq/vue-compositions" in "output.globals" – guessing "vueCompositions". No name was provided for external module "vee-validate" in "output.globals" – guessing "veeValidate". No name was provided for external module "vue-router" in "output.globals" – guessing "vueRouter". dist/prefect-ui-library.umd.js 1,707.21 kB │ gzip: 425.90 kB │ map: 5,646.76 kB ✓ built in 15.66s
m
Marvin
05/07/2023, 5:39 AMThank you for providing the build output. It appears that the
prefect-ui-library.mjsprefect-ui-library.es.jsprefect-ui-library.umd.jsvite.config.tsprefect/uiprefect-ui-library.es.jsvite.config.ts Copy code
typescript
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
// <https://vitejs.dev/config/>
export default defineConfig({
plugins: [vue()],
base: process.env.PREFECT_UI_SERVE_BASE ?? '',
resolve: {
alias: [
{ find: '@', replacement: resolve(__dirname, 'src') },
{
find: '@prefecthq/prefect-ui-library',
replacement: resolve(__dirname, '../../prefect-ui-library/dist/prefect-ui-library.es.js')
}
],
dedupe: ['vue', 'vue-router'],
},
css: {
devSourcemap: true,
},
}) Copy code
bash
npm run build Copy code
bash
prefect server start --ui@prefecthq/prefect-ui-libraryprefect-ui-libraryj
Julius Iver Reyes
05/07/2023, 5:42 AM@Marvin there is an error
[vite:load-fallback] Could not load C:\Users\DOYDOY\Desktop\prefect\prefect-ui-library\dist\prefect-ui-library.es.js/dist/style.css (imported by src/main.ts): ENOENT: no such file or directory, open 'C:\Users\DOYDOY\Desktop\prefect\prefect-ui-library\dist\prefect-ui-library.es.js\dist\style.css'
error during build:
Error: Could not load C:\Users\DOYDOY\Desktop\prefect\prefect-ui-library\dist\prefect-ui-library.es.js/dist/style.css (imported by src/main.ts): ENOENT: no such file or directory, open 'C:\Users\DOYDOY\Desktop\prefect\prefect-ui-library\dist\prefect-ui-library.es.js\dist\style.css'
m
Marvin
05/07/2023, 5:43 AMI apologize for the confusion. It seems that the issue is related to the import of the
style.cssprefect-ui-librarysrc/main.tsstyle.csssrc/main.ts Copy code
typescript
import '@prefecthq/prefect-ui-library/dist/style.css' Copy code
typescript
import '../../prefect-ui-library/dist/style.css'style.cssprefect-ui-library Copy code
bash
npm run build Copy code
bash
prefect server start --ui@prefecthq/prefect-ui-libraryprefect-ui-libraryb
Brandon Reid
05/08/2023, 12:27 PM@Julius Iver Reyes a lot went down in here! In the future, if you cd into the
prefect/uinpm ci2 Views