无法在反应中导入模块

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

Answer 1

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;