[SalesForce] Lightning Open source use of base components

A few days back an npm package for base lightning components was released
Base Lightning Components

With this I am expecting to use base lightning components like my favorite lightning-datatable in a node project.

But getting following error for adding Lightning Button

⚡⚡⚡⚡⚡  Lightning Web Components ⚡⚡⚡⚡⚡


�  Starting build process.
�  Local server listening: http://localhost:3001
× ｢wdm｣:
ERROR in ./src/modules/lightning/primitiveIcon/primitiveIcon.js
Module not found: Error: Can't resolve '@salesforce/i18n/dir' in 'E:\Temp Codes\lwc oss with base components\my-app\src\modules\lightning\primitiveIcon'
 @ ./src/modules/lightning/primitiveIcon/primitiveIcon.js 3:0-39 34:60-63
 @ ./src/modules/lightning/button/button.html
 @ ./src/modules/lightning/button/button.js
 @ ./src/modules/my/greeting/greeting.html
 @ ./src/modules/my/greeting/greeting.js
 @ ./src/modules/my/app/app.html
 @ ./src/modules/my/app/app.js
 @ ./src/index.js
 @ multi ./node_modules/error-overlay-webpack-plugin/lib/entry-basic.js ./node_modules/error-overlay-webpack-plugin/lib/entry-devserver.js? ./src/index.js

Best Answer

Looks like you are using the create lwc app to create the project scaffold.

There are a few things you need to make sure,

  1. Make sure you have installed the lightning-base-components via npm install

    npm install lightning-base-components

  2. Ensure that your lwc.config.json has the npm dependency specified

     {
   "modules": [
    {
       "dir": "src/modules"
    },
    { "npm": "lightning-base-components" }
  ]
}

  3. Make sure you install the SLDS using

     npm install @salesforce-ux/design-system --save-dev

  4. Make sure you have lwc-services.config.js properly configured

      module.exports = {
   resources: [{ from: 'src/resources/', to: 'dist/resources/' },
   {
     from: 'node_modules/@salesforce-ux/design-system/assets',
     to: 'src/SLDS'
   },
  {
    from: 'node_modules/@salesforce-ux/design-system/assets',
    to: 'dist/SLDS'
   }
  ]
};

  5. Add the SLDS styles in your index.html at the head

    <link
    rel="stylesheet"
    href="/SLDS/styles/salesforce-lightning-design-system.min.css"
/>
  1. Make sure you have import @lwc/synthetic-shadow in your index.js. Ensure the import is the first statement in your index.js file, else the synthetic shadow may not work
Related Topic