1

I use LwcWebpackPlugin to load Lightning Web Components. Everything works fine but because I want to load compoennts from 'lwc' direcotry the namescape won't work.

I must get components from /lwc directory and I bypysed this with AliasModuleRecord (described here) where I import all components by name.

Problem is that only JS file is loading. Browser don't throw any exception but HTML body is not rendered.

I know that JS file works because console log from connectedCallback is showed in browser console.

What I'm doing wrong?. Maybe I haven't imported some library? Here is fragment form my webpack.config.js:

new LwcWebpackPlugin({
    modules: [
        { dir: 'src/modules' },
        { npm: 'lightning-base-components' },
        ...glob.sync(
            `./{${sfdxProjectJSON.packageDirectories?.map(package => package.path).join(',')}}/main/default/lwc/**/*.js`,
            { ignore: ['./**/__tests__/**'] }
        ).map(path => {
            const name = path.split('/').at(-2);
            return {
                "name": `c/${name}`,
                "path": path.replace('./', '')
            };
        }, {})
    ]
})

and this all resoults with:

[{
    name: 'ui/helloWorldExampleOne',
    path: 'pb-base/main/default/lwc/helloWorld/__docs__/examples/helloWorldExampleOne/helloWorldExampleOne.js'
},
{
    name: 'ui/helloWorld',
    path: 'pb-base/main/default/lwc/helloWorld/helloWorld.js'
},
{
    name: 'ui/exampleOne',
    path: 'pb-commerce/main/default/lwc/exampleOne/exampleOne.js'
}]
2
  • ./{${sfdxProjectJSON.packageDirectories?.map(package => package.path).join(',')}}/main/default/lwc/**/*.js should probably be ./{${sfdxProjectJSON.packageDirectories?.map(package => package.path).join(',')}}/main/default/lwc/**/*, (The end should be * rather than *.js).
    – sfdcfox
    Commented Oct 3, 2022 at 15:21
  • Hi, @sfdcfox I changed *.js to * and I got error Uncaught Error: Cannot find module 'examples/helloWorldExampleOne'. In documentation for AliasModuleRecord (here) is reference to js file so I think the problem is somewhere in webpac loaders I havent added - but I don't know which to use. Commented Oct 4, 2022 at 10:07

1 Answer 1

0

Now I'm working with LWR but importing LWC modules is also there. I think Webpack should now work the same - but please check me. What I need to do was map js files from lwc paths

glob(`${DIR_MAIN}/**/lwc/**/*.js`)

to named object where alias is 'c'. see below

const pathsWithAliases = lwcPaths?.map(path => {
    const componentName = path.split('/').pop()?.split('.').shift();

    return  {
        name: `c/${componentName}`, // c alias
        path
    }
});

this are AliasModuleRecord and is possible to read about it here https://lwc.dev/guide/es_modules this can be done in LWR inisde hook described here (example is about routing but logic is similar for modules)[lwr config][2]

[2]: https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing-server.html?q=initConfigs(lwrConfig#dynamic-server-side-routing-with-configuration-hooks

You must log in to answer this question.

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