未捕获的类型错误：_models_Search__WEBPACK_IMPORTED_MODULE_0___default.a 不是构造函数

Question

I am following a tutorial on Javascript- currently building a app which involves uses classes I have encountered an error which is the title of this question 'Uncaught TypeError: _models_Search__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor' this project involves using the MVC design pattern also.

I have tried to rename import Search from './models/Search'; to import {Search} from './models/Search'; but still I am being greeted with this full error message:

Uncaught TypeError: _models_Search__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor
    at eval (index.js:5)
    at Module../src/js/index.js (bundle.js:4198)
    at __webpack_require__ (bundle.js:20)
    at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:3:18)
    at Object.0 (bundle.js:4220)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:84
    at bundle.js:87

Search.js file

      import axios from 'axios';

      export default class Search {
      constructor(query) {
        this.query = query;
      }

      async getResults() {
        const proxy = 'https://cors-anywhere.herokuapp.com/'; const 
      key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        try {
            const res = await 
      axios(`${proxy}https://www.food2fork.com/api/search? 
      key=${key}&q=${this.query}`);
            this.result = res.data.recipes;
            console.log(recipes);
         } catch (error) {
            alert(error);
         }

      }
       }

index.js file

      import Search from './models/Search';

      const search = new Search('pizza');
      console.log(search);

the expected outcome is for the the search property to be returned in the client and for me to be able to access all of its properties within the browser. and yes I have purposely x'd out the API key just in case you were wondering- would actually help too if the answer is given you can give me a brief breakdown as to where I went wrong. Thanks in advance.

Answer 1

To correctly import your Search class use the following lines of code. In index.js:

import Search from './models/Search';

And in Search class declaration:

export default class Search

Or second way that you tried (with braces in import): in index.js

import { Search } from './models/Search';

And export, without default :

export class Search

Braces needed only in named exports