Babel Interop Defaults might lead to confusion with ES6 Modules and imports/exports

100%

Babel Interop Defaults might lead to confusion with ES6 Modules and imports/exports

✓ Published0🌍 Public

Last edited Jun 9, 2017

Created on Oct 24, 2015

This example shows how Babel’s default interop behavior can make ES6 module imports behave unexpectedly, producing a value where the spec would yield `undefined`. The code defines `export.js` with a default export object, then in `module-b.js` imports a named `x` via `import {x} from './module-a'`. With default Babel settings, `console.log(x)` outputs `8`, because Babel sets both `module.exports` and `exports["default"]`. The example contrasts this with vanilla ES6, where the import would fail, and shows the explicit double export needed for spec-compliant behavior.

AI-generated description

Similar vizzes

Loading thumbnail…

Named and Default export

This example demonstrates the difference between named and default exports in ES6 JavaScript modules, showing how both can be imported together in a React context. The code defines `foo.js` with named exports `foo` and `bar`, plus a default export function, then imports them in `index.js` using mixed import syntax. It uses template literals to log the exported values and imports D3's `select` API to verify the library loads. The rendered page is a minimal HTML document with large centered text, displaying "Hello HTML" without any visualization or data rendering.

AAndrea Mignone

66% match

Loading thumbnail…

Gist e9ca6a4ec4fe6c3bee98

This example shows how a JavaScript module with reserved-word property names—specifically `await`—triggers a parsing error during Rollup’s build pipeline, while the same names work in object literals. The code includes an `index.js` file defining an exported object with methods named `await` and `add`, and a `rollup.config.js` that applies the `rollup-plugin-babel` with the `es2015-rollup` preset via `.babelrc`. The visualization highlights the exact source-map error location from Rollup’s parser, contrasting valid syntax with the failing line. It uses Rollup’s plugin system and Babel’s preset configuration to demonstrate the issue.

HHypercubed

61% match

Loading thumbnail…

Native ES6 Modules Test

This example tests native ES6 module support in browsers without a bundler. It imports a constant from `bar.js` and logs it using `console.log`, while also demonstrating an import map that aliases `./utils.mjs` to an inline data URL for a logging function. The code uses the native `type="module"` script tag and the browser’s import map API, with a React starter link for comparison.

CCurran Kelleher

58% match

Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript modules and dependencies are handled within an HTML page, highlighting the contrast between traditional script tags and ES6 module imports. It shows the console output of a string concatenated from variables exported across separate files, including `GetRekt.js` and `lmfao.js`, using named exports. The code uses ES6 `import` and `export` statements, which are bundled by Vizhub’s internal Rollup process when the file is named `index.js`. It visualizes the concept of topological sorting for script dependencies, though the actual rendering is limited to a plain HTML text display.

JJaga-droid

57% match

Loading thumbnail…

Gist afb2c61a5f1e80066b6beb25830811f4

This example demonstrates a minimal JavaScript module that exports a function returning the number 42. It shows the basic structure of an ES6 module using the `export default` syntax. The code relies on JavaScript’s module system and contains no external libraries or data sources. The visualization simply renders a fixed constant value, with no dynamic behavior, animation, or DOM interaction. It serves as a placeholder or starting point for integrating a data-driven chart or graph in a larger application.

KKristinHenry

56% match

Loading thumbnail…

The correct way to compile ES6 using babel...

This example shows how to configure Babel and Webpack to compile ES6 code into three separate module formats for different consumption contexts. It demonstrates three distinct build targets—Node.js unbundled, Node.js bundled, and browser bundled—each with its own Babel preset and package.json entry point. The code specifies `babel-preset-env` with environment-specific targets like `node: "6.10"` or `browsers: "last 2 versions, ie 10-11"`, and uses the `modules: false` option to enable tree shaking. The accompanying `package.json` and `webpack.config.js` files illustrate how to wire these build scripts together, with Webpack automatically selecting the appropriate entry point (`main`, `module`, or `browser`) based on the `target` setting.

66ewis

56% match

Loading thumbnail…

Ep6

This example demonstrates how modular JavaScript code can be assembled using ES6 imports and exports, alongside a direct integration of the D3.js library (v7). The visualization outputs a simple text string built from a constant defined in a separate module, while also logging the imported `select` function from D3 to the console. It contrasts an "old school approach" with a React-based starter template, highlighting different methods for structuring D3 projects. The code relies on D3's distribution from unpkg and does not render any graphical charts, serving only as a code-level illustration.

JJun Alvarado

56% match

Loading thumbnail…

null or undefined

This visualization compares JavaScript’s `null` and `undefined` through code examples, highlighting how destructuring defaults behave differently for each. It shows ES5 and ES6+ patterns where `undefined` triggers default values but `null` does not, and where null causes runtime exceptions without extra guards. The examples reference Douglas Crockford, TypeScript guidelines, and Lodash’s `_.find` to support choosing `undefined` over `null`. The dataset is the code snippets themselves, presented as a markdown document.

RRestuta

56% match