7

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

1 Answer 1

11

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
8
  • 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 Commented Oct 16, 2020 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 Commented Oct 16, 2020 at 4:38
  • Did you run the npm install again and lwc build to generate the build. Commented Oct 16, 2020 at 4:45
  • Your build file does not look correct! npm run build will fix this Commented Oct 16, 2020 at 4:47
  • 1
    This got resolved after updating lwc-services npm package. Had to individually update every dependency to check Commented Oct 20, 2020 at 8:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .