Destructuring a default export object

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

“Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js

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 */});

ES2015 import doesn’t work (even at top-level) in Firefox

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

ES6 Modules: Undefined onclick function after import

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>

using brackets with javascript import syntax

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 plans to support import/export ES6 (ECMAScript 2015) modules

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

Is it possible to import modules from all files in a directory, using a wildcard?

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