I would like to use absolute imports to import any file relative to the root src directory. This is my folder structure:

example/
┣ public/
┃ ┣ index.html
┣ src/
┃ ┣ ponents/
┃ ┣ ┣ App.css
┃ ┣ ┣ App.js
┃ ┣ ┗ Todo.js
┃ ┣ api.js
┃ ┣ history.js
┃ ┗ index.js
┣ craco.config.js
┣ jsconfig.json

And here is my config

var path = require("path");
module.exports = {
  resolve: {
    alias: {
      src: path.resolve(__dirname, "src"),
    },
  },
};

import Todo from "src/ponents/Todo"

But I get this error.

Module not found: Can't resolve 'src/ponents/Todo' in 'C:\_MyFiles\Programming\example\src\ponents'

However if I change the config and import to reference a subfolder under src like this it works...

var path = require("path");
module.exports = {
  resolve: {
    alias: {
      ponents: path.resolve(__dirname, "src/ponents"),
    },
  },
};

import Todo from "ponents/Todo"

How can I get the 1st variation working, so the imports reference the src folder instead of its subfolders?

I would like to use absolute imports to import any file relative to the root src directory. This is my folder structure:

example/
┣ public/
┃ ┣ index.html
┣ src/
┃ ┣ ponents/
┃ ┣ ┣ App.css
┃ ┣ ┣ App.js
┃ ┣ ┗ Todo.js
┃ ┣ api.js
┃ ┣ history.js
┃ ┗ index.js
┣ craco.config.js
┣ jsconfig.json

And here is my config

var path = require("path");
module.exports = {
  resolve: {
    alias: {
      src: path.resolve(__dirname, "src"),
    },
  },
};

import Todo from "src/ponents/Todo"

But I get this error.

Module not found: Can't resolve 'src/ponents/Todo' in 'C:\_MyFiles\Programming\example\src\ponents'

However if I change the config and import to reference a subfolder under src like this it works...

var path = require("path");
module.exports = {
  resolve: {
    alias: {
      ponents: path.resolve(__dirname, "src/ponents"),
    },
  },
};

import Todo from "ponents/Todo"

How can I get the 1st variation working, so the imports reference the src folder instead of its subfolders?

• javascript
• reactjs
• webpack
• create-react-app

1 Answer 1

You can use:

resolve: {
  modules: [path.resolve('./src'), path.resolve('./node_modules')],
  extensions: ['', '.js', '.jsx']
}

This will create an alias for all the subdirectories in your src and node_modules folders as well as your src folder itself. So you'll be able to use

Import App from 'ponents/App'

and

Import history from 'history'