This project setup supports ES6 modules thanks to webpack.
While you can still use
module.exports, we encourage you to use
Be aware of the difference between default and named exports. It is a common source of mistakes.
We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use
export default Button and
import Button from './Button'.
Named exports are useful for utility modules that export several functions. A module may have at most one default export and as many named exports as you like.
Learn more about ES6 modules:
You can configure your application to support importing modules using absolute paths. This can be done by configuring a
tsconfig.json file in the root of your project. If you're using TypeScript in your project, you will already have a
Below is an example
If you're using TypeScript, you can configure the
baseUrl setting inside the
compilerOptions of your project's
Now that you've configured your project to support absolute imports, if you want to import a module located at
src/components/Button.js, you can import the module like so: