title: Wrong encoding when importing JSON with Polish characters in JavaScript
body: <p>I have the below JSON file &quot;locations.json&quot;:</p>
  <pre><code>{
    &quot;lubelskie&quot;: [
      &quot;abramów&quot;,
      &quot;adamów&quot;,
      &quot;aleksandrów&quot;,
      &quot;annopol&quot;,
      &quot;baranów&quot;,
      &quot;batorz&quot;,
      &quot;bełżec&quot;,
      &quot;bełżyce&quot;
    ]
  }
  </code></pre>
  <p>I import the JSON in to my Class, using the below statement:</p>
  <pre><code>import locations from &quot;./locations.json&quot;;
  
  class areas {
      constructor() {
          console.log(locations);
      }
  }
  
  export default areas;
  </code></pre>
  <p>The console output I get is below:</p>
  <pre><code>{
    lubelskie: [&quot;abramÃ³w&quot;, &quot;adamÃ³w&quot;, &quot;aleksandrÃ³w&quot;, &quot;annopol&quot;, &quot;baranÃ³w&quot;, &quot;batorz&quot;, &quot;beÅ‚Å¼ec&quot;, &quot;beÅ‚Å¼yce&quot;]
  }
  </code></pre>
  <p>The problem is the characters get encoded <strong>from &quot;abramów&quot; to &quot;abramÃ³w&quot;</strong> or <strong>from &quot;bełżyce&quot; to &quot;beÅ‚Å¼yce&quot;</strong>.</p>
  <p>I am unable to show them in their original encoding.</p>
  <p>The JSON file is encoded in UTF-8 format.</p>
  <p>I have the below package.json packages:</p>
  <pre><code>&quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.6.4&quot;,
      &quot;@babel/plugin-syntax-dynamic-import&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.6.3&quot;,
      &quot;acorn&quot;: &quot;^6.3.0&quot;,
      &quot;autoprefixer&quot;: &quot;^9.6.5&quot;,
      &quot;babel-loader&quot;: &quot;^8.0.6&quot;,
      &quot;clean-webpack-plugin&quot;: &quot;^0.1.19&quot;,
      &quot;copy-webpack-plugin&quot;: &quot;^5.0.4&quot;,
      &quot;css-loader&quot;: &quot;^1.0.0&quot;,
      &quot;file-loader&quot;: &quot;^2.0.0&quot;,
      &quot;imagemin&quot;: &quot;^6.0.0&quot;,
      &quot;img-loader&quot;: &quot;^3.0.0&quot;,
      &quot;lodash&quot;: &quot;^4.17.15&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^0.4.2&quot;,
      &quot;node-sass&quot;: &quot;^4.12.0&quot;,
      &quot;postcss-loader&quot;: &quot;^3.0.0&quot;,
      &quot;raw-loader&quot;: &quot;^4.0.1&quot;,
      &quot;sass-loader&quot;: &quot;^7.3.1&quot;,
      &quot;tar&quot;: &quot;^4.4.13&quot;,
      &quot;url-loader&quot;: &quot;^1.1.1&quot;,
      &quot;utf8&quot;: &quot;^3.0.0&quot;,
      &quot;webpack&quot;: &quot;^4.41.2&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.9&quot;,
      &quot;zip-webpack-plugin&quot;: &quot;^3.0.0&quot;
    },
    &quot;resolutions&quot;: {
      &quot;webpack/acorn&quot;: &quot;6.1.1&quot;,
      &quot;tar&quot;: &quot;&gt;=4.4.2&quot;
    }
  </code></pre>
  <p>I tried loading the files in different ways, using &quot;raw-loader&quot; and converting the UTF-8 characters to /uABC, but it looks like the encoding happens during the import statement. The babel transpiler keeps the encoding correct and the converted webpack files have the correct UTF-8 encoding, but when the script runs the encoding happens.</p>
  <p>Any suggestions where I am doing something wrong?</p>
  <hr />
  <p><strong>UPDATE #1:</strong></p>
  <p>I tried to encode the JSON file to Unicode:</p>
  <pre><code>&quot;abram\u00f3w&quot;,
  &quot;adam\u00f3w&quot;,
  &quot;aleksandr\u00f3w&quot;,
  &quot;annopol&quot;,
  &quot;baran\u00f3w&quot;,
  &quot;batorz&quot;,
  &quot;be\u0142\u017cec&quot;,
  &quot;be\u0142\u017cyce&quot;
  </code></pre>
  <p>I tried to use the <a href="https://www.npmjs.com/package/unidecode" rel="nofollow noreferrer">https://www.npmjs.com/package/unidecode</a> library and the meta charset tags in the head/script tag, but nothing worked. I still get the same output in the console.</p>
  <hr />
  <p><strong>UPDATE #2:</strong></p>
  <p>I tried changing the JSON file to a JS file with the below contents:</p>
  <pre><code>export default JSON.stringify({
    &quot;lubelskie&quot;: [
      &quot;abramów&quot;,
      &quot;adamów&quot;,
      &quot;aleksandrów&quot;,
      &quot;annopol&quot;,
      &quot;baranów&quot;,
      &quot;batorz&quot;,
      &quot;bełżec&quot;,
      &quot;bełżyce&quot;
    ]
  })
  </code></pre>
  <p>Then importing the file like below:</p>
  <pre><code>import locations from &quot;./locations.js&quot;;
  
  class areas {
      constructor() {
          //const l = JSON.parse(locations);
          console.log(locations);
      }
  }
  
  export default areas;
  </code></pre>
  <p>I still get the same output in the console, the locations are encoded.</p>