webpack: webpack native require doesn't work in windows

@eng-dibo Please enable them https://webpack.js.org/configuration/module/#moduleparserjavascriptcommonjsmagiccomments, it was disable by default due perf reasons

Feel free to feedback

is there a workaround to use dynamic import with webpack magic comments in Angular projects?

Webpack should not throw erros in this case

noParse: /[/\]native-require.js$/,

great idea because it takes OS-specific path into consideration. I think this will solve the first issue (i.e using native-require), but is there a workaround to use dynamic import with webpack magic comments in Angular projects?

I will try your recommendation thank you @alexander-akait so much for your great help

What is the error on windows? Sounds like the problem with can you try: noParse: /[\/\\]native-require.js$/,?

@eng-dibo when you write:

let fileUrl = new URL("file.js",import.meta.url)

You create asset module (i.e. webpack copy this file). But as you written above you already have files, so you need to disable it:

1. You can use

let filePath = "file.js";
let fileUrl = new URL(filePath,import.meta.url)

So it will be not statically analizable, but note - import.meta.url will be convert to file:// (look at generated webpack.js, for better debug just disable devtool: false)

1. (optional) Also if want to use ESM modules, you need to enable it for webpack and disable bundling import.meta.url using configuration - https://webpack.js.org/configuration/module/#moduleparserjavascriptimportmeta, you can special it only for some files using test, but looks angular-cli register own loader for typescript files so you need to look at docs how change options for it

i.e.

module: {
    parser: {
      javascript: {
        importMeta: false,
      },
    },
  },

For import(...) you have valid solution, i.e.:

import(/* webpackIgnore: true */ fileUrl.toString())

webpack keeps import(...) as is (looks like you want it)

Dynamic import's specifier must be of type 'string', but here has type 'URL'.ts(7036)

This error from typescript (not webpack), very strange that ts doesn’t support new URL(...) as argument, but using .toString() is good solution here

I tried your reproducible test repo and all works fine:

akait@akait-notebook:~/IdeaProjects/dibo$ npm run start:webpack

> ngx-cms@1.1.0 start:webpack
> webpack && node dist/webpack && shx cp src/file.js dist/file.js

asset webpack.js 3.82 KiB [compared for emit] (name: webpack)
runtime modules 937 bytes 4 modules
built modules 334 bytes [built]
  ./src/index.ts 292 bytes [built] [code generated]
  external "node:path" 42 bytes [built] [code generated]
webpack 5.73.0 compiled successfully in 94 ms
file:///home/akait/IdeaProjects/dibo/src/file.js
=====>OK

My code:

import { resolve } from "node:path";

let filePath = "file.js";
let fileUrl = new URL(filePath, import.meta.url)

console.log(fileUrl.toString())

import(/* webpackIgnore: true */ fileUrl.toString())
  .then(result => console.log(result.default))
  .catch(error => console.error({ error }));

I want to ask you what do you expected? Do you want to keep import(...) as is and allow to async loading or do you want to bundle files which will be resolved in new URL()?

@eng-dibo

let filePath = resolve(__dirname, "file") + ".js";
import(/* webpackIgnore: true */ filePath)

is not statically analizable, also resolve is not good idea to use here, because import(...) should have URL, not path

@eng-dibo please create small reproducible repo. I’ll take a look

please use webpack magic comments require(/* webpackIgnore: true */"blabla"); instead of nativeRequire