LWR Build is not working in both WSL and Windows

[rahulgawale]

Description

Steps to Reproduce

1. Create a new lwr app with single page app option.
2. Add SLDS styling to lwr site.
3. Add lightning base components.
4. Override the layout by providing custom layout html

lwr.config.json

{
    "lwc": {
        "modules": [
            {"dir": "$rootDir/src/modules"},
            {"npm": "lightning-base-components"},
            {
                "name": "contexts",
                "path": "$rootDir/src/contexts/contexts.js"
            }
        ]
    },
    "bundleConfig": {
        "exclude": ["lwc", "lwr/navigation", "@lwc/synthetic-shadow"]
    },
    "routes": [
        {
            "id": "auth-callback",
            "path": "/auth-callback",
            "rootComponent": "page/authCallback",
            "layoutTemplate": "$layoutsDir/auth-callback.html"
        },
        {
            "id": "app",
            "path": "/app",
            "rootComponent": "page/appRoot",
            "layoutTemplate": "$layoutsDir/app.html",
            "bootstrap": {
                "syntheticShadow": true
            }
        },
        {
            "id": "playground",
            "path": "/playground",
            "rootComponent": "page/playground",
            "layoutTemplate": "$layoutsDir/playground.html",
            "bootstrap": {
                "syntheticShadow": true
            }
        },
        {
            "id": "siteRoot",
            "path": "/*",
            "rootComponent": "app/router",
            "layoutTemplate": "$layoutsDir/index.html",
            "bootstrap": {
                "syntheticShadow": true
            }
        }
    ],
    "assets": [
        {
            "alias": "assetsDir",
            "dir": "$rootDir/src/assets",
            "urlPath": "/assets"
        },
        {
            "alias": "favicon",
            "file": "$rootDir/src/assets/favicon.ico",
            "urlPath": "/favicon.ico"
        },
        {
            "alias": "jsforceDir",
            "dir": "$rootDir/src/jsforce",
            "urlPath": "/jsforce"
        },
        {
            "dir": "$rootDir/src/assets/fonts",
            "urlPath": "/fonts"
        },
        {
            "file": "$rootDir/src/assets/utilitySprite.svg",
            "urlPath": "/lightning.utilitySprite"
        }
    ]
}

Package.json

{
    "name": "lwr-crudspace-spa",
    "version": "0.0.1",
    "license": "MIT",
    "private": true,
    "type": "module",
    "scripts": {
        "clean": "rm -rf node_modules __lwr_cache__ site",
        "dev": "lwr dev",
        "dev:compat": "lwr dev --mode compat",
        "build": "lwr build --clean",
        "build:prod-compat": "lwr build --clean --mode prod-compat",
        "start": "lwr start",
        "stage": "yarn build && yarn start",
        "stage:prod-compat": "yarn build:prod-compat && yarn start"
    },
    "dependencies": {
        "@lwrjs/router": "^0.11.13",
        "jsforce": "^1.11.1",
        "jsforce-ajax-proxy": "^2.0.0",
        "lwc": "5.0.0",
        "lwr": "0.11.13"
    },
    "engines": {
        "node": ">=16.0.0"
    },
    "volta": {
        "node": "18.16.1"
    },
    "devDependencies": {
        "lightning-base-components": "1.21.3-alpha",
        "@salesforce-ux/design-system": "^2.23.2",
        "@lwc/eslint-plugin-lwc": "^1.7.2",
        "@salesforce/eslint-plugin-lightning": "^1.0.0"
    }
}

const your => (code) => here;

Expected Results

lwr build command should generate static site in the site folder.

Actual Results [Windows]

build command runs into error.

 npm run build:prod-compat

> lwr-crudspace-spa@0.0.1 build:prod-compat
> lwr build --clean --mode prod-compat

[info][build] Building lwr application
[info][build] Clearing output directory: site
[error] Unexpected MODIFIER at 1, expected END
TypeError: Unexpected MODIFIER at 1, expected END
    at mustConsume (C:\Projects\lwr-crudspace-spa\node_modules\path-to-regexp\dist\index.js:114:15)
    at parse (C:\Projects\lwr-crudspace-spa\node_modules\path-to-regexp\dist\index.js:172:9)
    at stringToRegexp (C:\Projects\lwr-crudspace-spa\node_modules\path-to-regexp\dist\index.js:329:27)
    at pathToRegexp (C:\Projects\lwr-crudspace-spa\node_modules\path-to-regexp\dist\index.js:407:12)
    at new Layer (C:\Projects\lwr-crudspace-spa\node_modules\@koa\router\lib\layer.js:43:17)
    at Router.register (C:\Projects\lwr-crudspace-spa\node_modules\@koa\router\lib\router.js:570:17)
    at Router.register (C:\Projects\lwr-crudspace-spa\node_modules\@koa\router\lib\router.js:563:23)
    at Router.<computed> [as get] (C:\Projects\lwr-crudspace-spa\node_modules\@koa\router\lib\router.js:200:12)
    at FsInternalServer.get (file:///C:/Projects/lwr-crudspace-spa/node_modules/@lwrjs/server/build/es/fs/fs-server.js:58:24)
    at viewMiddleware (file:///C:/Projects/lwr-crudspace-spa/node_modules/@lwrjs/core/build/es/middleware/view-middleware.js:172:13)

Actual Results [WSL]

rahul@RSG-HP-Laptop:/mnt/c/Projects/lwr-crudspace-spa$ npm run build

> lwr-crudspace-spa@0.0.1 build /mnt/c/Projects/lwr-crudspace-spa
> lwr build --clean

[info][build] Building lwr application
[info][build] Clearing output directory: site
[error] Unexpected MODIFIER at 1, expected END
TypeError: Unexpected MODIFIER at 1, expected END
    at mustConsume (/mnt/c/Projects/lwr-crudspace-spa/node_modules/path-to-regexp/dist/index.js:114:15)
    at parse (/mnt/c/Projects/lwr-crudspace-spa/node_modules/path-to-regexp/dist/index.js:172:9)
    at stringToRegexp (/mnt/c/Projects/lwr-crudspace-spa/node_modules/path-to-regexp/dist/index.js:329:27)
    at pathToRegexp (/mnt/c/Projects/lwr-crudspace-spa/node_modules/path-to-regexp/dist/index.js:407:12)
    at new Layer (/mnt/c/Projects/lwr-crudspace-spa/node_modules/@koa/router/lib/layer.js:43:17)
    at Router.register (/mnt/c/Projects/lwr-crudspace-spa/node_modules/@koa/router/lib/router.js:570:17)
    at Router.register (/mnt/c/Projects/lwr-crudspace-spa/node_modules/@koa/router/lib/router.js:563:23)
    at Router.<computed> [as get] (/mnt/c/Projects/lwr-crudspace-spa/node_modules/@koa/router/lib/router.js:200:12)
    at FsInternalServer.get (file:///mnt/c/Projects/lwr-crudspace-spa/node_modules/@lwrjs/server/build/es/fs/fs-server.js:58:24)
    at viewMiddleware (file:///mnt/c/Projects/lwr-crudspace-spa/node_modules/@lwrjs/core/build/es/middleware/view-middleware.js:172:13)

Browsers Affected

Version

Node v20.11.0

• LWC: 5.0.0

Additional info

The npm run dev also renders the site very slow. Everything just works fine until you add lightning-base components. Please provide a working sample that works on Windows. I tried using rollup but that is also a running issue.

Possible Solution

Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

[nolanlawson]

Thanks for reporting! I've notified the LWR team (LWR is not hosted in this repo, which is for the the LWC open-source framework).

Do you get the same error in WSL? The stacktrace you provide seems to be from raw Windows (cmd.exe or some other terminal I assume).

[rahulgawale]

@nolanlawson Yes I am getting a similar error in WSL too. Added the stack trace from WSL to the Actual Results [WSL] section. The build works just fine until I add the Lightning Base Components and SLDS. The problem occurs as soon as I add these two.

Also Is there a separate public repo for lwr? If yes please drop in the link because I couldn't find one.

[forcePanda]

Response from Salesforce support: "LWR is not supported on Windows." 🙃

[rahulgawale]

@forcePanda What is supported then? it also doesn't work on Linux. Just curious, Did you raise a case for this?

[forcePanda]

Response from support:

Engineering has logged this as a bug and for now, it looks like it will only work on mac os. https://issues.salesforce.com/issue/a028c00000yx5yH/lwr-build-is-not-working-in-both-wsl-and-windows

[rahulgawale]

@forcePanda Thanks for the update, I hope it will be fixed soon. At least it should work on Linux.

[nrkruk]

@rahulgawale it should work on linux / mac osx, can you confirm you are hitting the same error stack trace on linux?

[nrkruk]

@forcePanda @rahulgawale if either of you could share your actual github repositories with me (or an example repository that replicates the issue) - I will take a look at it

[rahulgawale]

@nrkruk Thanks, I tried to run my code in Mac OSX and it works, but not everyone in our team has that. I have to set up Linux on my machine, once done I will try that out, also I will share the repository tomorrow. Thank you very much for looking into this.

[forcePanda]

@nrkruk the build works on Linux but there is an exception. The linux build output fails to show slds icons that are used in lwc base components.

Mac OS works fine for all the scenarios I've come across.

[rahulgawale]

@nrkruk Here is the repo with the sample code. - https://github.com/rahulgawale/lwr-site-demo

Please note that I have not added the SLDS assets in the repo, which you can copy from the node module as per the docs - Set up Salesforce Lightning Design System

Screenshot of my assets folder for your reference.

As said by @forcePanda build works on Linux with an exception of icons not showing. There are some warnings when npm run build command is executed. See the command output below.

rahul@rahul-ubuntu:~/Public/lwr-site-demo$ npm run build

> lwr-site-demo@0.0.1 build
> lwr build --clean

[info][build] Building lwr application
[info][build] Clearing output directory: site
[info][ssg] Static Site Generation
[info][ssg] Building routes (this may take some time to complete)
[info][ssg] en-US / in 732 ms
[warn][ssg] Could not find assets to copy at path: /home/rahul/Public/lwr-site-demo/site/fonts
[warn][ssg] Could not find assets to copy at path: /home/rahul/Public/lwr-site-demo/site/lightning.utilitySprite
[warn][ssg] Could not find assets to copy at path: /home/rahul/Public/lwr-site-demo/site/lightning.standardSprite
[info][ssg] Static Site Generation complete in 2 seconds
rahul@rahul-ubuntu:~/Public/lwr-site-demo$ 

Errors in LWR Docs

I would also like to bring it to your attention that there is a bug in the documentation - i.e. (https://developer.salesforce.com/docs/platform/lwr/guide/lwr-slds.html?q=styles#set-up-salesforce-lightning-design-system)

The copy-slds.mjs code does not work at all. It gets executed but does not copy the assets from node module to /src/assets folder, so you have to do that manually.

Also the package.json snippet has syntax error, see below.

Actual snippet:

There are two (`) back ticks, which are not needed.

{
    "scripts": {
        "build": "`node ./scripts/copy-slds.mjs"`
    }
}

Correct snippet:

Removed the back ticks.

{
    "scripts": {
        "build": "node ./scripts/copy-slds.mjs"
    }
}

Also another issue with the docs is that the commands are not consistent, some pages use npm to run commands but some pages use yarn so it is kind of confusing. Wondering if package manager has anything to do with the error? Because I am using npm.

[rahulgawale]

@nrkruk did you get any chance to look into this?

[juvian]

Thanks for reporting! I've notified the LWR team (LWR is not hosted in this repo, which is for the the LWC open-source framework).

@nolanlawson What is the correct way of addressing issues for LWR? Making an issue here? I have been working several months on a website with LWR and sometimes I find bugs that I end up having to solve locally in the files. Sometimes it seems very weird that these things everyone should have issues with persist. Like for example right now I'm stuck with a bug with modals that don't open because isOverlayAllowedToAdd rejects which is caused by the class being imported twice in 2 different bundles

[nolanlawson]

@juvian All I can say is that this repo is only concerned with the open-source LWC framework, not with LWR. LWR is currently closed-source, and there is no equivalent GitHub repo we can move this issue to.

If you remain blocked, I would recommend opening a Salesforce Stack Exchange question or a Salesforce case.

[nrkruk]

@rahulgawale - I did take a look, and there are definitely some path resolution issues we need to fix on windows. I'm working on getting that prioritized with the team but I don't have a definitive timeline on when that will be fixed for you.

You are correct in that the documentation is wrong here. If you fix the paths in the script, it will copy the assets as expected:

cpx.copy('./node_modules/@salesforce-ux/design-system/assets/**/*', './src/assets', () => {
    console.log('Done copying SLDS resources');
});

It also appears that the lightning sprites and the /font directory are not included in the ux design system package, so will need to check on what the correct steps are for those assets. I've filed a bug on our doc team.

What package manager you use doesn't matter as far as LWR is concerned, both npm and yarn will work fine.

[juvian]

I got it to work on windows months ago (at least development mode, prod doesn't work) by changing these files

@lwrjs\asset-registry/build/cjs/index.cjs

async delegateGetAsset(assetIdentifier) {
        if (assetIdentifier.specifier.includes('\\') && assetIdentifier.specifier.includes('assets')) {
            assetIdentifier.specifier = assetIdentifier.specifier.replaceAll('\\', '/').replaceAll('//', '/');
        }

@lwrjs\module-registry\build\cjs\linker\linker.cjs

let link = strategy(importRef, runtimeEnvironment, runtimeParams, signature);
    // replace all locations of importee with the link
    if (link.includes('\\utils') || link.includes('lightning_iconSvgTemplatesUtility')) {
        link = link.replaceAll('\\', '#');
    }

@lwrjs\module-registry\build\cjs\index.cjs

resolveModuleUriSync
    if (moduleId.specifier.includes('#')) {
        return uri.replaceAll('\\', '_');
    }

[rahulgawale]

@juvian Thanks for the workaround, I have been using your workaround hoping that someday it will be fixed. Kept using it in dev mode, but now I need to build and deploy my site. At least I expected this to work properly on Linux, but that is not the case either. Honestly, LWC OSS is a great framework but it does not provide any trustworthy build mechanism for Windows, I have also tried to use Webpack and Rollup but that didn't work either.

[rahulgawale]

@nolanlawson Could you provide any alternative way to build static LWC OSS site? Maybe using Webpack or Rollup? Something similar to create-lwc-app

[nolanlawson]

@rahulgawale LWR is our recommended path forward. However we do ship a Rollup plugin and webpack plugin, but it's not a batteries-included meta-framework. create-lwc-app is deprecated.

[rahulgawale]

@nolanlawson I hope you are doing great! Just wanted to check if any update on the fix for the issue. Thanks