Bare module specifiers error with AngularJS + Nx

Question

i have these imports in my project import MARKETPLACE from 'app.module.js' import angular from 'angular'

i got the following error when i run webpack Uncaught TypeError: The specifier “app.module” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

Uncaught TypeError: The specifier “angular” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

i want just to write import MARKETPLACE from 'app.module.js' import angular from 'angular' because the project i'm working on is too big and not all file on the same level inside the filders so i can't write relative path for every file

i tried write some config inside the webpack.config.cjs here is it

const path = require('path');
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: 'development',
  entry: {
    app: './apps/marketplace/src/main.js',
  },
  resolve: {
    extensions: ['.js'],
    modules: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'src/app'), 'node_modules'],
    alias: {
        'app.module.js': path.resolve(__dirname, 'src/app/app.module.js'),
    }
},

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'output.bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['angularjs-annotate'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.html$/,
        use: ['html-loader'],
      },
    ],
  },
  devServer: {
    port: "4200",
    static: {
      directory: path.join(__dirname, 'src'),
    },
    historyApiFallback: {
      index: './apps/marketplace/src/ROOT/404.html'
    }
  },
  plugins: [
    new CopyPlugin({
        patterns: [
            {
                from: path.resolve(__dirname, "src/app/app.module.js"),
                to: 'app.module.js',
            },
        ],
    }),
],
};

i see that the webpack load the files here the logs:

nx serve marketplace

> nx run marketplace:serve

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:4200/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.47:4200/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\AhmadAllan\Desktop\workspace\Blulogix\nx-migrate-angularjs\apps\marketplace\src' directory
<i> [webpack-dev-server] 404s will fallback to './apps/marketplace/src/ROOT/404.html'
asset output.bundle.js 1.62 MiB [emitted] (name: app)
asset app.module.js 6.59 KiB [emitted] [from: apps/marketplace/src/app/app.module.js] [copied]
runtime modules 27.4 KiB 12 modules
modules by path ./node_modules/ 1.49 MiB
  modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
  modules by path ./node_modules/webpack/hot/*.js 5.3 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.8 KiB 4 modules
  modules by path ./node_modules/angular/*.js 1.31 MiB
    ./node_modules/angular/index.js 48 bytes [built] [code generated]
    ./node_modules/angular/angular.js 1.31 MiB [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
modules by path ./apps/marketplace/src/ 6.73 KiB
  ./apps/marketplace/src/main.js 105 bytes [built] [code generated]
  ./apps/marketplace/src/app/app.module.js 5.66 KiB [built] [code generated]
  ./apps/marketplace/src/app/components/templates/Loading.html 997 bytes [built] [code generated]
webpack 5.89.0 compiled successfully in 15293 ms

but still i got the same error