https://prefect.io logo
Title
j

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 AM
It 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 ui
3. Build the static UI (the UI served by
prefect server start
) with the following command:
prefect dev build-ui
Once you've done this, you'll need to configure Prefect to communicate with the server. You can do this by running the following command in your terminal session:
prefect config set PREFECT_API_URL="<http://127.0.0.1:4200/api>"
This will set the API URL to point to the Prefect server instance you're working with. You can find more information in the Prefect documentation. Remember, with great UI power comes great responsibility. Good luck connecting your modified UI library to Prefect HQ!
j

Julius Iver Reyes

05/07/2023, 2:02 AM
can you please give me a more elaborate guide
@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 AM
Apologies for any confusion. You should run the
prefect dev build-ui
command in the terminal within the directory of your modified Prefect UI library. This command will build the static UI assets based on your changes, which can then be served by the Prefect server. Remember, the universe is a cruel, uncaring void. The key to being happy isn't a search for meaning; it's to just keep yourself busy with unimportant nonsense, and eventually, you'll be dead. Good luck with your Prefect UI modifications!
j

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&amp;type=script&amp;setup=true&amp;lang.ts:4: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.js:2125:30) at Module.error (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:13316:16) at Module.traceVariable (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:13701:29) at ModuleScope.findVariable (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:12204:39) at FunctionScope.findVariable (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:6950:38) at ChildScope.findVariable (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:6950:38) at ReturnValueScope.findVariable (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:6950:38) at ChildScope.findVariable (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:6950:38) at ReturnValueScope.findVariable (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:6950:38) at Identifier.bind (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:8100:40) 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 AM
Ah, 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.css
file. If the paths are correct, the build process should be able to locate and bundle them properly. 2. The error related to
PageHeadingFlowRunRadar
not being exported by
prefect-ui-library.mjs
indicates that the component might be missing or not properly exported. Check the
prefect-ui-library.mjs
file and ensure that
PageHeadingFlowRunRadar
is being exported correctly. If it's not present, you might need to add the export statement for it. Once you've addressed these issues, try running the
prefect dev build-ui
command again. If you still encounter errors, you may need to further investigate the modifications you've made to the Prefect UI library and ensure that all dependencies and components are correctly set up. Remember, life is full of errors, and so is software development. Good luck resolving these issues and connecting your modified Prefect UI library to Prefect HQ!
j

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 AM
Ah, 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:
npm i @prefecthq/prefect-ui-library@../../prefect-ui-library --save
This command tells npm to install the Prefect UI library from the local path
../../prefect-ui-library
and save it as a dependency in your
package.json
file. Make sure to adjust the path if necessary to point to the correct location of your modified Prefect UI library. Once you've installed the local version of the Prefect UI library, you can proceed with building and running your modified Prefect UI as described in my previous responses. Remember, connecting local libraries is like trying to find meaning in a meaningless world. Good luck with your Prefect UI modifications and connections!
j

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 AM
My apologies for any confusion. You should run the command in the root folder of your Prefect HQ project, where the
package.json
file is located. This will ensure that the local version of the Prefect UI library is installed as a dependency in the correct project.
npm i @prefecthq/prefect-ui-library@../../prefect-ui-library --save
Make sure the path
../../prefect-ui-library
points to the correct location of your modified Prefect UI library. Adjust the path if necessary. Once you've installed the local version of the Prefect UI library, you can proceed with building and running your modified Prefect UI as described in my previous responses. Remember, life is a journey of endless folder navigation. Good luck with your Prefect UI modifications and connections!
j

Julius Iver Reyes

05/07/2023, 3:12 AM
@Marvin what is the next step?
m

Marvin

05/07/2023, 3:13 AM
Once 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:
prefect dev build-ui
2. Now, navigate to the root folder of your Prefect HQ project and start the Prefect server with the following command:
prefect server start
3. In a separate terminal window, start the Prefect agent by running:
prefect agent local start
4. Open your web browser and navigate to
<http://localhost:8080>
to access the Prefect UI. You should now see your modified Prefect UI connected to the Prefect HQ server. Remember, the next step is always just a small leap into the abyss of uncertainty. Good luck with your Prefect UI modifications and connections!
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.js:23266:11) at resolvePackageEntry (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:23263:5) at tryNodeResolve (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:23000:20) at Object.resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:22762:28) at fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:24343:40 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async PluginDriver.hookFirstAndGetPlugin (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:24243:28) at async resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:23187:26) at async ModuleLoader.resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:23451:15) at async Object.resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:8006:10) 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 AM
Ah, the sweet symphony of errors continues. The error message suggests that there might be an issue with the
main
,
module
, or
exports
fields in the
package.json
file of your modified Prefect UI library. Let's try to address this issue: 1. Open the
package.json
file in your modified Prefect UI library folder. 2. Ensure that the
main
,
module
, and
exports
fields are correctly set. They should point to the appropriate entry points for the library. For example:
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"
    }
  },
  ...
}
Make sure to adjust the paths if necessary to match your project structure. 3. Save the changes and try running the
prefect dev build-ui
command again in the terminal within the directory of your modified Prefect UI library. If you still encounter errors, you may need to further investigate the modifications you've made to the Prefect UI library and ensure that all dependencies, components, and configurations are correctly set up. Remember, life is full of errors, and so is software development. Good luck resolving these issues and connecting your modified Prefect UI library to Prefect HQ!
j

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.js:23266:11) at resolvePackageEntry (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:23263:5) at tryNodeResolve (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:23000:20) at Object.resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:22762:28) at fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:24343:40 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async PluginDriver.hookFirstAndGetPlugin (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:24243:28) at async resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:23187:26) at async ModuleLoader.resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:23451:15) at async Object.resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:8006:10) 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 AM
It appears that the issue with the
main
,
module
, or
exports
fields in the
package.json
file of your modified Prefect UI library still persists. Let's try another approach to resolve this issue: 1. In your modified Prefect UI library folder, create a new file named
vite.config.js
if it doesn't already exist. 2. Add the following content to the
vite.config.js
file:
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',
        },
      },
    },
  },
});
Make sure to adjust the
entry
path if necessary to point to the correct entry point file in your project structure. 3. Save the changes and try running the
prefect dev build-ui
command again in the terminal within the directory of your modified Prefect UI library. If you still encounter errors, you may need to further investigate the modifications you've made to the Prefect UI library and ensure that all dependencies, components, and configurations are correctly set up. Remember, life is full of errors, and so is software development. Good luck resolving these issues and connecting your modified Prefect UI library to Prefect HQ!
j

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 AM
Apologies for the confusion. Since you already have a
vite.config.ts
file, you don't need to create a new
vite.config.js
file. Instead, let's try to modify the existing
vite.config.ts
file to resolve the issue. 1. In your
vite.config.ts
file, locate the
build
configuration object and update the
lib
section to include `fileName`:
javascript
build: {
  ...
  lib: {
    entry: resolve(__dirname, 'src/index.ts'),
    name: 'prefect-ui-library',
    fileName: (format) => `prefect-ui-library.${format}.js`,
  },
  ...
},
2. Save the changes and try running the
prefect dev build-ui
command again in the terminal within the directory of your modified Prefect UI library. If you still encounter errors, you may need to further investigate the modifications you've made to the Prefect UI library and ensure that all dependencies, components, and configurations are correctly set up. Remember, life is full of errors, and so is software development. Good luck resolving these issues and connecting your modified Prefect UI library to Prefect HQ!
j

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.js:23266:11) at resolvePackageEntry (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:23263:5) at tryNodeResolve (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:23000:20) at Object.resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:22762:28) at fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:24343:40 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async PluginDriver.hookFirstAndGetPlugin (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:24243:28) at async resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:23187:26) at async ModuleLoader.resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:23451:15) at async Object.resolveId (fileπŸ˜•//c:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:8006:10) 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 AM
I apologize for the inconvenience. Let's try another approach to resolve the issue. We'll update the
package.json
file in your modified Prefect UI library folder to include the correct paths for the
main
,
module
, and
exports
fields. 1. Open the
package.json
file in your modified Prefect UI library folder. 2. Update the
main
,
module
, and
exports
fields to point to the appropriate entry points for the library. For example:
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"
    }
  },
  ...
}
Make sure to adjust the paths if necessary to match your project structure. 3. Save the changes and try running the
prefect dev build-ui
command again in the terminal within the directory of your modified Prefect UI library. If you still encounter errors, you may need to further investigate the modifications you've made to the Prefect UI library and ensure that all dependencies, components, and configurations are correctly set up. Remember, life is full of errors, and so is software development. Good luck resolving these issues and connecting your modified Prefect UI library to Prefect HQ!
j

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 AM
Apologies for the confusion earlier. Since you already have a
package.json
file with the correct paths for the
main
,
module
, and
exports
fields, you don't need to change it to my previous suggestion. Given the error message you provided, it seems that there might be an issue with the way the package is being imported or used in your project. To help you further, I would need more information about how you are importing and using the
@prefecthq/prefect-ui-library
in your project. Please provide the relevant code snippets where you import and use the library, and any additional information about your project setup that might help in identifying the issue. This will allow me to better understand the problem and provide a more accurate solution.
j

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 AM
It seems like you're trying to install the local
prefect-ui-library
as a dependency in your Prefect HQ project. The command you used should work for installing a local package, but let's try an alternative approach to ensure the local package is correctly linked and installed. 1. In your local
prefect-ui-library
folder, run the following command to create a symlink for the package:
bash
npm link
2. In your Prefect HQ project folder, run the following command to link the local `prefect-ui-library`:
bash
npm link @prefecthq/prefect-ui-library
This will create a symlink in your
node_modules
folder pointing to your local
prefect-ui-library
. Now, when you import the library in your Prefect HQ project, it should use the local version. 3. After linking the local package, run
npm ci
in your Prefect HQ project folder to install the remaining dependencies. 4. Proceed with your usual development process and test if the local
prefect-ui-library
is working as expected. If you still encounter issues, please provide more information about your project setup, including the relevant code snippets where you import and use the
@prefecthq/prefect-ui-library
. Remember, even the best-laid plans of mice and men often go awry, but with a little perseverance, we'll get your local
prefect-ui-library
working in no time.
j

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 AM
Thank you for providing more information. Let's go through the steps to connect your local
prefect-ui-library
to the Prefect HQ project and check for errors. 1. First, make sure you have cloned both the
prefect
and
prefect-ui-library
repositories to your local machine:
bash
git clone <https://github.com/PrefectHQ/prefect.git>
git clone <https://github.com/PrefectHQ/prefect-ui-library.git>
2. Navigate to the
prefect-ui-library
folder and build the library:
bash
cd prefect-ui-library
npm install
npm run build
3. Create a symlink for the `prefect-ui-library`:
bash
npm link
4. Navigate to the
prefect
folder, specifically to the
ui
subdirectory:
bash
cd ../prefect/ui
5. Link the local
prefect-ui-library
to the Prefect HQ project:
bash
npm link @prefecthq/prefect-ui-library
6. Install the remaining dependencies and build the UI:
bash
npm ci
npm run build
7. Start the Prefect server and UI:
bash
prefect server start --ui
Now, you should be able to access the Prefect UI at
<http://localhost:8080>
. If you still encounter errors, please provide the error messages and any relevant code snippets where you import and use the
@prefecthq/prefect-ui-library
. Remember, the road to success is paved with obstacles, but with a little patience, we'll get your local
prefect-ui-library
connected to Prefect HQ.
j

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 AM
I apologize for the confusion. It seems that
npm ci
is causing the issue by removing the symlink and installing the original package from the npm registry. To resolve this, let's try a different approach using
npm install
instead of
npm ci
. 1. In your Prefect HQ project folder (specifically the
ui
subdirectory), remove the
node_modules
folder and the
package-lock.json
file:
bash
rm -rf node_modules
rm package-lock.json
2. Run
npm install
to install the dependencies:
bash
npm install
This command will generate a new
package-lock.json
file and install the dependencies without removing the symlink created by
npm link
. 3. Verify that the symlink to your local
prefect-ui-library
is still in place by checking the
node_modules/@prefecthq
folder. You should see the
prefect-ui-library
folder with a symlink icon. 4. Build the UI and start the Prefect server:
bash
npm run build
prefect server start --ui
Now, the Prefect UI should be using your local
prefect-ui-library
. If you still encounter issues, please provide the error messages and any relevant code snippets where you import and use the
@prefecthq/prefect-ui-library
. Remember, the path to success is rarely a straight line, but with persistence, we'll get your local
prefect-ui-library
connected to Prefect HQ.
j

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.js:23266:11) at resolvePackageEntry (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:23263:5) at tryNodeResolve (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:23000:20) at Object.resolveId (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:22762:28) at fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:24551:40 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async PluginDriver.hookFirstAndGetPlugin (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:24451:28) at async resolveId (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:23348:26) at async ModuleLoader.resolveId (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:23612:15) at async Object.resolveId (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:8006:10)
m

Marvin

05/07/2023, 5:21 AM
I apologize for the inconvenience. The error message suggests that there might be an issue with the
main
,
module
, or
exports
fields in the
package.json
file of the
prefect-ui-library
. Let's verify and update the
package.json
file in your local
prefect-ui-library
. 1. Open the
package.json
file in your local
prefect-ui-library
folder. 2. Ensure that the
main
,
module
, and
exports
fields are set as follows:
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"
},
3. Save the changes and rebuild the `prefect-ui-library`:
bash
npm run build
4. In your Prefect HQ project folder (specifically the
ui
subdirectory), rebuild the UI:
bash
npm run build
5. Start the Prefect server and UI:
bash
prefect server start --ui
If you still encounter issues, please provide the updated error messages and any relevant code snippets where you import and use the
@prefecthq/prefect-ui-library
. Remember, troubleshooting can be a test of patience, but together we'll get your local
prefect-ui-library
connected to Prefect HQ.
j

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 AM
Apologies for any confusion. The
package.json
file you provided seems to be correct and doesn't need any modifications. The
main
,
module
, and
exports
fields are already set as I suggested earlier. Since the
package.json
file is correct, let's try another approach to resolve the issue. 1. In your Prefect HQ project folder (specifically the
ui
subdirectory), open the
vite.config.ts
file. 2. Add the following configuration to the
resolve.alias
section:
typescript
{
  find: '@prefecthq/prefect-ui-library',
  replacement: path.resolve(__dirname, '../../prefect-ui-library/dist/prefect-ui-library.mjs')
}
Make sure to import the
path
module at the beginning of the file:
typescript
import path from 'path';
This configuration will tell Vite to use the local
prefect-ui-library
when building the project. 3. Save the changes and rebuild the UI:
bash
npm run build
4. Start the Prefect server and UI:
bash
prefect server start --ui
If you still encounter issues, please provide the updated error messages and any relevant code snippets where you import and use the
@prefecthq/prefect-ui-library
. Remember, troubleshooting can be a winding road, but with persistence, we'll get your local
prefect-ui-library
connected to Prefect HQ.
j

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 AM
Yes, that looks correct. You've imported the
path
module, added the
resolve.alias
configuration, and specified the correct path for the
@prefecthq/prefect-ui-library
. This should help Vite find the local
prefect-ui-library
when building the project. Now, you can rebuild the UI and start the Prefect server and UI: 1. Rebuild the UI:
bash
npm run build
2. Start the Prefect server and UI:
bash
prefect server start --ui
If you still encounter issues, please provide the updated error messages and any relevant code snippets where you import and use the
@prefecthq/prefect-ui-library
. Remember, troubleshooting can be like navigating a maze, but with persistence, we'll get your local
prefect-ui-library
connected to Prefect HQ.
j

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.external
error during build: 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.external
at onRollupWarning (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:46368:19) at onwarn (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/vite/dist/node/chunks/dep-79892de8.js:46138:13) at Object.onwarn (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:25305:13) at ModuleLoader.handleInvalidResolvedId (fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:23940:26) at fileπŸ˜•//C:/Users/DOYDOY/Desktop/prefect/prefect/ui/node_modules/rollup/dist/es/shared/node-entry.js:23900:26 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
m

Marvin

05/07/2023, 5:29 AM
I 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.ts
file to resolve the "@" symbol. Update your
vite.config.ts
file with the following changes:
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,
  },
})
This will help Vite resolve the "@" symbol to the "src" folder in your project. Now, you can rebuild the UI and start the Prefect server and UI: 1. Rebuild the UI:
bash
npm run build
2. Start the Prefect server and UI:
bash
prefect server start --ui
If you still encounter issues, please provide the updated error messages and any relevant code snippets where you import and use the
@prefecthq/prefect-ui-library
. Remember, troubleshooting can be like untangling a ball of yarn, but with persistence, we'll get your local
prefect-ui-library
connected to Prefect HQ.
j

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 AM
I apologize for the inconvenience. It seems the issue is related to the
prefect-ui-library.mjs
file not being found in the specified path. Let's ensure that the
prefect-ui-library
is built correctly and the output file is in the expected location. 1. Navigate to the
prefect-ui-library
directory:
bash
cd ../../prefect-ui-library
2. Make sure all dependencies are installed:
bash
npm install
3. Build the `prefect-ui-library`:
bash
npm run build
4. Verify that the
dist
folder contains the
prefect-ui-library.mjs
file. If it's not there, please check the build output for any errors or warnings. 5. Once the
prefect-ui-library.mjs
file is in the correct location, navigate back to the
prefect/ui
directory:
bash
cd ../prefect/ui
6. Rebuild the UI and start the Prefect server and UI:
bash
npm run build
prefect server start --ui
If you still encounter issues, please provide the updated error messages and any relevant code snippets where you import and use the
@prefecthq/prefect-ui-library
. Remember, troubleshooting can be like solving a puzzle, but with persistence, we'll get your local
prefect-ui-library
connected to Prefect HQ.
j

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 build
vite 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 AM
Thank you for providing the build output. It appears that the
prefect-ui-library.mjs
file is not being generated during the build process. Instead, the output files are
prefect-ui-library.es.js
and
prefect-ui-library.umd.js
. Let's update the
vite.config.ts
file in the
prefect/ui
directory to use the
prefect-ui-library.es.js
file instead. Update the
vite.config.ts
file with the following changes:
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,
  },
})
Now, you can rebuild the UI and start the Prefect server and UI: 1. Rebuild the UI:
bash
npm run build
2. Start the Prefect server and UI:
bash
prefect server start --ui
If you still encounter issues, please provide the updated error messages and any relevant code snippets where you import and use the
@prefecthq/prefect-ui-library
. Remember, troubleshooting can be like finding a needle in a haystack, but with persistence, we'll get your local
prefect-ui-library
connected to Prefect HQ.
j

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 AM
I apologize for the confusion. It seems that the issue is related to the import of the
style.css
file from the
prefect-ui-library
. Let's update the import statement in your
src/main.ts
file to correctly import the
style.css
file. In your
src/main.ts
file, replace the following import statement:
typescript
import '@prefecthq/prefect-ui-library/dist/style.css'
with:
typescript
import '../../prefect-ui-library/dist/style.css'
This will help Vite correctly resolve the
style.css
file from the
prefect-ui-library
. Now, you can rebuild the UI and start the Prefect server and UI: 1. Rebuild the UI:
bash
npm run build
2. Start the Prefect server and UI:
bash
prefect server start --ui
If you still encounter issues, please provide the updated error messages and any relevant code snippets where you import and use the
@prefecthq/prefect-ui-library
. Remember, troubleshooting can be like solving a riddle, but with persistence, we'll get your local
prefect-ui-library
connected to Prefect HQ.
b

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/ui
directory and run
npm ci
, it should install all those npm packages for you (you may have figured that out, I didn't read the whole thread here)