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

https://stackblitz.com/edit/vitejs-vite-rds4k3?file=src%2FApp.tsx
Browser environment, in this instance

    "piral-cli": "^1.4.2",
    "piral-cli-vite": "1.0.3",
    "piral-core": "^1.4.2",
    "vite": "^5.0.8",
    "vite-tsconfig-paths": "^4.2.2"

Description

When running piral debug, the vite-tsconfig-paths plugin does not seem to be working. Aliased imports are failing.
It seems as if vite.config.js is not being loaded at all.

The alias @src is defined in tsconfig.json and loaded through tsconfigPaths() vite plugin.

Steps to Reproduce

1. Open https://stackblitz.com/edit/vitejs-vite-rds4k3?file=src%2FApp.tsx
2. Standard vite dev build will run
3. In provided terminal, kill existing dev server and run piral debug

Expected behavior

Bold test text should be visible at the top left of the layout

Actual behavior

Project starts, but Bold test is missing and terminal is showing errors about a failing import

Possible Origin / Solution

--

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

• Ubuntu 22.04.02 LTS
• node 18.20.0
• yarn 1.22.19
• piral-cli 1.0.2

Description

I would like to define the Angular dependencies within the app shell in order to share them with the pilets. If the reproduction steps defined in the next step are executed, the following error message occurs:

🦋 piral-cli v1.0.2
ℹ Bundle emulator ...
vite v2.9.16 building for production...
transforming...
✓ 451 modules transformed.
[vite:esbuild-transpile] Transform failed with 1 error:
assets/index.be692293.js:29639:8: ERROR: Expected ";" but found "changes"

Expected ";" but found "changes"
29637| * Returns Observable of QueryList notifying the subscriber of changes.
29638| */
29639| get changes() {
| ^
29640| return this._changes || (this._changes = new EventEmitter());
29641| }

✖ [0174] The bundling process failed: Transform failed with 1 error:
assets/index.be692293.js:29639:8: ERROR: Expected ";" but found "changes"
🐛 Find detailed descriptions at https://docs.piral.io/code/search

Steps to Reproduce

1. mkdir test
2. cd test
3. piral new --bundler vite --npm-client yarn --target .
4. Add Angular dependencies (dependencies) within the package.json

{
  "@angular/common": "^15",
  "@angular/compiler": "^15",
  "@angular/core": "^15",
  "@angular/router": "^15",
  "@angular/platform-browser": "^15",
  "@angular/platform-browser-dynamic": "^15",
  "core-js": "^3.19.0",
  "rxjs": "^7.4",
  "zone.js": "~0.13.0"
}

5. Add imports (importmap.imports) within the package.json

{
  "@angular/common": ".",
  "@angular/compiler": ".",
  "@angular/core": ".",
  "@angular/platform-browser": ".",
  "@angular/platform-browser-dynamic": ".",
  "@angular/router": ".",
  "rxjs": "."
}

6. yarn install
7. piral build

Expected behavior

The app shell is built successfully.

Actual behavior

An error message is thrown because a ; is expected but changes was found.

Possible Origin/Solution

If Angular is used in version 15, this problem does not occur.

Bug Report

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

[Package Version, OS, Browser, ...]
piral: 1.3.3
piral-cli: 1.3.3
piral-cli-vite: 1.0.1
OS: Windows,
Browser: Chrome 119

Description

Cannot use piral-cli-vite with Vue.js framework. Extending Vite config is also not working correctly.

Steps to Reproduce

1. Clone MWE repo: https://gitlab.com/achwilko/mwe-piral-cli-vue
2. NPM install and build shell part
3. NPM install and run mfe1 part
4. piral-cli-vite will show error "failed to load the config"

Expected behavior

piral-cli-vite should work correctly using extended config via vite.config.js (including for example plugins like @vitejs/plugin-vue) and pilet should start locally and render Vue components using piral-vue-3 converter.

Actual behavior

piral-cli-vite is not working / bundling correctly while using extended config vite.config.js with @vitejs/plugin-vue to render Vue component (using piral-vue-3 converter)

Possible Origin / Solution

As discussed on Gitter (https://app.gitter.im/#/room/#piral-io_community:gitter.im), we could improve a little bit piral-cli-vite package for easier Vite configuration modification via vite.config.js

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

• Ubuntu 22.04.02 LTS
• node 18.20.0
• yarn 1.22.19
• piral-cli 1.0.2

Description

If the piral new command is executed without the --bundler flag followed by the piral build command and then for example vite is selected, the following error message is issued:

✖ [0002] Could not install the package "piral-cli-vite@^1" using yarn. Make sure yarn is correctly installed and accessible: Error: warning package.json: No license field
warning [email protected]: No license field
error Couldn't find any versions for "piral-cli-vite" that matches "^1"
warning package.json: No license field
warning [email protected]: No license field
error Couldn't find any versions for "piral-cli-vite" that matches "^1"
🐛 Find detailed descriptions at https://docs.piral.io/code/search

Steps to Reproduce

1. mkdir test
2. cd test
3. piral new --npm-client yarn --target .
4. piral build
5. Select vite

Expected behavior

I would expect the bundler to be installed.

Actual behavior

An error message is thrown that there is no version of the bundler that matches ^1.

Possible Origin/Solution

The version of bundler has not yet been updated to the new major version.

Workaround

• When using piral new, use the --bundler flag
• Add the bundler with the latest version as devDependency to package.json and then install all dependencies with npm i or yarn

Support for TypeScript configuration files

Description

Currently, it seems that only vite.config.js files are supported. But it would be great if vite.config.ts files could be used as well.

Background

Discussion

The best argument for me is, that vitejs does support this out of the box and it is an expected behavior if one creates a Piral project using TS + Vite to have support for config files in TS too.

Bug Report

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

[Package Version, OS, Browser, ...]
piral: 1.3.3
piral-cli: 1.3.3
piral-cli-vite: latest (1.0.0)
OS: macOS 13,
Browser: Chrome 118.0.5993.117 ARM64

Description

Sourcemaps are not being properly generated when using vite as a pilet bundler.

Steps to Reproduce

1. Spin up an App Shell following instructions here: https://docs.piral.io/guidelines/tutorials/02-getting-started
2. Build the App Shell Emulator
3. Spin up a Pilet using Vite and the Bundler
4. Run the pilet

Expected behavior

Message regarding the pilet plugin not generating a sourceamp should not appear in terminal
Output should have sourcemaps (be searchable in Chrome Dev Tools, debuggable in VSCode)

Actual behavior

The following message shows in terminal when running the pilet:

(pilet plugin) Sourcemap is likely to be incorrect: a plugin (pilet) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

Sourcemaps are not generated, unable to set breakpoints in VSCode after launching it against the app in development, unable to view the mapped files in Chrome Dev Tools

Bug Report

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

[Package Version, OS, Browser, ...]
piral: 1.3.3
piral-cli: 1.3.3
piral-cli-vite: 1.0.2
OS: Windows,
Browser: Chrome 119

Description

[Description of the bug]
Vue components CSS styles cannot be loaded while using piral-cli-vite with piral-vue-3

Steps to Reproduce

1. Clone MWE branch: https://gitlab.com/achwilko/mwe-piral-cli-vue/-/tree/fix/pilet-css-uri-issue?ref_type=heads
2. NPM install and build shell part
3. NPM install and run mfe1 part
4. piral-cli-vite will show the error "ERR Error: Invalid URI "/0/style.css?"

ERR Error: Invalid URI "/0/style.css?_=0.48254091596936854"
GET /$pilet-api/0/style.css?_=0.48254091596936854

Expected behavior

CSS styles from Vue components (Page1.vue) should be applied and work correctly.

Actual behavior

CSS styles from Vue component are not applied with error ERR Error: Invalid URI "/0/style.css?

Possible Origin / Solution

As discussed on Gitter, maybe it's related to way how CSS styles are injected in vite pilets, eg.

As a workaround for now (but not efficient regarding final build) is to override Vite config like below:

// vite.config.js

const pluginVue = require("@vitejs/plugin-vue");

module.exports = function (config) {
  config.plugins.push(pluginVue());

  // avoid using hashes to reference correctly to pilet CSS file
  config.build.rollupOptions.output.assetFileNames = "[name][extname]";

  return config;
};

Would be great to improve vite pilet CSS inject way to avoid the above issue.