fix(preview): support generating preview for envs without a compiler

components/legacy/e2e-helper/excluded-fixtures/extensions/react-no-compiler-env/index.ts

@@ -0,0 +1,4 @@
+import { ReactNoCompilerEnv } from './react-no-compiler-env.bit-env';
+
+export default ReactNoCompilerEnv;
+export { ReactNoCompilerEnv };

components/legacy/e2e-helper/excluded-fixtures/extensions/react-no-compiler-env/react-no-compiler-env.bit-env.ts

@@ -0,0 +1,25 @@
+// @bit-no-check
+// @ts-nocheck
+import { ReactEnv } from '@teambit/react.react-env';
+
+/**
+ * an env that has a preview/bundler but no compiler. it reproduces the (rare) scenario of an env
+ * without a compiler that still needs to generate a preview during `bit build` (e.g.
+ * bitdev.general/envs/js-env).
+ *
+ * it extends the react env (to inherit a working preview/bundler) and removes the compiler and the
+ * build pipeline: `compiler` is unset so no `getCompiler` is exposed on the env, and `build` is
+ * unset so the env contributes no build tasks (in particular no compiler task). the global preview
+ * tasks still run, so the preview is generated for a component on this compiler-less env.
+ */
+export class ReactNoCompilerEnv extends ReactEnv {
+  name = 'react-no-compiler-env';
+
+  icon = 'https://static.bit.dev/extensions-icons/react.svg';
+
+  compiler = undefined;
+
+  build = undefined;
+}
+
+export default new ReactNoCompilerEnv();

e2e/harmony/custom-env.e2e.ts

@@ -636,6 +636,33 @@ export default createMounter(MyReactProvider) as any;`
       expect(output).to.not.have.string('failed');
     });
   });
+  describe('an env with a preview/bundler but without a compiler', () => {
+    let buildOutput: string;
+    before(() => {
+      // preview is disabled by default in e2e to speed up tagging. enable it so the GeneratePreview
+      // task actually runs - this is the path that used to fail for a compiler-less env.
+      helper.scopeHelper.setWorkspaceWithRemoteScope({ disablePreview: false });
+      // a react-based env with the compiler (and the env build pipe) removed. so the env has a
+      // preview/bundler but no compiler, exactly like bitdev.general/envs/js-env.
+      const envName = helper.env.setCustomNewEnv('react-no-compiler-env');
+      const envId = `${helper.scopes.remote}/${envName}`;
+      helper.fixtures.populateComponents(1, false);
+      helper.command.setEnv('comp1', envId);
+      helper.command.install();
+    });
+    it('bit build should not fail generating the preview', () => {
+      // before the fix it used to throw "context.env.getCompiler is not a function" and then
+      // ENOENT when writing the preview link into the (never created) dist dir.
+      // skip the TSCompiler task: comp1's env has no compiler anyway, and skipping it avoids
+      // compiling the env component itself (irrelevant to this scenario - the user's env was a
+      // resolved dependency, not built). the global GeneratePreview task still runs.
+      buildOutput = helper.command.build('comp1', '--skip-tasks TSCompiler');
+      expect(buildOutput).to.have.string('build succeeded');
+    });
+    it('the GeneratePreview task should have run (preview was needed, not skipped)', () => {
+      expect(buildOutput).to.have.string('GeneratePreview');
+    });
+  });
   describe('custom env with invalid env.jsonc', () => {
     before(() => {
       helper.scopeHelper.setWorkspaceWithRemoteScope();

scopes/preview/preview/preview.main.runtime.ts

@@ -809,6 +809,9 @@ export class PreviewMain {
     const targetPath = join(targetDir, `${prefix}-${this.timestamp}.js`);
     // write only if link has changed (prevents triggering fs watches)
     if (this.writeHash.get(targetPath) !== hash) {
+      // the target dir is normally the compiler's dist dir, which already exists. for envs without a
+      // compiler (the dist dir was never created), make sure the dir exists before writing the link.
+      ensureDirSync(targetDir);
       writeFileSync(targetPath, contents);
       this.writeHash.set(targetPath, hash);
     }

scopes/preview/preview/strategies/component-strategy.ts

@@ -382,8 +382,8 @@ export class ComponentBundlingStrategy implements BundlingStrategy {
 
   private getComponentOutputPath(capsule: Capsule, context: ComputeTargetsContext) {
     const capsulePath = resolve(`${capsule.path}`);
-    const compiler: Compiler = context.env.getCompiler();
-    const distDir = compiler.getDistDir?.() || 'dist';
+    const compiler: Compiler | undefined = context.env.getCompiler?.();
+    const distDir = compiler?.getDistDir?.() || 'dist';
     return join(capsulePath, distDir);
   }