Issue with using LWC base components <lightning-input> with the LWR Single Page Application

[nps6211]

Description

I've started with a Single Page Application on LWR, Able to run the app with Lightning design system and LWC base component package.
When I use <lightning-input> tag in my component js, it breaks the compilation and when I tried to load the application I see following error on terminal along with on browser I see blank page with error on console. Also same thing happens when I tried to use any onchange event like on any of the form element fields, like textarea, checkbox etc.

Error details (copied from Terminal):

Running LWR v0.7.3 at: http://localhost:3000 | mode: dev
Watching:  D:\SFDC Dev\LWR\lwr-new\lwr-project\src\layouts\main.html
Watching:  D:\SFDC Dev\LWR\lwr-new\lwr-project\src\modules\example\app\app.js
Watching:  D:\SFDC Dev\LWR\lwr-new\lwr-project\src\modules\example\app\app.html
Watching:  D:\SFDC Dev\LWR\lwr-new\lwr-project\src\modules\example\app\app.css
Error: Transform failed with 1 error:
<stdin>:5:191: error: Syntax error "t"
    at failureErrorWithLog (D:\SFDC Dev\LWR\lwr-new\lwr-project\node_modules\@lwrjs\compiler\node_modules\esbuild\lib\main.js:1224:15)
    at D:\SFDC Dev\LWR\lwr-new\lwr-project\node_modules\@lwrjs\compiler\node_modules\esbuild\lib\main.js:1072:33
    at D:\SFDC Dev\LWR\lwr-new\lwr-project\node_modules\@lwrjs\compiler\node_modules\esbuild\lib\main.js:568:9
    at handleIncomingPacket (D:\SFDC Dev\LWR\lwr-new\lwr-project\node_modules\@lwrjs\compiler\node_modules\esbuild\lib\main.js:657:9)
    at Socket.readFromStdout (D:\SFDC Dev\LWR\lwr-new\lwr-project\node_modules\@lwrjs\compiler\node_modules\esbuild\lib\main.js:535:7)
    at Socket.emit (events.js:315:20)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23) {
  errors: [
    {
      detail: undefined,
      location: [Object],
      notes: [],
      text: 'Syntax error "t"'
    }
  ],
  warnings: []
}

Error screenshot from Browser (localhost:3000)

Steps to Reproduce

• Clone the project boilerplate from here, I've created this project from my local system.
• setup the project directory and navigate to it from command line.
• Run the following command npm install and npm dev run which will run the local server on the localhost:3000
• Open the browser and Navigate to the localhost:3000 see the error message on the console and terminal as mentioned.
• Now for a moment remove the <lightning-input> tag from the component js /src/modules/example/app/app.html and run the server again, see the error is gone.

Code Snippet

lwr.config.json

{
    "lwc": { "modules": [{ "dir": "$rootDir/src/modules" },{ "npm": "lightning-base-components" }] },
    "assets": [
        {
            "alias": "assetsDir",
            "dir": "$rootDir/node_modules/@salesforce-ux/design-system/assets",
            "urlPath": "/assets"
        }
    ],
    "routes": [
        {
            "id": "example",
            "path": "/",
            "rootComponent": "example/app",
            "layoutTemplate": "$layoutsDir/main.html",
            "bootstrap": {
                "syntheticShadow": true
            }
        }
    ]
}

package.json

{
  "name": "lwr-project",
  "version": "0.0.1",
  "license": "MIT",
  "private": true,
  "type": "module",
  "scripts": {
    "clean": "rm -rf __lwr_cache__",
    "dev": "lwr serve",
    "start": "lwr serve --mode prod",
    "start:compat": "lwr serve --mode compat",
    "start:prod-compat": "lwr serve --mode prod-compat"
  },
  "dependencies": {
    "@salesforce-ux/design-system": "^2.17.5",
    "lightning-base-components": "^1.15.4-alpha",
    "lwc": "2.17.0",
    "lwr": "0.7.3"
  },
  "engines": {
    "node": ">=14.15.4 <19"
  }
}

Component HTML and JS

<!-- app.html -->
<template>
    <div class="container">
        <lightning-layout horizontal-align="center">
            <lightning-layout-item padding="around-medium">
                <div class="slds-text-heading_large">Sample LWC App</div>
            </lightning-layout-item>
        </lightning-layout>
        <lightning-layout horizontal-align="center">
            <lightning-layout-item padding="around-medium">
                <lightning-input onchange={handleOnChange} value={inputVal} label="Enter Name"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item padding="around-medium">
                <lightning-button label="Click Me!" onclick={handleClick}></lightning-button>
            </lightning-layout-item>
        </lightning-layout>
        <lightning-layout horizontal-align="center">
            <lightning-layout-item padding="around-medium"><div>Entered Value: {inputVal}</div></lightning-layout-item>
        </lightning-layout>
    </div>
</template>


// app.js
import {track,LightningElement} from 'lwc';
export default class HelloWorldApp extends LightningElement {
    @track inputVal = 'Default text';

    handleOnChnage(event){
        this.inputVal = event.target.value;
    }

    handleClick(event){
        this.inputVal = 'Changed By Click';
    }

    connectedCallback(){
        //console.log('In connected callback');
    }

    renderedCallback(){
        //console.log('In rendered callback');
    }
}

Browsers Affected

All browsers, tested with Chrome, Mozilla, Edge

Version

• Node Version: v14.16.0
• OS: Windows 10
• NPM: 6.14.11
• @salesforce-ux/design-system- 2.18.1
• lightning-base-components- 1.15.4-alpha
• lwc- 2.17.0
• lwr- 0.7.3

[nps6211]

I've gone through one of another issue reported here and try to run the app in prod mode with warmup=true parameter and it didn't work either.

[rahulgawale]

@nps6211 It worked for me with Windows Subsystem For Linux (WSL) and yarn.

So Here are the steps if you are using yarn.

1. Install the Windows Subsystem for Linux using the command wsl --install as mentioned in this doc.
2. Install nvm, node.js, and npm in WSL
3. Remove yarn cache and run yarn add.
4. Run yarn start.

[nps6211]

@rahulgawale, I didn't tried this with WSL but want to understand, is is mean that windows is not supported with LWR and in order to deploy the LWR apps on windows OS the WSL will be required. Actually we are planning to deploy the application on Azure Cloud with IIS. that's why wanted to check whether we should go with LWR or something else.
@nolanlawson,

[rahulgawale]

@nps6211 I think it is just a compiler issue. once the code is compiled and bundled, it should be compatible with Windows.

[nps6211]

@rahulgawale It didn't work for me. Anything else which we can try?

[rahulgawale]

@nps6211 Did you install the WSL and tried setting up your project from scratch in the Linux terminal?
Here are the steps to set up on Windows.

[nps6211]

I installed WSL but not able to install the NVM on it due to some error. It is related to one of the open issue with NVM and WSL. nvm-sh/nvm#2412.

But I think LWR is still in pilot (Dev Preview) program, so its better to switch to different framework for full fletch web app development and support.

[ravinarayanan89]

Did this issue got resolved? i am facing the same issue

[rahulgawale]

@ravinarayanan89 Yes I was able to resolve the issue after installing WSL on my windows machine.

[rahulgawale]

@nps6211 I think you don't need to install NVM unless you want to work with a particular version of Node.Js, lwr still complies the code but with warnings that can be ignored.

[MateBenko]

If you replace line 11 in node_modules/@lwrjs/module-registry/build/es/module-record.js
"moduleSpecifier = ./${path.join(importeePath, '..', moduleSpecifier)};" with "moduleSpecifier = ./${path.join(importeePath, '..', moduleSpecifier).replace(/\\/g, '/')};" that solves the issue. They used path.join() that messes up the "/" with "\" on Windows

[rahulgawale]

@MateBenko That's great, you found it. It was my initial speculation that this is related to how the path is managed by two OSes. I tried to look into the code but could not find it. I am glad you found it. Thanks for putting it here. I will give it a try! @nolanlawson maybe could you please help to fix this in the source code?

[rahulgawale]

@MateBenko Could you please share the working example of your project over GitHub? Also please let me know the Node version you are using, Thanks!