In the early days, JavaScript did not have a module system, and with ECMAScript 6 came standard modules that changed the way code is organized. Since then, the TC39 committee has been adding improvements, and one of the most recent is import attributes, an elegant way to provide additional information when importing a module.
What are import attributes: an import attribute allows you to indicate metadata about how a resource should be handled when imported. In current practice, browsers and Node mainly recognize the type attribute to specify the module type: json, css, wasm. The specification contemplates the inclusion of other attributes in the future as new needs arise.
Basic syntax: the syntax extends the usual import form without replacing it, adding the word with followed by braces with attribute: value pairs, for example import name from path with { type: json } where type can take values like json, css, wasm without quotes in this explanation.
The type attribute: type indicates the format of the imported module. The values supported today are json, css, and wasm. Outside these values, there is no standard support in the current specification.
Importing JSON modules in the browser: traditionally, there was no native way to import JSON files in the browser, and bundlers that embedded the data or the use of fetch followed by response.json, which forces working with promises, were used. With import attributes, it is possible to explicitly indicate that a resource with a json extension should be treated as JSON using import name from path with { type: json } and obtain the already parsed JSON value in the imported variable.
Conceptual example for the browser: if you have a languages.json file with a list of objects with name and ext, you can use in a module loaded with type module the statement import languages from ./languages.json with { type: json } and directly use languages as an array with the already parsed objects.
Importing JSON in Node: although CommonJS allowed require of JSON files, with ECMAScript modules in Node an equivalent mechanism was needed. Node implements import attributes to allow native JSON imports from ESM using import languages from ./languages.json with { type: json }. If the type attribute is omitted, Node may throw an error indicating that the import attribute type with value json is missing.
Compatibility and notes: some bundlers still allow implicit imports without with, but the native behavior of browsers and Node follows the specification that requires the attribute when applicable. Import attributes are a powerful improvement to express how to handle resources other than pure JavaScript, but their adoption may vary depending on tools and versions.
Why it matters for your company: if you develop modern solutions, knowing and applying import attributes allows you to build custom applications and custom software that are cleaner and more efficient, reducing the need for build hacks and improving the module flow. At Q2BSTUDIO, we are specialists in software development and custom applications, with experience in artificial intelligence, cybersecurity, cloud services aws and azure, business intelligence services, ai for companies, AI agents, and power bi. We integrate modern engineering practices so that your projects take advantage of features like import attributes along with CI CD pipelines, security, and cloud deployment.
Services we offer: custom software development, creation of custom applications, artificial intelligence solutions and AI agents for process automation, cybersecurity consulting, implementation of solutions in cloud services aws and azure, business intelligence projects with power bi, and data services that allow you to exploit valuable information for decision-making.
Practical conclusion: import attributes provide control and clarity over how to handle imported resources in ECMAScript modules, being particularly useful for JSON, CSS, and Wasm. Adopting them improves consistency between environments and facilitates migration to modern development patterns. If you want your project or product to take advantage of these and other good technological practices, contact Q2BSTUDIO for a personalized proposal in custom software, custom applications, and artificial intelligence and cybersecurity initiatives.
