Build Error and Parameterized Route Pages Missing

[oscaro00]

Hello,

I am trying to add some parameterized routes to my Framework dashboard. I added dynamic paths to the config file

dynamicPaths: [
  "/presets/evens",
  "/presets/odds"
]

and added src/presets/[preset].md. Within src/presets/[preset].md, I added the code

The current preset is ${observable.params.preset}.

After running npm run dev, my dashboard loads, but the preset pages are not there. Looking at this discussion, I saw mbostock build his dashboard. However, running npm run build (for the first time since creating this project) gave the following error:

Warning: the output root dist is not within the current working directory and will not be cleared.
load /index in 485ms
load /inventory-summary in 46ms
load /pos-summary in 47ms
load /presets/evens in 70ms
load /presets/odds in 59ms
built 5 pages in src
bundle /_observablehq/client.js → src/.observablehq/cache/_observablehq/client.js
bundle /_observablehq/runtime.js → src/.observablehq/cache/_observablehq/runtime.js
bundle /_observablehq/stdlib.js → src/.observablehq/cache/_observablehq/stdlib.js
bundle /_observablehq/stdlib/duckdb.js → src/.observablehq/cache/_observablehq/stdlib/duckdb.js
bundle /_observablehq/stdlib/inputs.js → src/.observablehq/cache/_observablehq/stdlib/inputs.js
build src/style.css → dist/_import/style.9ff5b03d.css

Unexpected error: file conflict: /_import/style.9ff5b03d.css

I have a style.css file that doesn't do anything special. Here is a snippet of the file

@import url("observablehq:default.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
/* @import url("./abstract-light.css"); */

:root {
    --theme-foreground: #1b1e23;
    --theme-foreground-focus: #3b5fc0;
    --theme-background-a: #ffffff;
}

:root {
    --theme-background-b: color-mix(in srgb, var(--theme-foreground) 4%, var(--theme-background-a));
    --theme-background: var(--theme-background-a);
    --theme-background-alt: var(--theme-background-b);
    --theme-foreground-alt: color-mix(in srgb, var(--theme-foreground) 90%, var(--theme-background-a));
    --theme-foreground-muted: color-mix(in srgb, var(--theme-foreground) 60%, var(--theme-background-a));
    --theme-foreground-faint: color-mix(in srgb, var(--theme-foreground) 50%, var(--theme-background-a));
    --theme-foreground-fainter: color-mix(in srgb, var(--theme-foreground) 30%, var(--theme-background-a));
    --theme-foreground-faintest: color-mix(in srgb, var(--theme-foreground) 14%, var(--theme-background-a));
    color-scheme: light;
}

/* css classes continue */

I am not really sure what is causing the build to fail. Additionally, is running npm run build the only way to see the parameterized routes?

[mbostock]

I’m not able to reproduce this problem. To test, I ran npx @observablehq/framework@latest create to create an empty project. Then I made the following changes:

diff --git a/observablehq.config.js b/observablehq.config.js
index 252433c..ee4da8e 100644
--- a/observablehq.config.js
+++ b/observablehq.config.js
@@ -3,6 +3,11 @@ export default {
   // The app’s title; used in the sidebar and webpage titles.
   title: "Test Framework 1792",
 
+  dynamicPaths: [
+    "/presets/evens",
+    "/presets/odds"
+  ],
+
   // The pages and sections in the sidebar. If you don’t specify this option,
   // all pages will be listed in alphabetical order. Listing pages explicitly
   // lets you organize them into sections and have unlisted pages.
diff --git a/src/presets/[preset].md b/src/presets/[preset].md
new file mode 100644
index 0000000..2889db0
--- /dev/null
+++ b/src/presets/[preset].md
@@ -0,0 +1 @@
+The current preset is ${observable.params.preset}.

The pages rendered as expected in development:

And built as expected:

┌ (3 pages)                    Page      Imports        Files
├── presets (2 pages)
│   ├── evens                  2 kB        51 kB        26 kB
│   └── odds                   2 kB        51 kB        26 kB
└── index                      2 kB        51 kB        26 kB

Your logs include a warning which should be investigated:

Warning: the output root dist is not within the current working directory and will not be cleared.

What are you using for your dist? This is likely the cause of your file conflict error.

[oscaro00]

This is my config file. I believe the root and output paths are the default values. I have tried running npm run build within the App folder as well as the src folder, but I see the same error.

export default {
  title: "App",

  dynamicPaths: [
    "/presets/evens",
    "/presets/odds"
  ],

  pages: [
    {
      name: "Summary",
      pages: [
        {name: "POS Summary", path: "/pos-summary"},
        {name: "Inventory Summary", path: "/inventory-summary"}
      ]
    },
    {
      name: "Preset Filters",
      pages: [
        {name: "Evens", path: "/presets/evens"},
        {name: "Odds", path: "/presets/odds"}
      ]
    }
  ],

  head: '<link rel="icon" href="observable.png" type="image/png" sizes="32x32">',

  root: "src",

  interpreters: {
    ".py": ["python"],
  },

  pager: false,
  output: "dist",
};

Regarding the parameterized pages, I didn't realize I would have to add both the dynamic paths and add the page names/routes within the pages section of the config.

[mbostock]

Yes, parameterized pages are not listed by default in the sidebar; you need to enumerate them explicitly.

Is your dist folder a symlink? Is your observablehq.config.js in the project root? And are you running your commands from your project root? You should follow our recommended project structure; if you deviate from that, please share a link to your repository so that we can test your environment locally. Otherwise I cannot speculate as to why you are seeing the dist is not within the current working directory warning.

[oscaro00]

My project is a modified version of the example Framework site after running npx "@observablehq/framework@latest" create.

Here is the general file structure. I didn't set up the dist folder as a symlink. observablehq.config.js is at the project's root path. I am running commands from the root folder of the project.

I am still seeing the following error when running npm run build

Warning: the output root dist is not within the current working directory and will not be cleared.
load /index in 474ms
load /inventory-summary in 63ms
load /pos-summary in 45ms
load /presets/evens in 76ms
load /presets/odds in 62ms
built 5 pages in src
bundle /_observablehq/client.js → src/.observablehq/cache/_observablehq/client.js
bundle /_observablehq/runtime.js → src/.observablehq/cache/_observablehq/runtime.js
bundle /_observablehq/stdlib.js → src/.observablehq/cache/_observablehq/stdlib.js
bundle /_observablehq/stdlib/duckdb.js → src/.observablehq/cache/_observablehq/stdlib/duckdb.js
bundle /_observablehq/stdlib/inputs.js → src/.observablehq/cache/_observablehq/stdlib/inputs.js
build src/custom-style.css → dist/_import/custom-style.9ff5b03d.css

Unexpected error: file conflict: /_import/custom-style.9ff5b03d.css

[mbostock]

Can you try manually deleting the dist folder and building again? There’s something wrong with your setup, but I can’t tell what. Does this happen for you if you create a new project from scratch and build twice?

[oscaro00]

Manually deleting the dist folder and running npm run build worked. I still see the warning Warning: the output root dist is not within the current working directory and will not be cleared., but the build succeeded.

I tried building a different Framework project and it worked while raising the same warning. It also showed this

(node:25400) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

[mbostock]

Thanks for the report. I’ve confirmed this is a bug on Windows and fixed in #1804.