Which browsers support import and export syntax for ECMAScript 6?
It’s supported in: Safari 10.1 Chrome 61 Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config. Edge 16
It’s supported in: Safari 10.1 Chrome 61 Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config. Edge 16
Can I destructure a default export object on import? No. You can only destructure an object after importing it into a variable. Notice that imports/exports have syntax and semantics that are completely different from those of object literals / object patterns. The only common thing is that both use curly braces, and their shorthand representations … Read more
The error occurs because react-hook-mousetrap is exported as an ESM library. You can have Next.js transpile it using next-transpile-modules in your next.config.js. const withTM = require(‘next-transpile-modules’)([‘react-hook-mousetrap’]); module.exports = withTM({ /* Your Next.js config */});
Actually the error you got was because you need to explicitly state that you’re loading a module – only then the use of modules is allowed: <script src=”https://stackoverflow.com/questions/37624819/t1.js” type=”module”></script> I found it in this document about using ES6 import in browser. Recommended reading. Fully supported in those browser versions (and later; full list on caniuse.com): … Read more
Module creates a scope to avoid name collisions. Either expose your function to window object import {hello} from ‘./test.js’ window.hello = hello Or use addEventListener to bind handler. Demo <button type=”button” id=”hello”>Click Me</button> <script type=”module”> import {hello} from ‘./test.js’ document.querySelector(‘#hello’).addEventListener(‘click’, hello) </script>
import React, { Component, PropTypes } from ‘react’; This says: Import the default export from ‘react’ under the name React and import the named exports Component and PropTypes under the same names. This combines the two common syntaxes which you’ve probably seen import React from ‘react’; import { Component, PropTypes } from ‘react’; The first … Read more
Node.js 13.2.0 & Above Node.js 13.2.0 now supports ES Modules without a flag 🎉. However, the implementation is still marked as experimental so use in production with caution. To enable ECMAScript module (ESM) support in 13.2.0, add the following to your package.json: { “type”: “module” } All .js, .mjs (or files without an extension) will … Read more
It’s a named export vs a default export. export const is a named export that exports a const declaration or declarations. To emphasize: what matters here is the export keyword as const is used to declare a const declaration or declarations. export may also be applied to other declarations such as class or function declarations. … Read more
There is no way to do this with a single import statement, it does not allow for invocations. So you wouldn’t call it directly, but you can basically do just the same what commonjs does with default exports: // module.js export default function(options) { return { // actual module } } // main.js import m … Read more
I don’t think this is possible, but afaik the resolution of module names is up to module loaders so there might a loader implementation that does support this. Until then, you could use an intermediate “module file” at lib/things/index.js that just contains export * from ‘ThingA’; export * from ‘ThingB’; export * from ‘ThingC’; and … Read more