ES6 import from root

Question

I\'m currently playing around with React Native. I\'m trying to structure my app, however it\'s starting to get messy with imports.

--app/
    -- /components         


        

Answer 1

In Webpack 3 the config is slightly diffrent:

import webpack from 'webpack';
import {resolve} from 'path';

...

module: {
    loaders: [
        {
            test: /\.js$/,
            use: ["babel-loader"]
        },
        {
            test: /\.scss$|\.css$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        }
    ]
},
resolve: {
    extensions: [".js"],
    alias: {
        ["~"]: resolve(__dirname, "src")
    }
},

Answer 2

The react documentation explain how to do that: https://create-react-app.dev/docs/importing-a-component/#absolute-imports

just add a jsconfig.json in your project root:

{
   "compilerOptions": {
      "baseUrl": "src"
   },
  "include": ["src"]
}