Webpack не загружает JSON в Javascript

ProgramBox

Webpack не загружает JSON в Javascript

Post author:admin
Запись опубликована:2 сентября, 2022
Post category:Вопросы по программированию

#json #webpack #loader

#json #webpack #загрузчик

Вопрос:

Я пытаюсь загрузить динамически сгенерированный JSON файл в свое javascript приложение, но я продолжаю сталкиваться с проблемами.
ПРИМЕЧАНИЕ: я не использую Node.js , просто простой ванильный javascript.

Все, что я читал, говорило об этом, Webpack и на их веб-сайте четко указано, что: beginning with Webpack version 2.0.0 json loaders are no longer needed.

Ну, прямо сейчас я пытаюсь выполнить следующее в своем app.js файле и получаю сообщение об ошибке:

 import * as contractArtifact from "../build/contracts/MySmartContract.json"

Ошибка:

 import declarations may only appear at top level of a module

ПРИМЕЧАНИЕ: этот MySmartContract.json файл, который я пытаюсь загрузить, не является статическим; он генерируется динамически и должен загружаться каждый раз заново.

Я очень новичок webpack , но я почти уверен, что установил каждый отдельный пакет, который мне может понадобиться для этого — согласно миллиону руководств, которые я прошел.
Вот что сейчас находится в моем package.json файле:

 ...
"scripts": {
    "serve": "webpack amp;amp; node server.js"
  },
"devDependencies": {
    "@babel/template": "^7.10.4",
    "file-loader": "^6.2.0",
    "json5-loader": "^4.0.1",
    "lite-server": "^2.6.1",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
}
...

И мой webpack.config.js файл выглядит так:

 const path = require("path");

module.exports = {
    entry: "./src/js/index.js",
    output: {
        filename: "myCode.js",
        path: path.resolve(__dirname, "FinalCode")
    },
    resolve: { 
        extensions: ['.wasm', '.mjs', '.js', '.json']   
    }
};

Итак, что именно нужно добавить или изменить во всем этом — и как я, наконец, импортирую этот .json файл в свое javascript приложение? Я использую import оператор? require Заявление? Или что-то еще?

1. Вы пробовали добавлять расширение json: например. resolve: { extensions: ['.wasm', '.mjs', '.js', '.json'] } в свой webpack.config.js ?

2. Хорошо, я только что добавил resolve предложенную вами строку в свой код (я также обновил код в своем вопросе выше — дайте мне знать, если я должен был добавить его именно так?) Потому что прямо сейчас я все еще получаю ту же ошибку, что и раньше.

3. Какую ошибку вы получаете? @Sirab33? Это не поможет, если мы не знаем, что сломано? Также вам необходимо добавить loader конфигурацию для анализа файлов JS. github.com/babel/babel-loader <— смотрите конфигурацию для вашей версии Babel и Webpack ( webpack.js.org/loaders/babel-loader )

4. @TheLazyChap Чтобы ответить на ваш вопрос: ошибка, которую я получаю import declarations may only appear at top level of a module (обратите внимание, что я уже указал это как в тексте моего вопроса, так и в моем последнем комментарии "I'm still getting the same error I got before." ) Я пошел дальше и добавил loader конфигурацию в соответствии с вашим предложением, используя предоставленные вами ссылки (спасибо!), Но я все еще получаю ту же ошибку.

Ответ №1:

Вы выполняете этот импорт внутри функции / if или что-то еще? Ошибка, похоже, предполагает это.

Импорт должен быть статическим (если вы не используете динамический импорт, который является функцией promise) разница с требованием, которое можно использовать где угодно.

Попробуйте поместить эту строку в начало файла, а также переписать ее следующим образом

 import contractArtifact from "../build/contracts/MySmartContract.json"

1. Чтобы ответить на ваш вопрос: нет, я не делаю это внутри функции или условия. Согласно вашим предложениям, я поместил его в самый верх файла — та же точная ошибка: Uncaught SyntaxError: import declarations may only appear at top level of a module

Ответ №2:

Вы можете изменить свой файл MySmartContract.json на MySmartContract.js и код внутри будет:

 export const MySmartContract = [{Your json data}]

завершите их импорт:

 import { MySmartContract } from "../build/contracts/MySmartContract.js"

или попробуйте

 import MySmartContract from "../build/contracts/MySmartContract.js"

тогда MySmartContract будет JSONObject или JSONArray, это зависит от ваших данных json

1. Я бы хотел иметь возможность делать то, что вы предлагаете, но я не могу прикоснуться к json файлу или каким-либо образом изменить его код, потому что он динамически генерируется компилятором. Мы имеем дело с Ethereum smart contract here, написанным Solidity . Каждый раз, когда я его компилирую, он переписывается и json автоматически помещается в build папку. Я не контролирую его формат и не могу добавить export const MySmartContract в него что-либо еще. (По крайней мере, насколько мне известно.)

Метки: Webpack не загружает JSON в Javascript