What is this in react import { HomePage } from '@/HomePage'-CodePudding

I know its importing a file but I don't know what the "@" stands for, I have seen a bunch of code snippets using this same syntax.

I tried implementing the same scenario in any way I thought could be possible but still no success

CodePudding user response：

They are webpack alias import, this configuration help to shorten your absolute/relative path.

CodePudding user response：

This is used when you want to use Scope Packages.

What are Scope Packages? Ans - Scopes are a way of grouping related packages together, and also affect a few things about the way npm treats the package.

Please check this docs

CodePudding user response：

First you need to add babel-plugin-root-import in your devDependencies in package.json (If using yarn: yarn add babel-plugin-root-import --dev). Then in your .babelrc add the following lines into plugins key:

"plugins": [
[
  "babel-plugin-root-import",
  {
    "rootPathPrefix": "@"
  }
]
]

Now, you can use @. For example:

Instead of:

import xx from '../../utils/somefile'

You Can:

import xx from '@/utils/somefile'