Getting Expected an assignment or function call and instead saw an expression no-unused-expressions, when import a file in React

Question

I have a file data.js that only contains an array of objects and nothing else, just like the following

[{"id":"1122","name":"foo","price":"2.000"}, {"id":"1133","name":"bar","price":"7.000"}]

The data.js file is located in same directory where my Main component is located. And I am importing it like the following:

import Data from "./data";

But I always get the following error:

./src/components/data.js Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions

I think the problem is in the data.js file itself. because it is not a function nor a class. But I am not allowed to do any changes in the file.

Answer 1

Your data.js is not actually exporting anything at the moment, so the linter thinks that you've declared an array in that file which subsequently doesn't get used anywhere. Try exporting the array instead, so that it can be imported without linting problems:

export default [{"id":"1122","name":"foo","price":"2.000"}, {"id":"1133","name":"bar","price":"7.000"}];

If you don't want the file to contain Javascript syntax, then don't use the .js file extension, and parse the JSON after importing to transform into an array:

import Data from "./data";
const arr = JSON.parse(Data);

https://codesandbox.io/s/4x3756pqk0