1"use strict";(self.webpackChunkyolo=self.webpackChunkyolo||[]).push([["6221"],{2216(e,t,o){o.r(t),o.d(t,{metadata:()=>n,default:()=>l,frontMatter:()=>i,contentTitle:()=>a,toc:()=>c,assets:()=>d});var n=JSON.parse('{"id":"notes/develop/javascript/module-imports-mismatch-between-es6-and-commonjs","title":"Mismatch in Module Imports between ES6 and CommonJS","description":"JavaScript has a long history of different ways to handle modularizing code, this inconsistency has always been a pain in the ass for developers. Before ES6 introduced ESM in 2015, CommonJS is the format which most modules on npm are delivered in. Now we are in the transition from CommonJS to ESM.","source":"@site/docs/notes/develop/javascript/module-imports-mismatch-between-es6-and-commonjs.mdx","sourceDirName":"notes/develop/javascript","slug":"/notes/develop/javascript/module-imports-mismatch-between-es6-and-commonjs","permalink":"/docs/notes/develop/javascript/module-imports-mismatch-between-es6-and-commonjs","draft":false,"unlisted":false,"tags":[{"inline":false,"label":"JavaScript","permalink":"/docs/tags/javascript"}],"version":"current","lastUpdatedAt":1763293244000,"frontMatter":{"tags":["javascript"]},"sidebar":"docsSidebar","previous":{"title":"String \u7684 hashCode \u4E2D\u7684 31","permalink":"/docs/notes/develop/java/java-string-hashcode-31"},"next":{"title":"How to Use Vuetify\u2019s Components in a VitePress Website","permalink":"/docs/notes/develop/javascript/vue/use-vuetify-in-vitepress"}}'),s=o(74848),r=o(28453);let i={tags:["javascript"]},a="Mismatch in Module Imports between ES6 and CommonJS",d={},c=[];function m(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",header:"header",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.R)(),...e.components},{Head:o}=t;return o||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Head",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"mismatch-in-module-imports-between-es6-and-commonjs",children:"Mismatch in Module Imports between ES6 and CommonJS"})}),"\n",(0,s.jsx)(o,{children:(0,s.jsx)("html",{lang:"en"})}),"\n",(0,s.jsxs)(t.p,{children:["JavaScript has a long history of different ways to handle modularizing code, this inconsistency has always been a pain in the ass for developers. Before ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/learn",children:"ES6"})," introduced ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules",children:"ESM"})," in 2015, ",(0,s.jsx)(t.a,{href:"https://nodejs.org/api/modules.html",children:"CommonJS"})," is the format which most modules on ",(0,s.jsx)(t.a,{href:"https://www.npmjs.com/",children:"npm"})," are delivered in. Now we are in the ",(0,s.jsx)(t.a,{href:"https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c",children:"transition from CommonJS to ESM"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["There is a mismatch in features between CommonJS and ES6 regarding the distinction between a ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#namespace_import",children:"module namespace object import"})," and a ",(0,s.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import",children:"default import"}),"."]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{}),(0,s.jsx)(t.th,{children:"ES6"}),(0,s.jsx)(t.th,{children:"CommonJS"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"namespace import"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:'import * as moment from "moment"'})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:'const moment = require("moment")'})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"default import"}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:'import moment from "moment"'})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:'const moment = require("moment").default'})})]})]})]}),"\n",(0,s.jsx)(t.admonition,{type:"warning",children:(0,s.jsxs)(t.p,{children:["The ES6 modules spec states that a namespace import (",(0,s.jsx)(t.code,{children:"import * as x"}),") can only be an object, while CommonJS's ",(0,s.jsx)(t.code,{children:"require()"})," allows for the import to be a function and be callable."]})}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsxs)(t.p,{children:["TypeScript has a compiler flag to reduce the friction between the two different sets of constraints with ",(0,s.jsx)(t.a,{href:"https://www.t
1ypescriptlang.org/tsconfig#esModuleInterop",children:(0,s.jsx)(t.code,{children:"esModuleInterop"})}),"."]})})]})}function l(e={}){let{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},28453(e,t,o){o.d(t,{R:()=>i,x:()=>a});var n=o(96540);let s={},r=n.createContext(s);function i(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.