ReactJS: Importing Data from External File Throws 'export Data not found' Error

Question

I'm working on a ReactJS project and trying to import data from an external file, but I keep encountering an error: export 'Data' (imported as 'Data') was not found in './data' (possible exports: default).

I have a file named data.js where I'm exporting an array of objects containing some data. Here's how it looks:

// data.js

const data = [
    // Array of objects
];

export default data;

In my component file, I'm importing this data using:

import React from 'react';
import Data from './data';

const MyComponent = () => {
    // Component logic
};

export default MyComponent;

I've double-checked the file paths, and they seem correct. However, I'm still getting this error. What could be causing this issue? How can I resolve it?

What I Tried: I attempted to import data from an external file named data.js into my React component file. Following standard practices, I used the import statement to bring in the exported data object from data.js.

Expected Outcome: I expected the import statement to successfully fetch the exported data object named Data from data.js, enabling me to use it within my React component.

Actual Result: Instead of the expected outcome, I received an error message stating export 'Data' (imported as 'Data') was not found in './data'. This was unexpected and confusing, as I had correctly exported the data object as default in data.js.