Background I’m trying to create a “buildless” JavaScript app, one where I don’t need a watch task running to transpile JSX, re-bundle code, etc every time I save any source file. It works fine with just first-party code, but I’m stuck when I try to import dependencies from npm. Goal I want to achieve this kind of workflow: npm install
Tag: es6-modules
ES module imports – can it always be done? A failed example trying to import socket.io-client
I’m trying to use a “build-less” process so I’m using a plain module script in an html file (following the Preact docs): I’m able to get the client socket.io working if I by-pass the module system and rely on the window global (note: I’m serving the html file from an http server that’s been passed to socket.io’s server and have
How to make summary module that re-exports all the exports of sub-modules for ESM modules?
How do you re-export the exports from multiple files in an ESM module without listing each individual export separately? I have a CommonJS module directory that consists of a number of files that I would like to convert to ESM imports/exports. Currently, I have an index.js file that contains this: This re-exports all the exports of all the files in
Webpack ES6 modules multiple class app organization
I’m building an app with webpack for the first time and i’m trying to wrap my head around organizing class files. I’m having trouble getting the code to work. I’m still new to ES6 and such, so my code below is probably very wrong but i’m not sure its my approach/concept or its my syntax. entry is index.js and I
ES6 modules – imported constants undefined if not in React component
The only similar question I have found is this one but I can’t see how would I have caused a circular dependancy in this case: I have a file exporting constants like so: (choices array version is for using in Select inputs and the other one secures from typing errors in condition checks) payments.constants.js When they are imported inside any
Change property value initialized in constructor outside the class
//clazz.js: //main.js While I expect the num of the c will be 9, but it is still 8. What’s going one? And is it possible to fix that? Answer Replacing the .constructor property of the prototype object doesn’t help with anything. The constructor is Clazz itself, and you are calling it directly through new Clazz() – it doesn’t create an
Using ES Modules with babel-standalone
Quoting babel docs https://babeljs.io/docs/en/babel-standalone#usage : “If you want to use your browser’s native support for ES Modules, you’d normally need to set a type=”module” attribute on your script tag. With @babel/standalone, set a data-type=”module” attribute instead” For some reason though, when including my main index.js file (which imports other js / jsx files using import), it seems like babel is
Is there a way to “npm init” an ES module?
All modern versions of Node need to run packages as modules is “type”: “module” in package.json, but I don’t see any flags for npm init or yarn init that will add that property. Is there a flag for either package manager or an easy way to add the value to package.json (i.e., npm package-property set type module or something similar)?
How would I import a custom web component asynchronously?
I have made my custom input element (modern text input for forms) into a web component. The .js file that I made to implement it has three parts. The HTML Template: The Element’s Class Declaration: Lastly, The Method That Associates the Custom Element to a Tag Name: Question: I am worried that using <script src=”./module-name”> is inefficient or could cause
Import ‘.json’ extension in ES6 Node.js throws an error
We’re trying to use the new ways of exporting and importing modules for ES6 with Node.js. It’s important for us to get the version number from the package.json file. The following code should do that: However, on execution the following error is thrown: Is there something we’re missing? Is the extension .json not supported? Is there another way to retrieve