smapiot / piral

🚀 Framework for next generation web apps using micro frontends. ⭐️ Star to support our work!
https://piral.io
MIT License
1.68k stars 125 forks source link

Failure to build piral instance in Windows and node18 #619

Closed peter-at-work closed 1 year ago

peter-at-work commented 1 year ago

Bug Report

For more information, see the CONTRIBUTING guide.

Prerequisites

Environment Details and Version

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.

https://github.com/smapiot/piral/blob/11a570fc7fbacb6c663f4a614d976730cb8d69be/src/framework/piral-core/src/tools/codegen.ts#L69-L70

FlorianRappl commented 1 year ago

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.