Import a custom helper class in javascript React

Question

I'm trying to create a custom class called helpers.js which looks like this:

class Httprequest{
    constructor(type, url, username, password,email){
        this.type = type;
        this.url = url;
        this.request = new XMLHttpRequest();
        this.username = username;
        this.password = password;
        this.email = email;
    }
    static sendPostRequest(){

        // function(method,url,async,user,password);
        this.request.open(this.type,this.url);
        this.request.setRequestHeader('Content-Type' ,'application/x-www-form-urlencoded');
        const data = encodeURI('username=' + this.username + '&'+
                                'password=' + this.password + '&'+
                                'email=' + this.email);
        this.request.send(data);
        if(this.request.readyState === 4){
            const status = this.request.status;
                if(status === 201){
                    return this.request.status;
                }else{
                    return "Failed creating account"
                }
        }
    }

}

export default Httprequest;

Then I'm trying to import the class in my React Component called Projects.js

import Httprequest from 'helpers.js';

I get error which looks like this: Failed to compile.

./src/components/Projects.js
Module not found: Can't resolve 'helpers.js' in 'C:\Users\Account\Desktop\front\frontend\src\components'

Both files are in the same folder, what gives?

dpetrini · Accepted Answer · 2017-10-13 12:01:36Z

1

could you try:

import Httprequest from './helpers.js';

You need to explicitly indicate your current folder like this.

answered Oct 13, 2017 at 12:01

dpetrini

1,2491 gold badge14 silver badges26 bronze badges

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

4 Comments

sander Over a year ago

Thank you, this worked. Does the syntax './helpers.js' mean it will go one folder back? Do I always have to add the ./ in front to import classes?

dpetrini Over a year ago

great. the syntax './helpers.js' means the same folder. It is Unix like file system structure. '../helpers.js' would mean the folder above, and '../../helpers.js' two folders above.

sander Over a year ago

Oh, so the amount of dots actually matters. Thank you!

Niekert Over a year ago

Just a quick note that you probably don't want to add the .js file extension in your import.

Arslan Tariq · Accepted Answer · 2017-10-13 12:24:18Z

1

Here are all types of import syntax:

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

The problem with your import is that you need to use ./helpers.js if in the same directory. It's same as UNIX file system structure.

answered Oct 13, 2017 at 12:24

Arslan Tariq

2,5382 gold badges26 silver badges49 bronze badges

1 Comment

Arslan Tariq Over a year ago

Visit developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… for reference.

Jay Hamilton · Accepted Answer · 2017-10-13 12:01:45Z

0

Try this:

 import Httprequest from './helpers.js';

answered Oct 13, 2017 at 12:01

Jay Hamilton

1145 bronze badges

Collectives™ on Stack Overflow

Import a custom helper class in javascript React

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related