webpack5 不从.json 文件导入内容？

Question

I am using webpack5 and could not import.json files. As far as I know, I do not need to install loader to import json. N.netheless, I did install "json5-loader" and set this rule:

rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        type: 'javascript/auto',
        // this option did not help neither
        options: {
          esModule: true,
        },
      },
    ],

Building gives me this error either way.

SyntaxError: /home/Documents/projects/ethereum/src/contracts/Tether.json: Missing semicolon. (2:16)

  1 | {
> 2 |   "contractName": "Tether",
    |                 ^
  3 |   "abi": [
  4 |     {
  5 |       "inputs": [],

Obviously, it does not recognize JSON files.

  import Tether from "./contracts/Tether.json";

this code is working with "create-react-app" but not with webpack5

To reproduce the issue I created a simle json:

Name.json:

    { "name": "yilmaz" }

And tried to import it in the same directory:

import Name from "./contracts/Name.json";
// import Tether from "./contracts/Tether.json";

getting this error:

SyntaxError: /home/Documents/projects/ethereum/clarion-ethereum/src/contracts/Name.json: Missing semicolon. (1:8)

> 1 | { "name": "yilmaz" }
    |         ^
  2 |

Answer 1

You may be relying on hot-reload to load your webpack config changes, however this is incorrect and you need to stop and restart the webpack server to see these changes take effect.