Should not import the named export 'todos' (imported as 'todos') from default-ex-CodePudding

import React, { Component } from 'react';
import './App.css';

import { todos } from './todos.json';
console.log(todos);

class App extends Component {
  render() {
    return (
      <div className='App'>
        
      </div>
    )
  }
}

export default App;

that is my app and and and I want to get the todos.json to display each of the sentences from the todos.json

my error:

Compiled with problems:X

ERROR in ./src/App.js 8:12-17

Should not import the named export 'todos' (imported as 'todos') from default-exporting module (only default export is available soon)

{
    "todos": [
        {
            "frase": "la vida es bella",
            "autor": "La pelicula xd"
        },
        {
            "frase": "El iq esta sobrevalorado",
            "autor": "ni idea xd"
        },
        {
            "frase": "ganar es lo unico importante",
            "autor": "Ayanokoji"
        }

    ]
}

I want to display the todos.json in my app

CodePudding user response：

You can't import json that way

It should be import json from './todos.json' or you can convert that todos.json file to a todos.js file and export the object directly like this

todos.js


const json = {
    "todos": [
        {
            "frase": "la vida es bella",
            "autor": "La pelicula xd"
        },
        {
            "frase": "El iq esta sobrevalorado",
            "autor": "ni idea xd"
        },
        {
            "frase": "ganar es lo unico importante",
            "autor": "Ayanokoji"
        }

    ]
}

export default { todos } = json

CodePudding user response：

A JSON file has no named exports, so it sounds like the error is saying you can't use a named import. Just import the entire structure. If you want to destructure it into a specific variable, do it on another line:

import data from './todos.json';
const { todos } = data;