Bundler failing with `undefined` dependency when a dynamic reference exists in a package

[julienmouraddotcom]

Trying to use react-live module but with no success, I noticed that the bundler was creating an undefined package in one of the dependencies which was causing the react widget to fail. The widget was created using yo liferay-bundle.

Liferay.Loader.define('my-project$regexpu-core@4.7.0/rewrite-pattern', ['module', 'exports', 'require', 'my-project$regjsgen', 'my-project$regjsparser', 'my-project$regenerate', 'my-project$unicode-match-property-ecmascript', 'my-project$unicode-match-property-value-ecmascript', './data/iu-mappings', './data/character-class-escape-sets', 'my-project$undefined'], function (module, exports, require) {
...

Notice my-project$undefined at the end.

Browser log error:

Some information about the require() call follows:
   · Require call id: 1 
   · Required modules: ["my-project@1.0.0"] 
   · Missing modules: (n/a) 
   · Stack trace of the require() call: 
        Error
            at e.value (http://localhost:8080/o/frontend-js-web/loader/loader.js:1:5898)
 Error: The following problems where detected while resolving modules:
    · Missing dependency ':ERROR:Missing version constraints for my-project$undefined in package.json of my-project$regexpu-core@4.7.0' of 'my-project$regexpu-core@4.7.0/rewrite-pattern'

And this is from liferay-npm-bundler-report:

Failed to resolve dependency my-project$undefined with error: Error: Cannot find module 'undefined/package.json' from './node_modules/regexpu-core'

.npmbuildrc:

{
	"translatorTextKey": "",
	"supportedLocales": [],
	"liferayDir": "/Users/julienmourad/projects/bundles/liferay-dxp-7.2.10-dxp-4",
	"webpack": {
		"rules": [
			{
				"test": "src\\/.*\\.js$",
				"use": "babel-loader"
			}
		]
	}
}

.npmbundlerrc:

{
	"create-jar": {
		"output-dir": "dist",
		"features": {
			"js-extender": true,
			"web-context": "/my-project",
			"localization": "features/localization/Language",
			"configuration": "features/configuration.json"
		}
	},
	"dump-report": true
}

package.json:

"devDependencies": {
	"liferay-npm-bundler": "^2.8.0",
	"liferay-npm-build-support": "^2.8.0",
	"copy-webpack-plugin": "4.6.0",
	"webpack": "4.29.6",
	"webpack-cli": "3.3.0",
	"webpack-dev-server": "3.2.1",
	"babel-cli": "6.26.0",
	"babel-preset-env": "1.7.0",
	"babel-preset-react": "6.24.1",
	"babel-loader": "7.1.5"
},
"dependencies": {
	"react": "16.8.6",
	"react-dom": "16.8.6",
	"react-live": "^2.2.2"
},
"scripts": {
	"build": "babel --source-maps -d build src && npm run copy-assets && liferay-npm-bundler",
	"copy-assets": "lnbs-copy-assets",
	"translate": "lnbs-translate",
	"deploy": "npm run build && lnbs-deploy",
	"start": "lnbs-start"
}

[aggie2016]

I've come across a similar issue before where the generator created a reference to an "undefined" package. The issue arose from a require statement in one of my dependencies from semantic-ui-react that was building the statement as a string determined at runtime.

[izaera]

was building the statement as a string determined at runtime.

Oops, that's not supported because our architecture is based on AMD and you need to know the deps in advance. In fact, I doubt that bundlers like webpack or browserify may support that too in 100% of the cases... 🤔

Of course, the bundler should probably warn or error when this situation happens :-(

[rozamirandar]

Looks like webpack bundles every possible file in the final bundle:

https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import

[izaera]

I see, it's a nice effort from webpack.

However we cannot do that because we already bundle every file in the project (we don't traverse any graph like webpack) but the problem is in the AMD define() call, that must have dependencies computed beforehand.

We could find a way to solve that, but it will also go against the last optimizations we made for module resolution (that now is done in the server side to enhance speed).

So, I don't think we will support dynamic dependencies soon unless there's a strong case for it. That said, I'm not the one who decides, I'm just stating my best guess.

[izaera]

However, @julienmouraddotcom , we still don't know if your problem is due to dynamic dependencies. I still need to investigate the regexpu-core@4.7.0/rewrite-pattern library.

[izaera]

Sadly I can confirm that this bug is due to the dynamic require issue. The code inside regexpu-core/rewrite-pattern.js contains:

...
    return require(`regenerate-unicode-properties/${ path }.js`);
...

Which cannot be resolved by our architecture in its current state.

[izaera]

I will add an error to the report file to, at least, make this problem easier to spot while we don't have a proper fix for it.

[izaera]

OK, so I have added code to ignore dynamic requires during build time. Now we don't generate the undefined dependency, just skip it and let it fail during execution of the module (:eyes: note that it may even not fail if the code flow doesn't make the dynamic require to be executed!).

Also, an error is written to the report file:

This should alleviate the problem because:

1. It may make some setups work (as long as they don't execute the dynamic require)
2. If they execute the require, a better error will be shown in the console
3. The problem is correctly explained in the report file