Keep editable JS Object after React build

Question

Learning React JS, and I am using a Js variable as object inside state

import {DataChara} from './data.js';

This file is like :

const DataChara = {
"Name" : {
   Type : "One",
   Star : 5
},
"Name2" : {
   Type : "Two",
   Star : 5
}
}
module.exports = {DataChara};

And this imported file is used in my state :

state = {Chara : DataChara}

When runing npm build, all files are minified together. I don't want to npm build every time I need to update my JS Object. So I Want to keep this file editable easily.

How can I do It ?

I tried to link this file inside index.html in public, but when compiled again, I've got this message (It's the state) :

Line 14:45:  'DataChara' is not defined  no-undef

Am i doing something wrong ? What is the best way to load external JS file in React, use it in State and still be able to edit this file

EDITED :

Found a Way, don't know if it's the best, but change :

const DataChara

to

window.DataChara

And set my state to :

state = {Chara : window.DataChara}

It's working without error.