search

salesforce / lwc

⚡️ LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
https://lwc.dev
Other
1.63k stars 395 forks source link

Icons and Certain Base Components are not working in LWR static site #3834

Closed mitchspano closed 11 months ago

mitchspano commented 11 months ago

Description

I am following the quick start instructions for LWR and any element with an icon is not loading, and there are some additional issues with other components such as lightning-datatable.

Steps to Reproduce

npm init lwr
# project name => Demo
cd demo
npm install @salesforce-ux/design-system \
  lightning-base-components \
  @lwrjs/npm-module-provider \
  @lwrjs/router \
  @lwrjs/app-service \
  @lwrjs/lwc-module-provider
npm install

Modify example/app.html:

<template>
  <main>
    <lightning-icon
      icon-name="action:approval"
      title="Approved"
    ></lightning-icon>
  </main>
</template>

Create src/layouts/main.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    />
    <title>LWR + SLDS Example</title>
    <link
      rel="stylesheet"
      href="$assetsDir/styles/salesforce-lightning-design-system.css"
    />
  </head>
  <body>
    {{{body}}} {{{lwr_resources}}}
  </body>
</html>

Modify lwr.config.jscon

{
  "lwc": {
    "modules": [
      { "dir": "$rootDir/src/modules" },
      { "npm": "lightning-base-components" }
    ]
  },
  "routes": [
    {
      "id": "home",
      "path": "/*",
      "layoutTemplate": "$layoutsDir/main.html",
      "rootComponent": "example/app",
      "bootstrap": {
        "syntheticShadow": true
      }
    }
  ],
  "assets": [
    {
      "alias": "assetsDir",
      "dir": "$rootDir/node_modules/@salesforce-ux/design-system/assets",
      "urlPath": "/assets"
    },
    {
      "alias": "favicon",
      "file": "$rootDir/src/assets/favicon.ico",
      "urlPath": "/favicon.ico"
    }
  ],
  "moduleProviders": [
    "@lwrjs/router/module-provider",
    "@lwrjs/app-service/moduleProvider",
    "@lwrjs/lwc-module-provider",
    "@lwrjs/npm-module-provider"
  ]
}

Run the site locally

npm run dev

Expected Results

Icons should be rendered properly

Actual Results

Running LWR at: http://localhost:3000 | mode: dev
[info] Watching: /Users/mitchellspano/Documents/demo/src/modules/example/app/app.js
[info] Watching: /Users/mitchellspano/Documents/demo/src/modules/example/app/app.html
[info] Watching: /Users/mitchellspano/Documents/demo/src/assets/favicon.ico
[info] Watching: /Users/mitchellspano/Documents/demo/src/modules/example/app/app.css

Error: Unable to find file "/Users/mitchellspano/Documents/demo/node_modules/lightning-base-components/src/lightning/iconSvgTemplatesUtility/buildTemplates/templates"
    at resolveFileExtension (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/fs.js:54:15)
    at LwcModuleProvider.createModuleEntry (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:212:24)
    at file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:148:25
    at InflightTasks.execute (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/tasks.js:83:23)
    at LwcModuleProvider.getModuleEntry (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:147:48)
    at LwrModuleRegistry.delegateGetModuleEntryOnServices (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:221:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolveRelativeImport (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/module-record.js:20:35)
    at async getModuleRecord (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/module-record.js:75:44)
    at async LwrModuleRegistry.createModuleDefinition (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:111:30)
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:102:31
    at async getModuleGraphs (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/graph.js:118:11)
    at async getImportMetadataMappings (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/mappings.js:25:33)
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/core/build/es/middleware/mapping-middleware.js:15:32
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/core/build/es/middleware/utils/error-handling.js:15:13
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/server/build/es/express/express-server.js:53:13
Error: Unable to find file "/Users/mitchellspano/Documents/demo/node_modules/lightning-base-components/src/lightning/iconSvgTemplatesUtility/buildTemplates/templates"
    at resolveFileExtension (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/fs.js:54:15)
    at LwcModuleProvider.createModuleEntry (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:212:24)
    at file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:148:25
    at InflightTasks.execute (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/tasks.js:83:23)
    at LwcModuleProvider.getModuleEntry (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:147:48)
    at LwrModuleRegistry.delegateGetModuleEntryOnServices (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:221:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolveRelativeImport (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/module-record.js:20:35)
    at async getModuleRecord (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/module-record.js:75:44)
    at async LwrModuleRegistry.createModuleDefinition (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:111:30)
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:102:31
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/core/build/es/middleware/redirects/unsigned-module-redirect.js:6:42
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/core/build/es/middleware/module-middleware.js:25:13
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/core/build/es/middleware/utils/error-handling.js:15:13
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/server/build/es/express/express-server.js:53:13
Error: Unable to find file "/Users/mitchellspano/Documents/demo/node_modules/lightning-base-components/src/lightning/iconSvgTemplatesUtility/buildTemplates/templates"
    at resolveFileExtension (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/fs.js:54:15)
    at LwcModuleProvider.createModuleEntry (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:212:24)
    at file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:148:25
    at InflightTasks.execute (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/tasks.js:83:23)
    at LwcModuleProvider.getModuleEntry (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:147:48)
    at LwrModuleRegistry.delegateGetModuleEntryOnServices (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:221:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolveRelativeImport (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/module-record.js:20:35)
    at async getModuleRecord (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/module-record.js:75:44)
    at async LwrModuleRegistry.createModuleDefinition (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:111:30)
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:102:31
    at async getModuleGraphs (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/graph.js:118:11)
    at async getImportMetadataMappings (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/mappings.js:25:33)
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/core/build/es/middleware/mapping-middleware.js:15:32
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/core/build/es/middleware/utils/error-handling.js:15:13
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/server/build/es/express/express-server.js:53:13
Error: Unable to find file "/Users/mitchellspano/Documents/demo/node_modules/lightning-base-components/src/lightning/iconSvgTemplatesUtility/buildTemplates/templates"
    at resolveFileExtension (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/fs.js:54:15)
    at LwcModuleProvider.createModuleEntry (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:212:24)
    at file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:148:25
    at InflightTasks.execute (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/shared-utils/build/es/tasks.js:83:23)
    at LwcModuleProvider.getModuleEntry (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/lwc-module-provider/build/es/index.js:147:48)
    at LwrModuleRegistry.delegateGetModuleEntryOnServices (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:221:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolveRelativeImport (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/module-record.js:20:35)
    at async getModuleRecord (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/module-record.js:75:44)
    at async LwrModuleRegistry.createModuleDefinition (file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:111:30)
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/module-registry/build/es/index.js:102:31
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/core/build/es/middleware/redirects/unsigned-module-redirect.js:6:42
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/core/build/es/middleware/module-middleware.js:25:13
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/core/build/es/middleware/utils/error-handling.js:15:13
    at async file:///Users/mitchellspano/Documents/demo/node_modules/@lwrjs/server/build/es/express/express-server.js:53:13
image

Browsers Affected

Chrome 118.0.5993.88

Version

Node - v20.8.1 npm - 10.2.1

  "dependencies": {
    "@lwrjs/app-service": "^0.10.11",
    "@lwrjs/lwc-module-provider": "^0.10.11",
    "@lwrjs/npm-module-provider": "^0.10.11",
    "@lwrjs/router": "^0.10.11",
    "@salesforce-ux/design-system": "^2.22.0",
    "lightning-base-components": "^1.19.10-alpha",
    "lwc": "3.0.0",
    "lwr": "0.10.11"
  },

Additional context/Screenshots Similar issues are encountered with Lightning Data Table

<template>
  <main>
    <lightning-datatable></lightning-datatable>
  </main>
</template>
image
Templarian commented 11 months ago

@mitchspano Please use 1.19.8-alpha for now. A new package released shortly today that will address this issue.

mitchspano commented 11 months ago

Thank you @Templarian, that resolved my issue.

nkarkrasalesforce commented 11 months ago

@mitchspano are you using Mac or Windows. Because on windows it's not working

mitchspano commented 11 months ago

Mac OS Ventura 13.3.1 (a)

nkarkrasalesforce commented 11 months ago

@Templarian do you know why same code not working on Windows?

Templarian commented 11 months ago

@mitchspano / @nkarkrasalesforce Please use 1.19.11-alpha now that it's out and let us know if it resolves your issues similarly.