Fix: Serve preview scripts as virtual modules for Vite processing

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0-alpha.7] - 2026-09-18
+
+### Fixed
+- **htmplar-cli**: Serve preview scripts as virtual modules so Vite can process bare imports (fixes React resolution)
+
 ## [2.0.0-alpha.6] - 2026-09-18
 
 ### Fixed

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adidas/htmplar-cli",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "description": "Command line interface for HTMplar",
   "license": "MIT",
   "repository": {

packages/cli/src/commands/dev.ts

@@ -92,7 +92,6 @@ function createRoutingPlugin(templates: string[]) {
         if (routeMatch) {
           const templateName = routeMatch[1];
           if (templates.includes(templateName)) {
-            const ext = await getTemplateExtension(templateName);
             const html = `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -106,14 +105,7 @@ function createRoutingPlugin(templates: string[]) {
   </head>
   <body>
     <div id="root"></div>
-    <script type="module">
-      import React from 'react';
-      import { createRoot } from 'react-dom/client';
-      import EmailComponent from '/src/${templateName}.${ext}';
-
-      const root = createRoot(document.getElementById('root'));
-      root.render(React.createElement(EmailComponent));
-    </script>
+    <script type="module" src="/@htmplar-preview/${templateName}"></script>
   </body>
 </html>`;
 
@@ -123,6 +115,25 @@ function createRoutingPlugin(templates: string[]) {
           }
         }
 
+        // Virtual module for template preview
+        const previewMatch = url.match(/^\/@htmplar-preview\/([^/?]+)/);
+        if (previewMatch) {
+          const templateName = previewMatch[1];
+          if (templates.includes(templateName)) {
+            const ext = await getTemplateExtension(templateName);
+            const js = `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import EmailComponent from '/src/${templateName}.${ext}';
+
+const root = createRoot(document.getElementById('root'));
+root.render(React.createElement(EmailComponent));`;
+
+            res.setHeader('Content-Type', 'application/javascript');
+            res.end(js);
+            return;
+          }
+        }
+
         next();
       });
     },

packages/cli/src/commands/init.ts

@@ -25,13 +25,13 @@ export async function initProject(name?: string) {
         preview: 'htmplar preview',
       },
       dependencies: {
-        '@adidas/htmplar-core': '^2.0.0-alpha.6',
-        '@adidas/htmplar-renderer': '^2.0.0-alpha.6',
+        '@adidas/htmplar-core': '^2.0.0-alpha.7',
+        '@adidas/htmplar-renderer': '^2.0.0-alpha.7',
         react: '^18.3.1',
         'react-dom': '^18.3.1',
       },
       devDependencies: {
-        '@adidas/htmplar-cli': '^2.0.0-alpha.6',
+        '@adidas/htmplar-cli': '^2.0.0-alpha.7',
         '@types/react': '^18.3.8',
         '@types/react-dom': '^18.3.0',
         typescript: '^5.6.2',

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adidas/htmplar-core",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "description": "React component library for email development",
   "license": "MIT",
   "repository": {

packages/create-htmplar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adidas/create-htmplar",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "description": "Scaffold new HTMplar projects",
   "license": "MIT",
   "repository": {

packages/create-htmplar/src/scaffold.ts

@@ -172,13 +172,13 @@ async function createPackageJson(config: ProjectConfig) {
       preview: 'htmplar preview',
     },
     dependencies: {
-      '@adidas/htmplar-core': '^2.0.0-alpha.6',
-      '@adidas/htmplar-renderer': '^2.0.0-alpha.6',
+      '@adidas/htmplar-core': '^2.0.0-alpha.7',
+      '@adidas/htmplar-renderer': '^2.0.0-alpha.7',
       react: '^18.3.1',
       'react-dom': '^18.3.1',
     },
     devDependencies: {
-      '@adidas/htmplar-cli': '^2.0.0-alpha.6',
+      '@adidas/htmplar-cli': '^2.0.0-alpha.7',
       '@types/react': '^18.3.8',
       '@types/react-dom': '^18.3.0',
       ...(config.typescript ? { typescript: '^5.6.2' } : {}),

packages/renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adidas/htmplar-renderer",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "description": "Email rendering engine for HTMplar",
   "license": "MIT",
   "repository": {