Как правильно импортировать модуль js в js без html?

Question

[Elvis]

Хочу сделать файл конфигурации
config.js
export let test = 'This is test';
Добавить его в мой основной файл js
main.js

import * as config from "config.js";
console.log(`Import from config: ${config.test}`);

Но в браузере ругается
Cannot use import statement outside a module
Как правильно импортировать свой файл с настройками?
Файлы находятся рядом

Answer 1

[wakenbyWork]

Если не используется сборщик, то лучше его взять. Могу посоветовать esbuild. Не знаю вашей задачи, можно и vite, у него под капотом esbuild

Если используете уже что-то, хоть тот-же webpack. То нужно понять почему не работает. Указано ли "type": "module" в package.json

Если нет возможности использовать сборщик, то вот обходной путь, но это такое себе:

config.js

export const options = {
  foo: 'bar'
}

main.js

import("./config.js").then((res) => {
  const { options } = res;
  console.log(options.foo);
});

Или даже так:

const initApp = async () => {
  const { options } = await import('./options')

  console.log(options)
}

initApp()

Comments

[Elvis]

Возможность использовать сборщик думаю что есть, просто его не использовал. У меня свой проект на Flask, соответственно там html и js. Просто файлами.
В том же python можно создать свой config.py, импортировать его где нужно import config as cfg и использовать в коде где нужно cfg.test
Хотелось бы добиться того же в js. Так как для тестовых и продуктивных серверов используются, к примеру, разные адреса для того же fetch.

Answer 2

[otdameskapizm]

Вы прописывали type="module" ?

Comments

[Elvis]

без html

[otdameskapizm]

Он не только там прописывается, но и в package.json, как вариант

[Elvis]

otdameskapizm, дело в том что я не использую сборщик. Да, возможно стоило бы, нужно про них почитать, всегда по старинке просто файлы js прикреплял в html.

Answer 3

[eRKa]

В ошибке все написано. Вы не можете использовать этот синтаксис для файла, который находится вне модуля. Чтобы выбрать вариант решения, нужно точнее понимать как Вы формируете свою сборку? Вы используете какой-то сборщик или просто js файлики. Если используете сборщик, то type: "module" в package.json может решить проблему ил возможно у Вас не указаны версии ES6.
Если никаких сборщиков не используете, то попробуйте более древний способ config=require(./config.js.js); Или можете создать модуль и импортировать из модуля.

Comments

[Elvis]

Да, саму ошибку я понимаю. Бегло посмотрел - нужно либо объявлять модулем файл в html, либо пользоваться сборщиком. С первым вариантом понятно, это сделать в принципе можно, но хотелось бы без лишнего в html. Видимо мне нужно смотреть в сторону сборщика.
Про более древний способ спасибо, попробую его.