Is curly brace optional in lwc import statement

It depends on whether the export function is written as default or named exports. I suggest doing a read on default vs named exports on MDN here

Suggest also reading this answer to understand in depth.

An example that does not curly bracket will be as below

class Myclass {...};
export default Myclass;

The import statement would be as below

import Myclass from './src/index.js'

With curly braces

class Myclass {...};
export Myclass;

The import would be as below

import {Myclass} from './src/index.js'

If you view your type definition (under .sfdx/typings/lwc/apex folder ) in your vscode you should see something like below where you see export default statement

enter image description here


If you are using the default export, you must not use curly braces. If you are not using the default export, you must use curly braces. They are not optional, but instead reflect if you are importing the default export or not. For example, the following is invalid:

import { myMethod } from '@salesforce/apex/MyClass.myMethod';

As well as:

import LightningElement from 'lwc';

Both will result in errors. You must consult the documentation or source code (for custom exports) to determine if curly braces are required or restricted.


If a default export is used in the class you want to access, eg

export default yourthing

Then you don't need braces.

If the ES6 export is explicit, you do.

An explicit export looks like:

function add( a, b ) {
  return a + b;
}
function sayhi( name ){
  return `Hi ${name}`;
}
export { add, sayhi };

In this case, you would need to import these like:

import { add, sayhi } from '/mymodule';

Or if you only wanted part of the code:

import { add } from '/mymodule'