CODEWITHSUNDEEP
javascriptreactjswebpackcreate-react-app
pyjamas
pyjamas

Reputation: 5357

Webpack alias for src folder in React app?

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/
┃ ┣ components/
┃ ┣ ┣ 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/components/Todo"

But I get this error.

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

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: {
      components: path.resolve(__dirname, "src/components"),
    },
  },
};

import Todo from "components/Todo"

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

Upvotes: 5

Views: 4982

Answers (1)

Luïs
Luïs

Reputation: 2833

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 'components/App'

and

Import history from 'history'

Upvotes: 4

Related Questions