cannot import modules in react

Question

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

RIYAJ KHAN RIYAJ KHAN · Accepted Answer · 2020-06-15T14:37:23

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;

cannot import modules in react

1 Answers