CODEWITHSUNDEEP
javascriptnode.jsreactjsimport
Kevin.a
Kevin.a

Reputation: 4306

cannot import modules in react

I have made this utility which i want to import in another file : 

const fetch = require('node-fetch');

/**
 * @todo Add documentation
 */
class SimplicateApi { 
    constructor(key,secret){
        this._key = key; 
        this._secret = secret; 
        this.baseUrl = 'https://simplicate.nl/api/v2'; 

        this.options = {
            headers: { 
                'Content-Type': 'application/json', 
                'Authentication-Key' : this._key, 
                'Authentication-Secret' : this._secret
            }
        }
    }

    get(endpoint) {
        return fetch(`${this.baseUrl}${endpoint}`, this.options)
        .then(res => res.json())
        .then(json => json);
    }
}

export default SimplicateApi;

In another file im importing it like this : 

import SimplicateApi from '../../utils/SimplicateApi';

The error I receive :

(function (exports, require, module, __filename, __dirname) { import {SimplicateApi} from '../../utils/SimplicateApi'; ^

SyntaxError: Unexpected token { at new Script (vm.js:80:7) at createScript (vm.js:274:10) at Object.runInThisContext (vm.js:326:10) at Module._compile (internal/modules/cjs/loader.js:664:28) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19) PS C:\Users\klmaa\OneDrive\Bureaublad\dexhub\client\src\components\cmInf

I removed everything even the fetch and just exported the class like this :

// import fetch from 'node-fetch';

/**
 * @todo Add documentation
 */
class SimplicateApi { 

}

export default SimplicateApi;

Now im importing it like this :

import SimplicateApi from '../../utils/SimplicateApi';

The error still looks like : 

(function (exports, require, module, __filename, __dirname) { import SimplicateApi from '../../utils/SimplicateApi';
                                                                     ^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)     
    at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)  
    at startup (internal/bootstrap/node.js:283:19)
PS C:\Users\klmaa\OneDrive\Bureaublad\dexhub\client\src\components\cmInf

Upvotes: 0

Views: 1064

Answers (1)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

Your code is mixing both CommonJs module and ES6 module.

In react, you should use ES6 module. CommonJs module does not supported by React.You need to configure Babel for this.

const fetch = require('node-fetch'); // this wronng import syntax in React.

Changes should be

// if you are in react.
    import fetch from 'node-fetch'; // for react

//if you are in Node.
class SimplicateApi { 

}

module.exports = SimplicateApi;

Upvotes: 1

Related Questions