Import react components with absolute path

Question

Here is my test file

// /imports/components/main.test.js
import React from 'react'
import { shallow, mount } from 'enzyme'
import Main from './main'
import TextInput from "/imports/ui/textInput"
...

and the main.js has

// /imports/components/main.js
import { action1 } from "/imports/actions/myAction"

but it throws an error when I run the test, saying

Cannot find module '/imports/actions/myAction' from 'main.js'

If I comment the import './main', same thing happen with importing TextInput. I have no issue with importing modules in node_modules.

How can I tell Jest or webpack to import the component using absolute path from project directory (i.e import Foo from /imports/...)?

If there is a directory called imports at the same level of your test file, you should at a dot like: import TextInput from "./imports/ui/textInput" — Hosar
– Hosar, Commented Feb 2, 2017 at 3:03
Sorry I missed the directory structure. I added the location path for the components and test file which is basically inside /imports as well. — spondbob
– spondbob, Commented Feb 2, 2017 at 3:10
you can simply import like import TextInput from "../ui/textInput" in main.test.js and import { action1 } from "../actions/myAction" . If you want to import with absolute path, then you must do aliasing in your webpack.config and then import like import { action1 } from "imports/actions/myAction" . — Vikramaditya
– Vikramaditya, Commented Feb 2, 2017 at 4:45
The ../actions/myAction is imported from main.js, not test file, and it is working perfectly fine on the component. And I don't need to import that on test file. In test file, I just need to import the main.js component and textInput for testing shallow rendering. I am sorry if it is confusing. — spondbob
– spondbob, Commented Feb 2, 2017 at 23:05
github.com/tleunen/babel-plugin-module-resolver works for me — zeraien
– zeraien, Commented Feb 24, 2017 at 2:06

nishit chittora · Accepted Answer · 2020-02-10 07:57:16Z

47

Better way to solve relative path import issue, is by creating jsconfig.json file adjacent to package.json file.

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

then import { action1 } from "actions/myAction"; will work

edited Feb 10, 2020 at 7:57

answered Sep 6, 2019 at 9:23

nishit chittora

1,05414 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nishit chittora Over a year ago

"plugins": ["@babel/plugin-proposal-export-default-from"] just added this plugin in package.json#babel. Hopefully it will work for you.

David Schumann Over a year ago

@Daniels solution worked fine, without having to add yet another plugin for something as trivial as this

vsync Over a year ago

baseUrl should be . and not the word "imports" as stated

nishit chittora Over a year ago

@vsync Thanks for the feedback, It was a typo from my side. It should be directory from which you would like to set baseUrl. In my case, it is "src"

Chuan Over a year ago

You might need to restart such as npm start

kmui2 · Accepted Answer · 2020-12-04 00:08:56Z

30

If you're using Create React App, you can set up the absolute imports path in a jsconfig.json (need to create in a fresh JavaScript template) or tsconfig.json (already created in the TypeScript template) at the root of your project to serve your usage.

Example:

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

Official docs: https://create-react-app.dev/docs/importing-a-component/#absolute-imports

answered Dec 4, 2020 at 0:08

kmui2

2,64722 silver badges22 bronze badges

Comments

Daniel · Accepted Answer · 2018-09-05 23:38:35Z

7

Another solution is to create an .env file within the root directory of your project.

Within it you will add NODE_PATH=src/

Thats all

Save the file and restart your dev environment in terminal.

Afterwards, you will go through your project and update some import statements accordingly.

answered Sep 5, 2018 at 23:38

Daniel

15.7k20 gold badges117 silver badges184 bronze badges

1 Comment

Ben Over a year ago

This is now depricated in preference of using a jsconfig.json file: stackoverflow.com/questions/56437517/…

PEM · Accepted Answer · 2017-02-16 09:44:48Z

3

My file structure follows exactly the same pattern as yours. To teach Jest into using imports beginning with a /, I use babel-plugin-module-resolver and its handy root option. My .babelrc for Jest looks like this:

{
  "presets": ["es2015", "meteor"],
  "plugins": [
    "transform-class-properties",
    "transform-react-constant-elements",
    "transform-react-inline-elements",
    "transform-react-remove-prop-types",
      ["module-resolver", {
      "root": ["../"],
      "alias": {
        "react-router-dom": "react-router-dom/umd/react-router-dom.min.js",
        "redux": "redux/dist/redux.min.js",
        "react-redux": "react-redux/dist/react-redux.min.js"
      }
    }]
  ]
}

As I'm using Meteor which customized its root imports, I hide my Jest usage and configuration into a .jest directory at the root of my repository allowing me to have a specific .babelrc without risking conflicts with Meteor's one.

answered Feb 16, 2017 at 9:44

PEM

543 bronze badges

2 Comments

spondbob Over a year ago

Hey this looks promising. I'll have a go after couple days and give updates here. Thanks for the inputs!

spondbob Over a year ago

Sorry for the late update, but this solution works great! Installed the resolver module and set the root, now I able to use import .. from '/imports/foo. Thanks.

Nimantha · Accepted Answer · 2023-10-28 16:04:02Z

With webpack(v4) and babel, you can provide absolute paths in your directory. Follow these steps In your .babelrc file, make this entry for plugins.Make sure you have babel-plugin-root-import in your package.json as well.

"plugins": [
    [
        "babel-plugin-root-import",
        {
          "paths": [
            {
              "rootPathPrefix": "~",
              "rootPathSuffix": "./"
            },
            {
              "rootPathPrefix": "@src",
              "rootPathSuffix": "src"
            },
            {
                "rootPathPrefix": "@any-other-folder",
                "rootPathSuffix": "src/client/../any-other-folder"
              }
          ]
        }
      ]
]

Now if you run into eslint issue, you can add these lines in your eslintrc:

"settings": {
"import/resolver": {
  "babel-plugin-root-import": [
    {
      "rootPathPrefix": "@src",
      "rootPathSuffix": "src"
    },
    {
      "rootPathPrefix": "@any-other-folder",
      "rootPathSuffix": "src/client/../any-other-folder"
    }
  ]
 }
}

Now to make your editor recognize these paths, you can create this entry in jsconfig file.

{
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["/*"],
      "@src/*": ["src/*"],
      "@any-other-folder/*": ["src/client/../any-other-folder/*"] ==> absolute path to any other folder
    }
  },
  "exclude": ["node_modules"] 
}

Afroz Quraishi · Accepted Answer · 2023-10-23 09:13:46Z

1

Add below in your jsconfig.json/tsconfig.json file.

{
  "compilerOptions": {
    "baseUrl": "src",
  },
  "include": ["src"],
  "exclude": ["node_modules", "build"]
}

suppose folder structure is like src->components->Header.tsx then you arevable to import as below.

import Header from 'components/Header';

because baseUrl mentioned in tsconfig.json/jsconfig.json as src.

Note: nothing else is required but if you want to import with prefix @/ way then please let me know.

answered Oct 23, 2023 at 9:13

Afroz Quraishi

1591 silver badge7 bronze badges

Comments

Nimantha · Accepted Answer · 2023-10-28 16:03:44Z

1

I had jest configs in package.json file (under "jest" key). So I just have added there this row:

"modulePaths": ["<rootDir>/src/"]

edited Oct 28, 2023 at 16:03

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Nov 25, 2020 at 15:29

Ruslan Valeev

1,97317 silver badges27 bronze badges

Collectives™ on Stack Overflow

Import react components with absolute path

7 Answers 7

5 Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related