Aprendiendo React JS, y estoy usando una variable Js como objeto dentro del estado

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

Este archivo es como:

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

Y este archivo importado se usa en mi estado:

 state = {Chara : DataChara}

Al ejecutar npm build, todos los archivos se minimizan juntos. No quiero compilar npm cada vez que necesito actualizar mi objeto JS. Así que quiero mantener este archivo editable fácilmente.

Cómo puedo hacerlo ?

Intenté vincular este archivo dentro de index.html en público, pero cuando lo volví a compilar, recibí este mensaje (es el estado):

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

Estoy haciendo algo mal ? ¿Cuál es la mejor manera de cargar un archivo JS externo en React, usarlo en State y aún poder editar este archivo?

EDITADO:

Found a Way, no sé si es la mejor, pero cambia:

 const DataChara

a

 window.DataChara

Y establecer mi estado en:

 state = {Chara : window.DataChara}

Está funcionando sin error.