webpack babel build and external folder issue (k6 typescript)

For a project, I have to create some stress test and I found k6.
The project is made with typescript then I use the template https://github.com/k6io/template-typescript.

My tree is :

- project (containing my angular project in typescript)
-- src folder
- k6
-- webpack.config.ts
-- package.json
-- src folder (containing my test files in typescript)

k6 is using webpack/babel to transform ts files in js files and I'm not familiar with.

Some of my test import files that are in my project/src folder but I have errors during build.

Error example:

ERROR in ../project/src/config-values.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/fred/Documents/project/src/config-values.ts: Unexpected token, expected "{" (4:7)
2 | import { getRandomBoolean } from "./random-values"
3 |
> 4 | export enum ConfigType {
|        ^

If I copy the files that are in my project folder in my k6 folder, I have no error but I don't want to have to keep update two folders which must be identical.

Despite some research, I haven't found a solution yet and I'm a little bit stuck to import ts files that are outside of my k6 folder.

Here is my webpack config

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const GlobEntries = require('webpack-glob-entries');
module.exports = {
mode: 'production',
entry: GlobEntries('./src/*test*.ts'), // Generates multiple entry for each test
output: {
path: path.join(__dirname, 'dist'),
libraryTarget: 'commonjs',
filename: '[name].js',
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
use: 'babel-loader',
exclude: /node_modules/,
},
],
},
target: 'web',
externals: /^(k6|https?\:\/\/)(\/.*)?/,
// Generate map files for compiled scripts
devtool: "source-map",
stats: {
colors: true,
},
plugins: [
new CleanWebpackPlugin(),
// Copy assets to the destination folder
// see `src/post-file-test.ts` for an test example using an asset
new CopyPlugin({
patterns: [{
from: path.resolve(__dirname, 'assets'),
noErrorOnMissing: true
}],
}),
],
optimization: {
// Don't minimize, as it's not used in the browser
minimize: false,
},
};

and my package.json

{
"name": "typescript",
"version": "1.0.0",
"main": "index.js",
"repository": "ssh://git@github.com/k6io/example-typescript.git",
"author": "Simon Aronsson <simme@k6.io>",
"license": "MIT",
"devDependencies": {
"@babel/core": "7.13.16",
"@babel/plugin-proposal-class-properties": "7.13.0",
"@babel/plugin-proposal-object-rest-spread": "7.13.8",
"@babel/preset-env": "7.13.15",
"@babel/preset-typescript": "7.13.0",
"@graphql-codegen/cli": "^2.13.7",
"@graphql-codegen/client-preset": "^1.0.7",
"@graphql-codegen/fragment-matcher": "^3.3.1",
"@graphql-codegen/gql-tag-operations-preset": "^1.6.0",
"@graphql-codegen/introspection": "2.2.1",
"@graphql-codegen/typescript": "^2.7.4",
"@graphql-codegen/typescript-apollo-angular": "^3.5.4",
"@graphql-codegen/typescript-graphql-request": "^4.5.8",
"@graphql-codegen/typescript-operations": "^2.5.4",
"@types/k6": "~0.35.0",
"@types/webpack": "5.28.0",
"babel-loader": "8.2.2",
"clean-webpack-plugin": "4.0.0-alpha.0",
"copy-webpack-plugin": "^9.0.1",
"gql-tag": "^1.0.1",
"graphql": "^16.6.0",
"ramda": "^0.28.0",
"ramda-adjunct": "^3.2.0",
"typescript": "^4.8.4",
"webpack": "^5.87.0",
"webpack-cli": "4.6.0",
"webpack-glob-entries": "^1.0.1"
},
"scripts": {
"format": "webpack",
"codegen": "graphql-codegen --config codegen.ts"
}
}

Do you have an idea to resolve this ?

I found a solution.

I don't know if it's the change in my tree structure or the change in my configuration files.

My new tree is

- webpack.config.ts
- package.json
- project
- k6

package.json

{
"name": "webpack-ts-babel",
"version": "1.0.0",
"main": "webpack.config.js",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.22.5",
"babel-loader": "^9.1.2",
"babel-preset-es2015": "^6.24.1",
"ts-loader": "^9.4.3",
"typescript": "^4.8.4",
"webpack": "^5.88.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.0",
"webpack-glob-entries": "^1.0.1"
},
"scripts": {
"k6": "webpack"
}
}

webpack.config.js

const path = require('path');
const GlobEntries = require('webpack-glob-entries');
module.exports = {
mode: 'production',
entry: GlobEntries('./k6/src/*test*.ts'),
devtool: 'inline-source-map',
target: ['web', 'es5'],
externals: /^(k6|https?\:\/\/)(\/.*)?/,
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [ '.ts', '.js' ],
},
output: {
path: path.join(__dirname, 'k6/dist'),
libraryTarget: 'commonjs',
filename: '[name].js',
},
};

tsconfig.json in k6 folder

{
"compilerOptions": {
"target": "es5",
"moduleResolution": "node",
"module": "commonjs",
"noEmit": false,
"allowJs": true,
"removeComments": true,
"strict": false,
"noImplicitAny": false,
"noImplicitThis": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noImplicitReturns": false,
"noFallthroughCasesInSwitch": false,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipLibCheck": true
}
}

I know that my tsconfig removed a lot of typescript verification but it's mandatory as I'm not alone on the project folder and I can't modify all files in it to have no error during build.

Now my k6 tests are working and use the files imported from my project.