6

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
7

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
7
  • Hey @mohith Thanks for the reply! I was missing the npm dependency for lightning base component. But that still doesnt resolve the issue. Still getting "Module not found: \lightning-base-components\src\lightning\primitiveIcon" for lightning button Oct 16 '20 at 4:35
  • Also I get another dependency error for when i use Lightning-input. You can verify my package.json github.com/darkacer/SFDC-Extension-LWC Oct 16 '20 at 4:38
  • Did you run the npm install again and lwc build to generate the build. Oct 16 '20 at 4:45
  • Your build file does not look correct! npm run build will fix this Oct 16 '20 at 4:47
  • 1
    This got resolved after updating lwc-services npm package. Had to individually update every dependency to check Oct 20 '20 at 8:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.