cypress-io · rockindahizzy · Nov 8, 2022 · Nov 8, 2022
diff --git a/npm/webpack-dev-server/package.json b/npm/webpack-dev-server/package.json
@@ -21,6 +21,7 @@
     "fs-extra": "9.1.0",
     "html-webpack-plugin-4": "npm:html-webpack-plugin@^4",
     "html-webpack-plugin-5": "npm:html-webpack-plugin@^5",
+    "local-pkg": "0.4.1",
     "speed-measure-webpack-plugin": "1.4.2",
     "tslib": "^2.3.1",
     "webpack-dev-server": "^4.7.4",

diff --git a/npm/webpack-dev-server/src/makeWebpackConfig.ts b/npm/webpack-dev-server/src/makeWebpackConfig.ts
@@ -1,11 +1,12 @@
 import { debug as debugFn } from 'debug'
 import * as path from 'path'
 import { merge } from 'webpack-merge'
+import { importModule } from 'local-pkg'
 import type { Configuration, EntryObject } from 'webpack'
 import { makeCypressWebpackConfig } from './makeDefaultWebpackConfig'
 import type { CreateFinalWebpackConfig } from './createWebpackDevServer'
 import { configFiles } from './constants'
-import { dynamicAbsoluteImport, dynamicImport } from './dynamic-import'
+import { dynamicImport } from './dynamic-import'
 
 const debug = debugFn('cypress:webpack-dev-server:makeWebpackConfig')
 
@@ -90,7 +91,7 @@ export async function makeWebpackConfig (
 
     if (configFile) {
       debug('found webpack config %s', configFile)
-      const sourcedConfig = await dynamicAbsoluteImport(configFile)
+      const sourcedConfig = await importModule(configFile)
 
       debug('config contains %o', sourcedConfig)
       if (sourcedConfig && typeof sourcedConfig === 'object') {

diff --git a/system-tests/projects/webpack-dev-server-ts/cypress.config.ts b/system-tests/projects/webpack-dev-server-ts/cypress.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    devServer: {
+      bundler: 'webpack',
+    } as any,
+    supportFile: false,
+  },
+})
diff --git a/system-tests/projects/webpack-dev-server-ts/cypress/support/component-index.html b/system-tests/projects/webpack-dev-server-ts/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/system-tests/projects/webpack-dev-server-ts/helloWorld.ts b/system-tests/projects/webpack-dev-server-ts/helloWorld.ts
@@ -0,0 +1,3 @@
+export const helloWorld = () => {
+  return 'Hello World'
+}
diff --git a/system-tests/projects/webpack-dev-server-ts/package.json b/system-tests/projects/webpack-dev-server-ts/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "ct-webpack-ts",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "html-webpack-plugin": "^5.5.0",
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.8.4",
+    "webpack": "^5.74.0",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "license": "ISC",
+  "author": "",
+  "keywords": []
+}
diff --git a/system-tests/projects/webpack-dev-server-ts/test.cy.ts b/system-tests/projects/webpack-dev-server-ts/test.cy.ts
@@ -0,0 +1,5 @@
+import { helloWorld } from './helloWorld'
+
+it('should return "Hello World"', () => {
+  expect(helloWorld()).eq('Hello World')
+})
diff --git a/system-tests/projects/webpack-dev-server-ts/tsconfig.json b/system-tests/projects/webpack-dev-server-ts/tsconfig.json
@@ -0,0 +1,7 @@
+{ 
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["**/*.ts"]
+}
diff --git a/system-tests/projects/webpack-dev-server-ts/webpack.config.ts b/system-tests/projects/webpack-dev-server-ts/webpack.config.ts
@@ -0,0 +1,24 @@
+export default {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  entry: './app.ts',
+  output: {
+    filename: 'bundle.js',
+  },
+  resolve: {
+    // Add `.ts` and `.tsx` as a resolvable extension.
+    extensions: ['.ts', '.tsx', '.js'],
+    // Add support for TypeScripts fully qualified ESM imports.
+    extensionAlias: {
+      '.js': ['.js', '.ts'],
+      '.cjs': ['.cjs', '.cts'],
+      '.mjs': ['.mjs', '.mts'],
+    },
+  },
+  module: {
+    rules: [
+      // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader`
+      { test: /\.([cm]?ts|tsx)$/, loader: 'ts-loader' },
+    ],
+  },
+}