Failure to build piral instance in Windows and node18

[peter-at-work]

Bug Report

For more information, see the CONTRIBUTING guide.

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you perform a search in the issues?

Environment Details and Version

• piral-cli / piral framework (v1.1.0)
• Windows
• node18 and npm9

Description

After setting up a new piral instance, and building the repo (to build the emulator and the distribution), the build returns an error, not being able to find dependencies/modules.

Steps to Reproduce

1. In Windows, with node18 installed, set up a new piral instance:

npm init piral-instance -- --target simple-piral --defaults
cd simple-piral

2. npm install and build the piral instance:

npm ci
npx piral build --bundler webpack5

Expected behavior

The emulator and distribution bundles get built.

Actual behavior

The following errors are presented:

ERROR in ./node_modules/piral-core/app.codegen 2:4-50
Module not found: Error: Can't resolve '..\tslib\tslib.es6.mjs' in 'C:\repos\local\simple-piral\node_modules\piral-core'
Did you mean './..\tslib\tslib.es6.mjs'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
 @ ./node_modules/piral-core/esm/helpers.js 3:0-70 15:4-21 16:4-21
 @ ./node_modules/piral-core/esm/index.js 2:0-26 2:0-26
 @ ./node_modules/piral/esm/index.js 1:0-27 1:0-27
 @ ./src/index.tsx 9:0-65 13:15-29 18:30-47 28:46-51

ERROR in ./node_modules/piral-core/app.codegen 3:0-41
Module not found: Error: Can't resolve '..\react\index.js' in 'C:\repos\local\simple-piral\node_modules\piral-core'
Did you mean './..\react\index.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
 @ ./node_modules/piral-core/esm/helpers.js 3:0-70 15:4-21 16:4-21
 @ ./node_modules/piral-core/esm/index.js 2:0-26 2:0-26
 @ ./node_modules/piral/esm/index.js 1:0-27 1:0-27
 @ ./src/index.tsx 9:0-65 13:15-29 18:30-47 28:46-51

ERROR in ./node_modules/piral-core/app.codegen 4:0-45
Module not found: Error: Can't resolve '..\react-dom\index.js' in 'C:\repos\local\simple-piral\node_modules\piral-core'
Did you mean './..\react-dom\index.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
 @ ./node_modules/piral-core/esm/helpers.js 3:0-70 15:4-21 16:4-21
 @ ./node_modules/piral-core/esm/index.js 2:0-26 2:0-26
 @ ./node_modules/piral/esm/index.js 1:0-27 1:0-27
 @ ./src/index.tsx 9:0-65 13:15-29 18:30-47 28:46-51

ERROR in ./node_modules/piral-core/app.codegen 5:0-60
Module not found: Error: Can't resolve '..\react-router\esm\react-router.js' in 'C:\repos\local\simple-piral\node_modules\piral-core'
Did you mean './..\react-router\esm\react-router.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
 @ ./node_modules/piral-core/esm/helpers.js 3:0-70 15:4-21 16:4-21
 @ ./node_modules/piral-core/esm/index.js 2:0-26 2:0-26
 @ ./node_modules/piral/esm/index.js 1:0-27 1:0-27
 @ ./src/index.tsx 9:0-65 13:15-29 18:30-47 28:46-51

ERROR in ./node_modules/piral-core/app.codegen 6:0-68
Module not found: Error: Can't resolve '..\react-router-dom\esm\react-router-dom.js' in 'C:\repos\local\simple-piral\node_modules\piral-core'
Did you mean './..\react-router-dom\esm\react-router-dom.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
 @ ./node_modules/piral-core/esm/helpers.js 3:0-70 15:4-21 16:4-21
 @ ./node_modules/piral-core/esm/index.js 2:0-26 2:0-26
 @ ./node_modules/piral/esm/index.js 1:0-27 1:0-27
 @ ./src/index.tsx 9:0-65 13:15-29 18:30-47 28:46-51

5 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.88.2 compiled with 5 errors in 18134 ms
✖ [0174] The bundling process failed: Invalid input.
+ Find detailed descriptions at https://docs.piral.io/code/search

Possible Origin/Solution

First attempt of setting webpack configuration to set preferRelative did not fix the problem.

module.exports = function (config) {
  config.resolve.preferRelative = true
}

In the piral-core codegen module, it looks like the import statements are being generated with the relative paths of the dependencies like react, react-dom, etc. The relative paths are generated using the platform path separator (backslash in windows). Since these relative paths are to be used in import statements, they should be normalized back to the posix/slash path separator and nodejs would process the path correctly, regardless of the platform.

piral/src/framework/piral-core/src/tools/codegen.ts

Lines 69 to 70 in 11a570f

	const path = relative(origin, absPath);
	return path;

[FlorianRappl]

Thanks for the report and the associated analysis - it helps a lot!

A fix for this is out in the preview and will be included in the 1.2.0 release coming this week. In the meantime you can use the next version.