Learn the latest and greatest features of JavaScript. The ES6 modules have evolved over a period of time. Following is a useful enhancement to easily consume JSON files in a JavaScript module.
How to Import JSON file as a Module
Using “Import Assert” Statement, A TC39 Stage 3 feature
Back in the day, JavaScript started with small programs. As the applications’ complexity evolved, more and more JavaScript code and files were added, there has been a need for splitting the application into multiple modules.
Since ES2015, browsers have natively supported the feature to import and export JavaScript functions and objects as modules.
While this works well with JavaScript files, importing a JSON file as a module does not.
As an example, consider the following dinosaur data in a JSON file:
Next, consider importing the JSON file with the following statement:
import dinosaurs from './dinosaurs.json';Google Chrome shows the following error:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.Note: Other browsers show an error to a similar effect.
Content Type
Notice, the browsers (web platform) verifies content type (referred to as MIME type — Multipurpose Internet Mail Extensions).
A MIME type defines a type of resource. Consider a few commonly used MIME types.
- HTML files— text/html
- JSON files — application/json
- JavaScript files — text/javascript
- JPEG Images — image/jpeg
- MP3 — audio/mpeg
- MP4 — video/mp4
Security Issue
A file extension (eg. .js or .json) or a MIME type is not enough to definitively determine the content type. It is possible to import a module across domains (cross origin).
Imagine, a developer intends to import a JSON file across domains as a module. As you know, a JSON file does not execute like a script. Hence, a sanitised JSON file is considered safe.
However, the third party might return the JSON file with a content type text/javascript. A malicious script could be included in the JSON file and it runs on the client machine.
Solution
The HTML specification requires the developer to explicitly specify the content type with an assert statement.
See below:
import dinosaurs from './dinosaurs.json' assert {type: 'json'};If the server does not return a content type specified in the assert statement, the browser (web platform) returns an error. This ensures security and avoids running unintended malicious scripts along with an application.
The assert statement works with dynamic import as well.
Consider the following code snippet:
const dinosaurs = import('./dinosaurs.json', {
assert: {
type: 'json'
}
});Please note, the above import() function returns a promise. As you resolve the promise, you have access to the module. Use the default field on the module to access the JSON file.
Consider the following code snippet:
dinosaurs.then( d =>
d.default.forEach(dino => {
console.log("🦕", dino);
})
);Note: the import assertions feature is still experimental. The TC39 proposal is in Stage 3, referred to as candidate. Stage 3 features are almost final. Assuming there is no further critical feedback or refinements, ECMA reviewers will elevate the change to Stage 4/ Finished.
References
Build composable web applications
Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable frontends and backends with a powerful and enjoyable dev experience.
Bring your team to Bit Cloud to host and collaborate on components together, and greatly speed up, scale, and standardize development as a team. Start with composable frontends like a Design System or Micro Frontends, or explore the composable backend. Give it a try →
Bit’s open-source tool helps 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
