PRO-8768: relative paths for the good operating systems (#5194)

* Back to relative paths for the good operating systems

* Fix vite tests

Author: myovchev

packages/apostrophe/CHANGELOG.md

@@ -7,6 +7,7 @@
 * Fixes an issue where the frontend was caching stale choices for `select`, `radio` and `checkboxes`
 fields that were saved but no longer valid (i.e removed from the schema).
 * Bumped dependency on `express-cache-on-demand` to guarantee installation of recent fixes for edge cases that could share a response between two locales of a single-site project, report errors without a process restart, and correctly handle `res.send('')` with an empty string.
+* Restores relative import paths inside Vite-generated entrypoints on *nix builds so dev server HMR works again, while keeping the Windows-specific absolute path workaround.
 
 ## 4.24.0 (2025-11-25)
 

packages/apostrophe/modules/@apostrophecms/asset/lib/build/external-module-api.js

@@ -630,6 +630,18 @@ function invoke() {
         invokeCode: ''
       };
 
+      const useAbsoluteImportPaths = process.platform === 'win32';
+      const toRelativeImportPath = (componentPath) => {
+        const normalized = componentPath.replace(/\\/g, '/');
+        if (normalized.startsWith('./') || normalized.startsWith('../')) {
+          return normalized;
+        }
+        if (normalized.startsWith('/')) {
+          return `.${normalized}`;
+        }
+        return `./${normalized}`;
+      };
+
       components.forEach((entry, i) => {
         const { component, path: realPath } = entry;
         if (options.requireDefaultExport) {
@@ -653,9 +665,13 @@ function invoke() {
             }
           }
         }
-        // You would think we should run pathToFileURL over realPath,
-        // but that actually breaks both Windows and Linux with Vite. -Tom
-        const importPath = JSON.stringify(realPath);
+        // Windows needs absolute paths for native Node.js builds whereas
+        // *nix builds must stay relative to keep Vite's dev server happy.
+        // pathToFileURL breaks both environments, so stick to plain strings.
+        const importTarget = (useAbsoluteImportPaths || !component)
+          ? realPath
+          : toRelativeImportPath(component);
+        const importPath = JSON.stringify(importTarget);
         const name = self.getComponentNameByPath(
           component,
           { enumerate: options.enumerateImports === true ? i : false }

packages/apostrophe/test/assets.js

@@ -119,6 +119,26 @@ describe('Assets', function() {
     assert(apos.asset);
   });
 
+  it('emits relative entrypoint imports on non-Windows systems', async function() {
+    if (process.platform === 'win32') {
+      return this.skip();
+    }
+
+    const componentPath = './modules/example-module/ui/src/index.js';
+    const absolutePath = path.join(
+      process.cwd(),
+      'packages/apostrophe/test/modules/example-module/ui/src/index.js'
+    );
+    const { importCode } = apos.asset.getImportFileOutput([
+      {
+        component: componentPath,
+        path: absolutePath
+      }
+    ]);
+
+    assert(importCode.includes(`from "${componentPath}"`));
+  });
+
   it('should serve static files', async function() {
     const text = await apos.http.get('/static-test.txt');
     assert(text.match(/served/));

packages/vite/test/vite.test.js

@@ -395,85 +395,155 @@ describe('@apostrophecms/vite', function () {
       assert.match(adminBarComponentContent, /<h1>The Apos Admin Bar<\/h1>/);
 
       // II. Core Entrypoints
-      // 1. src.js
-      {
-        const match = srcContent.match(/"[^"]+\/@apostrophecms\/admin-bar\/ui\/src\/index.js";/g);
-        assert.equal(match?.length, 1, 'The core admin-bar module should be imported once');
-      }
-      // 2. apos.js
-      {
-        const match = aposContent.match(
-          /import TheAposAdminBar from "[^"]+\/admin-bar-component\/ui\/apos\/components\/TheAposAdminBar\.vue";/g
+      if (process.platform === 'win32') {
+        // 1. src.js
+        {
+          const match = srcContent.match(/"[^"]+\/@apostrophecms\/admin-bar\/ui\/src\/index.js";/g);
+          assert.equal(match?.length, 1, 'The core admin-bar module should be imported once');
+        }
+        // 2. apos.js
+        {
+          const match = aposContent.match(
+            /import TheAposAdminBar from "[^"]+\/admin-bar-component\/apos\/components\/TheAposAdminBar\.vue";/g
+          );
+          assert.equal(match?.length, 1, 'TheAposAdminBar.vue component override should be imported once');
+        }
+        {
+          const match = aposContent.match(
+            /window\.apos\.vueComponents\["TheAposAdminBar"\] = TheAposAdminBar;/g
+          );
+          assert.equal(match?.length, 1, 'TheAposAdminBar.vue component should be registered once');
+        }
+        {
+          const match = aposContent.match(
+            /import AposAdminBar_[\w\d]+ from "[^"]+\/@apostrophecms\/admin-bar\/ui\/apos\/apps\/AposAdminBar\.js";/g
+          );
+          assert.equal(match?.length, 1, 'AposAdminBar.js App import should be present once');
+        }
+        {
+          const match = aposContent.match(
+            /AposAdminBar_[\d]+App\(\);/g
+          );
+          assert.equal(match?.length, 1, 'AposAdminBar.js App should be called once');
+        }
+        assert.match(
+          aposContent,
+          /import AposCommandMenuKey from "[^"]+\/@apostrophecms\/command-menu\/ui\/apos\/components\/AposCommandMenuKey\.vue";/
         );
-        assert.equal(match?.length, 1, 'TheAposAdminBar.vue component override should be imported once');
-      }
-      {
-        const match = aposContent.match(
-          /window\.apos\.vueComponents\["TheAposAdminBar"\] = TheAposAdminBar;/g
+        assert.match(
+          aposContent,
+          /import Link from "[^"]+\/@apostrophecms\/rich-text-widget\/ui\/apos\/tiptap-extensions\/Link\.js";/
         );
-        assert.equal(match?.length, 1, 'TheAposAdminBar.vue component should be registered once');
-      }
-      {
-        const match = aposContent.match(
-          /import AposAdminBar_[\w\d]+ from "[^"]+\/@apostrophecms\/admin-bar\/ui\/apos\/apps\/AposAdminBar\.js";/g
+      } else {
+        {
+          const match = srcContent.match(/".\/@apostrophecms\/admin-bar\/src\/index.js";/g);
+          assert.equal(match?.length, 1, 'The core admin-bar module should be imported once');
+        }
+        {
+          const match = aposContent.match(
+            /import TheAposAdminBar from ".\/admin-bar-component\/apos\/components\/TheAposAdminBar\.vue";/g
+          );
+          assert.equal(match?.length, 1, 'TheAposAdminBar.vue component override should be imported once');
+        }
+        {
+          const match = aposContent.match(
+            /window\.apos\.vueComponents\["TheAposAdminBar"\] = TheAposAdminBar;/g
+          );
+          assert.equal(match?.length, 1, 'TheAposAdminBar.vue component should be registered once');
+        }
+        {
+          const match = aposContent.match(
+            /import AposAdminBar_[\w\d]+ from ".\/@apostrophecms\/admin-bar\/apos\/apps\/AposAdminBar\.js";/g
+          );
+          assert.equal(match?.length, 1, 'AposAdminBar.js App import should be present once');
+        }
+        {
+          const match = aposContent.match(
+            /AposAdminBar_[\d]+App\(\);/g
+          );
+          assert.equal(match?.length, 1, 'AposAdminBar.js App should be called once');
+        }
+        assert.match(
+          aposContent,
+          /import AposCommandMenuKey from ".\/@apostrophecms\/command-menu\/apos\/components\/AposCommandMenuKey\.vue";/
         );
-        assert.equal(match?.length, 1, 'AposAdminBar.js App import should be present once');
-      }
-      {
-        const match = aposContent.match(
-          /AposAdminBar_[\d]+App\(\);/g
+        assert.match(
+          aposContent,
+          /import Link from ".\/@apostrophecms\/rich-text-widget\/apos\/tiptap-extensions\/Link\.js";/
         );
-        assert.equal(match?.length, 1, 'AposAdminBar.js App should be called once');
       }
-      assert.match(
-        aposContent,
-        /import AposCommandMenuKey from "[^"]+\/@apostrophecms\/command-menu\/ui\/apos\/components\/AposCommandMenuKey\.vue";/
-      );
-      assert.match(
-        aposContent,
-        /import Link from "[^"]+\/@apostrophecms\/rich-text-widget\/ui\/apos\/tiptap-extensions\/Link\.js";/
-      );
-
       // III. Extra Build Entrypoints & Rebundle Modules
       const articleEntryContent = await fs.readFile(
         path.join(rootDirSrc, 'article.js'),
         'utf8'
       );
 
-      assert(articleEntryContent.includes('article-page/ui/src/main.scss'));
-      assert(articleEntryContent.includes('article-page/ui/src/index.js'));
-      assert(articleEntryContent.includes('article-page/ui/src/main.js'));
-
-      const toolsEntryContent = await fs.readFile(
-        path.join(rootDirSrc, 'tools.js'),
-        'utf8'
-      );
-
-      assert(toolsEntryContent.includes('selected-article-widget/ui/src/tabs.js'));
-
-      {
-        const match = srcContent.match(
-          /import topic_\d+App from "[^"]+\/@apostrophecms\/home-page\/ui\/src\/topic\.js";/g
-        );
-        assert.equal(match?.length, 1, 'home-page topic.js should be imported once');
-      }
-      {
-        const match = srcContent.match(
-          /import main_\d+App from "[^"]+\/@apostrophecms\/home-page\/ui\/src\/main\.js";/g
-        );
-        assert.equal(match?.length, 1, 'home-page main.js should be imported once');
-      }
-      {
-        const match = srcContent.match(
-          /import topic_\d+App from "[^"]+\/article-widget\/ui\/src\/topic\.js";/g
+      if (process.platform === 'win32') {
+        assert(articleEntryContent.includes('article-page/ui/src/main.scss'));
+        assert(articleEntryContent.includes('article-page/ui/src/index.js'));
+        assert(articleEntryContent.includes('article-page/ui/src/main.js'));
+        const toolsEntryContent = await fs.readFile(
+          path.join(rootDirSrc, 'tools.js'),
+          'utf8'
         );
-        assert.equal(match?.length, 1, 'article-widget topic.js should be imported once');
-      }
-      {
-        const match = srcContent.match(
-          /import carousel_\d+App from "[^"]+\/article-widget\/ui\/src\/carousel\.js";/g
+        assert(toolsEntryContent.includes('selected-article-widget/ui/src/tabs.js'));
+        {
+          const match = srcContent.match(
+            /import topic_\d+App from "[^"]+\/@apostrophecms\/home-page\/ui\/src\/topic\.js";/g
+          );
+          assert.equal(match?.length, 1, 'home-page topic.js should be imported once');
+        }
+        {
+          const match = srcContent.match(
+            /import main_\d+App from "[^"]+\/@apostrophecms\/home-page\/ui\/src\/main\.js";/g
+          );
+          assert.equal(match?.length, 1, 'home-page main.js should be imported once');
+        }
+        {
+          const match = srcContent.match(
+            /import topic_\d+App from "[^"]+\/article-widget\/ui\/src\/topic\.js";/g
+          );
+          assert.equal(match?.length, 1, 'article-widget topic.js should be imported once');
+        }
+        {
+          const match = srcContent.match(
+            /import carousel_\d+App from "[^"]+\/article-widget\/ui\/src\/carousel\.js";/g
+          );
+          assert.equal(match?.length, 1, 'article-widget carousel.js should be imported once');
+        }
+      } else {
+        assert(articleEntryContent.includes('article-page/src/main.scss'));
+        assert(articleEntryContent.includes('article-page/src/index.js'));
+        assert(articleEntryContent.includes('article-page/src/main.js'));
+        const toolsEntryContent = await fs.readFile(
+          path.join(rootDirSrc, 'tools.js'),
+          'utf8'
         );
-        assert.equal(match?.length, 1, 'article-widget carousel.js should be imported once');
+        assert(toolsEntryContent.includes('selected-article-widget/src/tabs.js'));
+        {
+          const match = srcContent.match(
+            /import topic_\d+App from ".\/@apostrophecms\/home-page\/src\/topic\.js";/g
+          );
+          assert.equal(match?.length, 1, 'home-page topic.js should be imported once');
+        }
+        {
+          const match = srcContent.match(
+            /import main_\d+App from ".\/@apostrophecms\/home-page\/src\/main\.js";/g
+          );
+          assert.equal(match?.length, 1, 'home-page main.js should be imported once');
+        }
+        {
+          const match = srcContent.match(
+            /import topic_\d+App from ".\/article-widget\/src\/topic\.js";/g
+          );
+          assert.equal(match?.length, 1, 'article-widget topic.js should be imported once');
+        }
+        {
+          const match = srcContent.match(
+            /import carousel_\d+App from ".\/article-widget\/src\/carousel\.js";/g
+          );
+          assert.equal(match?.length, 1, 'article-widget carousel.js should be imported once');
+        }
       }
     });