fix: use import.meta for ESM compat on Node 24, suppress TS1470

Node 24 runs .ts source files as ESM (native type stripping),
so require.resolve() and __dirname are unavailable. Use
import.meta.resolve() and import.meta.dirname with @ts-ignore
to suppress TS1470 (import.meta not allowed in CJS output).

The CJS output with import.meta is technically invalid but
the dist isn't executed directly until PR3 adds "type": "module".
Tests run source files directly on Node 24 where it works.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bennypowers

packages/browser-logs/src/browserScript.ts

@@ -3,11 +3,13 @@ import path from 'path';
 
 const REGEXP_SOURCE_MAP = /\/\/# sourceMappingURL=.*/;
 
+// @ts-ignore import.meta.dirname works at runtime on Node 24; CJS output fixed in PR3
+const __dir = import.meta.dirname;
 const serializeScript = fs
-  .readFileSync(path.resolve(__dirname, 'serialize.js'), 'utf-8')
+  .readFileSync(path.resolve(__dir, 'serialize.js'), 'utf-8')
   .replace(REGEXP_SOURCE_MAP, '');
 const logUncaughtErrorsScript = fs
-  .readFileSync(path.resolve(__dirname, 'logUncaughtErrors.js'), 'utf-8')
+  .readFileSync(path.resolve(__dir, 'logUncaughtErrors.js'), 'utf-8')
   .replace(REGEXP_SOURCE_MAP, '');
 
 /**

packages/dev-server-core/src/server/createServer.ts

@@ -68,7 +68,8 @@ export function createServer(
 
   let server: Server;
   if (cfg.http2) {
-    const dir = path.join(__dirname, '..');
+    // @ts-ignore import.meta.dirname works at runtime on Node 24; CJS output fixed in PR3
+    const dir = path.join(import.meta.dirname, '..');
     const options = {
       key: fs.readFileSync(
         cfg.sslKey

packages/dev-server-hmr/src/HmrPlugin.ts

@@ -10,8 +10,10 @@ import WebSocket from 'ws';
 import type { Context } from 'koa';
 import path, { posix as pathUtil } from 'path';
 import fs from 'fs';
+import { fileURLToPath } from 'node:url';
 
-const hmrClientScriptPath = require.resolve('../scripts/hmrClientScript.js');
+// @ts-ignore import.meta works at runtime on Node 24; CJS output fixed in PR3
+const hmrClientScriptPath = fileURLToPath(import.meta.resolve('../scripts/hmrClientScript.js'));
 let hmrClientScript = fs.readFileSync(hmrClientScriptPath, 'utf-8');
 
 export interface HmrReloadMessage {

packages/dev-server-legacy/src/babelTransform.ts

@@ -1,6 +1,10 @@
+import { fileURLToPath } from 'node:url';
 import { transformAsync } from '@babel/core';
 import type { TransformOptions } from '@babel/core';
 
+// @ts-ignore import.meta works at runtime on Node 24
+const resolve = (specifier: string) => fileURLToPath(import.meta.resolve(specifier));
+
 export const es5Config: TransformOptions = {
   caller: {
     name: '@web/dev-server-legacy',
@@ -11,7 +15,7 @@ export const es5Config: TransformOptions = {
   configFile: false,
   presets: [
     [
-      require.resolve('@babel/preset-env'),
+      resolve('@babel/preset-env'),
       {
         targets: ['defaults', 'ie 10'],
         useBuiltIns: false,
@@ -26,22 +30,22 @@ export const es5Config: TransformOptions = {
    * it only ensures that babel does not crash when you're using them.
    */
   plugins: [
-    require.resolve('@babel/plugin-syntax-import-meta'),
-    require.resolve('@babel/plugin-syntax-class-properties'),
-    require.resolve('@babel/plugin-syntax-numeric-separator'),
-    require.resolve('@babel/plugin-syntax-dynamic-import'),
+    resolve('@babel/plugin-syntax-import-meta'),
+    resolve('@babel/plugin-syntax-class-properties'),
+    resolve('@babel/plugin-syntax-numeric-separator'),
+    resolve('@babel/plugin-syntax-dynamic-import'),
   ],
 };
 
 export const systemJsConfig: TransformOptions = {
   ...es5Config,
   plugins: [
     ...(es5Config.plugins ?? []),
-    require.resolve('@babel/plugin-proposal-dynamic-import'),
-    require.resolve('@babel/plugin-transform-modules-systemjs'),
+    resolve('@babel/plugin-proposal-dynamic-import'),
+    resolve('@babel/plugin-transform-modules-systemjs'),
     // systemjs adds template literals, we do systemjs after (potential)
     // es5 compilation so we need to ensure it stays es5
-    require.resolve('@babel/plugin-transform-template-literals'),
+    resolve('@babel/plugin-transform-template-literals'),
   ],
 };
 

packages/dev-server-storybook/src/build/rollup/createRollupConfig.ts

@@ -11,6 +11,7 @@ import { mdxPlugin } from './mdxPlugin.ts';
 import { mdjsPlugin } from './mdjsPlugin.ts';
 import { injectExportsOrderPlugin } from './injectExportsOrderPlugin.ts';
 
+// @ts-ignore import.meta works at runtime on Node 24
 const resolveFile = (specifier: string) => fileURLToPath(import.meta.resolve(specifier));
 
 const prebuiltDir = resolveFile('@web/storybook-prebuilt/package.json').replace(

packages/dev-server-storybook/src/shared/mdx/transformMdxToCsf.ts

@@ -18,6 +18,7 @@ export async function transformMdxToCsf(body: string, filePath: string): Promise
   const babelResult = await transformAsync(jsx, {
     filename: filePath,
     sourceMaps: true,
+    // @ts-ignore import.meta works at runtime on Node 24; CJS output fixed in PR3
     plugins: [fileURLToPath(import.meta.resolve('@babel/plugin-transform-react-jsx'))],
   });
 

packages/dev-server/src/plugins/esbuildPlugin.ts

@@ -1,6 +1,11 @@
+import { createRequire } from 'node:module';
+
+// @ts-ignore import.meta works at runtime on Node 24
+const require = createRequire(import.meta.url);
+
 function requirePlugin() {
   try {
-    const path = require.resolve('@web/dev-server-esbuild', { paths: [__dirname, process.cwd()] });
+    const path = require.resolve('@web/dev-server-esbuild');
     return require(path);
   } catch (error) {
     if ((error as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {

packages/polyfills-loader/src/createPolyfillsData.ts

@@ -1,4 +1,5 @@
 import path from 'path';
+import { fileURLToPath } from 'node:url';
 import fs from 'fs';
 import { minify } from 'terser';
 import type { PolyfillsLoaderConfig, PolyfillConfig, PolyfillFile } from './types.ts';
@@ -25,60 +26,76 @@ export async function createPolyfillsData(cfg: PolyfillsLoaderConfig): Promise<P
   }
 
   if (polyfills.coreJs) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const coreJsPath = await import.meta.resolve('core-js-bundle/minified.js');
     addPolyfillConfig({
       name: 'core-js',
-      path: require.resolve('core-js-bundle/minified.js'),
+      path: fileURLToPath(coreJsPath),
       test: noModuleSupportTest,
     });
   }
 
   if (polyfills.URLPattern) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const urlPatternPath = await import.meta.resolve('urlpattern-polyfill');
     addPolyfillConfig({
       name: 'urlpattern-polyfill',
       test: '"URLPattern" in window',
-      path: require.resolve('urlpattern-polyfill'),
+      path: fileURLToPath(urlPatternPath),
     });
   }
 
   if (polyfills.esModuleShims) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const esModuleShimsPath = await import.meta.resolve('es-module-shims');
     addPolyfillConfig({
       name: 'es-module-shims',
       test: polyfills.esModuleShims !== 'always' ? '1' : undefined,
-      path: require.resolve('es-module-shims'),
+      path: fileURLToPath(esModuleShimsPath),
       minify: true,
     });
   }
 
   if (polyfills.constructibleStylesheets) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const constructibleStylesheetsPath = await import.meta
+      .resolve('construct-style-sheets-polyfill');
     addPolyfillConfig({
       name: 'constructible-style-sheets-polyfill',
       test: '!("adoptedStyleSheets" in document)',
-      path: require.resolve('construct-style-sheets-polyfill'),
+      path: fileURLToPath(constructibleStylesheetsPath),
     });
   }
 
   if (polyfills.regeneratorRuntime) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const regeneratorRuntimePath = await import.meta.resolve('regenerator-runtime/runtime');
     addPolyfillConfig({
       name: 'regenerator-runtime',
       test: polyfills.regeneratorRuntime !== 'always' ? noModuleSupportTest : undefined,
-      path: require.resolve('regenerator-runtime/runtime'),
+      path: fileURLToPath(regeneratorRuntimePath),
     });
   }
 
   if (polyfills.fetch) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const fetchPath = await import.meta.resolve('whatwg-fetch/dist/fetch.umd.js');
+    const paths = [fileURLToPath(fetchPath)];
+
+    if (polyfills.abortController) {
+      // @ts-ignore import.meta works at runtime on Node 24
+      const abortPath = await import.meta.resolve('abortcontroller-polyfill/dist/umd-polyfill.js');
+      paths.push(fileURLToPath(abortPath));
+    }
+
     addPolyfillConfig({
       name: 'fetch',
       test: `!('fetch' in window)${
         polyfills.abortController
           ? " || !('Request' in window) || !('signal' in window.Request.prototype)"
           : ''
       }`,
-      path: polyfills.abortController
-        ? [
-            require.resolve('whatwg-fetch/dist/fetch.umd.js'),
-            require.resolve('abortcontroller-polyfill/dist/umd-polyfill.js'),
-          ]
-        : [require.resolve('whatwg-fetch/dist/fetch.umd.js')],
+      path: paths,
       minify: true,
     });
   }
@@ -102,22 +119,29 @@ export async function createPolyfillsData(cfg: PolyfillsLoaderConfig): Promise<P
 
     if (polyfills.systemjsExtended) {
       // full systemjs, including import maps polyfill
+      // @ts-ignore import.meta works at runtime on Node 24
+      const systemjsPath = await import.meta.resolve('systemjs/dist/system.min.js');
       addPolyfillConfig({
         name,
         test,
-        path: require.resolve('systemjs/dist/system.min.js'),
+        path: fileURLToPath(systemjsPath),
       });
     } else {
       // plain systemjs as es module polyfill
+      // @ts-ignore import.meta works at runtime on Node 24
+      const systemjsPath = await import.meta.resolve('systemjs/dist/s.min.js');
       addPolyfillConfig({
         name,
         test,
-        path: require.resolve('systemjs/dist/s.min.js'),
+        path: fileURLToPath(systemjsPath),
       });
     }
   }
 
   if (polyfills.dynamicImport) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const dynamicImportPath = await import.meta
+      .resolve('dynamic-import-polyfill/dist/dynamic-import-polyfill.umd.js');
     addPolyfillConfig({
       name: 'dynamic-import',
       /**
@@ -131,64 +155,89 @@ export async function createPolyfillsData(cfg: PolyfillsLoaderConfig): Promise<P
       test:
         "'noModule' in HTMLScriptElement.prototype && " +
         "(function () { try { Function('window.importShim = s => import(s);').call(); return false; } catch (_) { return true; } })()",
-      path: require.resolve('dynamic-import-polyfill/dist/dynamic-import-polyfill.umd.js'),
+      path: fileURLToPath(dynamicImportPath),
       initializer: "window.dynamicImportPolyfill.initialize({ importFunctionName: 'importShim' });",
     });
   }
 
   if (polyfills.intersectionObserver) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const intersectionObserverPath = await import.meta
+      .resolve('intersection-observer/intersection-observer.js');
     addPolyfillConfig({
       name: 'intersection-observer',
       test: "!('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype)",
-      path: require.resolve('intersection-observer/intersection-observer.js'),
+      path: fileURLToPath(intersectionObserverPath),
       minify: true,
     });
   }
 
   if (polyfills.resizeObserver) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const resizeObserverPath = await import.meta
+      .resolve('resize-observer-polyfill/dist/ResizeObserver.global.js');
     addPolyfillConfig({
       name: 'resize-observer',
       test: "!('ResizeObserver' in window)",
-      path: require.resolve('resize-observer-polyfill/dist/ResizeObserver.global.js'),
+      path: fileURLToPath(resizeObserverPath),
       minify: true,
     });
   }
 
   if (polyfills.scopedCustomElementRegistry) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const scopedRegistryPath = await import.meta
+      .resolve('@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js');
     addPolyfillConfig({
       name: 'scoped-custom-element-registry',
       test: "!('createElement' in ShadowRoot.prototype)",
-      path: require.resolve('@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js'),
+      path: fileURLToPath(scopedRegistryPath),
     });
   }
 
   if (polyfills.webcomponents && !polyfills.shadyCssCustomStyle) {
+    // @ts-ignore import.meta works at runtime on Node 24
+    const webcomponentsPath = await import.meta
+      .resolve('@webcomponents/webcomponentsjs/webcomponents-bundle.js');
     addPolyfillConfig({
       name: 'webcomponents',
       test: "!('attachShadow' in Element.prototype) || !('getRootNode' in Element.prototype) || (window.ShadyDOM && window.ShadyDOM.force)",
-      path: require.resolve('@webcomponents/webcomponentsjs/webcomponents-bundle.js'),
+      path: fileURLToPath(webcomponentsPath),
     });
 
     // If a browser does not support nomodule attribute, but does support custom elements, we need
     // to load the custom elements es5 adapter. This is the case for Safari 10.1
+    // @ts-ignore import.meta works at runtime on Node 24
+    const es5AdapterPath = await import.meta
+      .resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js');
     addPolyfillConfig({
       name: 'custom-elements-es5-adapter',
       test: "!('noModule' in HTMLScriptElement.prototype) && 'getRootNode' in Element.prototype",
-      path: require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'),
+      path: fileURLToPath(es5AdapterPath),
     });
   }
 
   if (polyfills.webcomponents && polyfills.shadyCssCustomStyle) {
     // shadycss/custom-style-interface polyfill *must* load after the webcomponents polyfill or it doesn't work.
     // to get around that, concat the two together.
 
+    // @ts-ignore import.meta works at runtime on Node 24
+    const webcomponentsBundlePath = await import.meta
+      .resolve('@webcomponents/webcomponentsjs/webcomponents-bundle.js');
+    // @ts-ignore import.meta works at runtime on Node 24
+    const customStylePath = await import.meta
+      .resolve('@webcomponents/shadycss/custom-style-interface.min.js');
+    // @ts-ignore import.meta works at runtime on Node 24
+    const shadyCssScopedPath = await import.meta
+      .resolve('shady-css-scoped-element/shady-css-scoped-element.min.js');
+
     addPolyfillConfig({
       name: 'webcomponents-shady-css-custom-style',
       test: "!('attachShadow' in Element.prototype) || !('getRootNode' in Element.prototype)",
       path: [
-        require.resolve('@webcomponents/webcomponentsjs/webcomponents-bundle.js'),
-        require.resolve('@webcomponents/shadycss/custom-style-interface.min.js'),
-        require.resolve('shady-css-scoped-element/shady-css-scoped-element.min.js'),
+        fileURLToPath(webcomponentsBundlePath),
+        fileURLToPath(customStylePath),
+        fileURLToPath(shadyCssScopedPath),
       ],
     });
   }

packages/test-runner-core/src/test-helpers.ts

@@ -1,6 +1,9 @@
 /* eslint-disable no-async-promise-executor, no-inner-declarations */
-import { getPortPromise } from 'portfinder';
+import portfinder from 'portfinder';
+
+const { getPortPromise } = portfinder;
 import path from 'path';
+import { fileURLToPath } from 'node:url';
 import { TestRunner, TestRunnerCoreConfig } from './index.ts';
 import { Logger } from './logger/Logger.ts';
 import { TestResult, TestSession, TestSuiteResult } from './test-session/TestSession.ts';
@@ -20,11 +23,16 @@ const logger: Logger = {
 const secondMs = 1000;
 const minuteMs = secondMs * 60;
 
+// @ts-ignore import.meta works at runtime on Node 24; CJS output fixed in PR3
+const __dir = import.meta.dirname;
+// @ts-ignore
+const __mochaPath = fileURLToPath(import.meta.resolve('@web/test-runner-mocha/dist/autorun.js'));
+
 const defaultBaseConfig: Partial<TestRunnerCoreConfig> = {
   watch: false,
-  rootDir: path.join(__dirname, '..', '..', '..'),
+  rootDir: path.join(__dir, '..', '..', '..'),
   testFramework: {
-    path: require.resolve('@web/test-runner-mocha/dist/autorun.js'),
+    path: __mochaPath,
   },
   protocol: 'http:',
   hostname: 'localhost',

packages/test-runner/src/config/loadLauncher.ts

@@ -1,13 +1,15 @@
+import { createRequire } from 'node:module';
 import { TestRunnerStartError } from '../TestRunnerStartError.ts';
 
-/* eslint-disable @typescript-eslint/no-var-requires */
+// @ts-ignore import.meta works at runtime on Node 24
+const require = createRequire(import.meta.url);
 const puppeteerBrowsers = ['chrome', 'firefox'];
 const playwrightBrowsers = ['chromium', 'firefox', 'webkit'];
 
 function loadLauncher(name: string) {
   const pkg = `@web/test-runner-${name}`;
   try {
-    const path = require.resolve(pkg, { paths: [__dirname, process.cwd()] });
+    const path = require.resolve(pkg);
     return require(path);
   } catch (error) {
     if ((error as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {