I made a LWC to hold common CSS I want to import across different LWCs that I am working on.

Based on these release notes I created a component called myComponent and tried to import it in the CSS portion of one of my other LWCs, let's call it consumerComponent.

Here's my code.

myComponent Metadata:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <description>My Component</description>
    <masterLabel>My Component</masterLabel>

myComponent CSS:

Holds a bunch of css


@import 'c/myComponent';

The API version of the consumerComponent is also 49.

However I am getting the following error: Error during LWC component connect phase: [Class constructor MyComponent cannot be invoked without 'new'].

Any ideas or leads for this?

  • There is a bug in this and here is the work-around Aug 2 '20 at 9:25

Never mind just figured it out.

I am using IntelliJ with Illuminated Cloud. Upon creation of a new LWC Illuminated Cloud instantiates a HTML and JS file in addition to the .css and .js-meta.xml files.

Upon erasing of the HTML and JS files everything worked like a charm.

My guess is that importing the shared CSS from the myComponent is causing a conflict, if it contains HTML, JS files, as that component is not being imported in the HTML as a child component by consumerComponent.

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.