As @Bergi mentioned in the comment, adding `type=&quot;module&quot;` to the `main.js` import line in the HTML solved the issue. All is working now. I.e.

```
&lt;script type=&quot;module&quot; src=&quot;assets/js/main.js&quot;&gt;
```

Thanks to all of you who responded and tried to help.

From what I can see you are trying to load the file `menu.module.js` while it&#39;s actually named `menu.js`.

PS: From what I recall you could also drop the `.js` from the import statement.

you can use any module bundler, one of the simple flexible solutions is `parcel 2`, it&#39;s beta right now but you can play with it.

```
 - npm i -D parcel@next
 - parcel index.html

```

I&#39;m making a modal in my React project that requires a class to be added to the body when the modal is open and removed when it is closed. 

I could do this the old jQuery way by running some vanilla JavaScript which adds / removes a class, however this doesn&#39;t feel like the normal React philosophy. 

Should I instead setState on my top level component to say whether the modal is open or closed? Even if I did this, as it&#39;s rendered into the div on the page it&#39;s still a side-effect to edit the body element, so is there any benefit for this extra wiring?

Add a class to the HTML &lt;body&gt; tag with React?

I&#39;m developing a couple of Vue apps using single file components. I find quite a few of my components require common config information, for example an object containing delivery methods which I might define like this:

    const DeliveryMethods = {
      DELIVERY: &quot;Delivery&quot;,
      CARRIER: &quot;Carrier&quot;,
      COLLATION: &quot;Collation&quot;,
      CASH_AND_CARRY: &quot;Cash and carry&quot;
    }

What is the cannonical way to make that available to my components? At the moment, I have done it with a file &#39;config.js&#39;, as below:

    export default {
    
      DeliveryMethods: {
        DELIVERY: &quot;Delivery&quot;,
        CARRIER: &quot;Carrier&quot;,
        COLLATION: &quot;Collation&quot;,
        CASH_AND_CARRY: &quot;Cash and carry&quot;
      }

    }

In my components where I need it, I have `import config from &#39;src/config.js&#39;`, and where I want to use one of these, I&#39;ll refer to e.g., `config.DeliveryMethods.CASH_AND_CARRY`. This seems to me rather long-winded and repetitive, though, and I&#39;d prefer to be able to use just `DeliveryMethods.CASH_AND_CARRY` instead of `config.DeliveryMethods.CASH_AND_CARRY`.

 What is the canonical way to based on  [js lint][1] and/or the  [jquery style guide][2]? Are there any other authorities to consider?


  [1]: http://www.jslint.com/help.html
  [2]: http://contribute.jquery.org/style-guide/js/

Canonical way to define common constants in Vue.js?

For a personal project, I&#39;m trying to use ES6 import to write cleaner code. As first test, I&#39;m writing an object that should generate a menu. The whole code is working when I&#39;m directly loading up the class, yet when using the import and export in ES6, it gives an &quot;Uncaught SyntaxError: Unexpected identifier&quot; error on the `import` line in `main.js`

I&#39;ve got the following files:

**assets/js/menu.module.js**

    &#39;use strict&#39;;

    export default class Menu
    { ... }

**assets/js/main.js**

    import Menu from &quot;./menu.module.js&quot;;

    window.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
        const menu = new Menu();
    });

**index.html**

    &lt;script type=&quot;module&quot; src=&quot;assets/js/menu.module.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/js/main.js&quot;&gt;

Note that these are only the relevant lines of code.

Using the `&lt;script type=&quot;module&quot;&gt;` line or not did not seem to make any difference for me. I do have both the chrome flags for experimental and ES6 Modules enabled, as without them I received an error about `import` not being defined.

Chrome version would be 62, so according to different sources (including google&#39;s update log itself) this should be working, even without the flags.

Can anyone enlighten me as of why this is not working, and what I am doing wrong?

ES6 module Import giving &quot;Uncaught SyntaxError: Unexpected identifier&quot;

For a personal project, I'm trying to use ES6 import to write cleaner code. As first test, I'm writing an object that should generate a menu. The whole code is working when I'm directly loading up the class, yet when using the import and export in ES6, it gives an "Uncaught SyntaxError: Unexpected identifier" error on the <code>import</code> line in <code>main.js</code>
I've got the following files:
assets/js/menu.module.js
<pre><code class="hljs language-javascript">'use strict';

export default class Menu
{ ... }
</code></pre>
assets/js/main.js
<pre><code class="hljs language-javascript">import Menu from "./menu.module.js";

window.addEventListener('DOMContentLoaded', () => {
 const menu = new Menu();
});
</code></pre>
index.html
<pre><code class="hljs language-php-template">&#x3C;script type="module" src="assets/js/menu.module.js">&#x3C;/script>
&#x3C;script src="assets/js/main.js">
</code></pre>
Note that these are only the relevant lines of code.
Using the <code>&#x3C;script type="module"></code> line or not did not seem to make any difference for me. I do have both the chrome flags for experimental and ES6 Modules enabled, as without them I received an error about <code>import</code> not being defined.
Chrome version would be 62, so according to different sources (including google's update log itself) this should be working, even without the flags.
Can anyone enlighten me as of why this is not working, and what I am doing wrong?

I have the following function that is setting up a select2 plugin, which needs selects to stay open if they are multiple but closed if they are not:


&lt;!-- language: lang-js --&gt;

    function setUpSelects($selects, closeOnSelect) {
      $selects.each((i, item) =&gt; {
        const $item = $(item);

        $item.select2({
          closeOnSelect: closeOnSelect,  // &lt;-- error on this line
          minimumResultsForSearch: Infinity,
          placeholder: $item.data(&#39;placeholder&#39;) || $item.attr(&#39;placeholder&#39;),
        });
      });
    }

    setUpSelects($(&#39;select:not([multiple])&#39;), false);
    setUpSelects($(&#39;select[multiple]&#39;), true);


However, when I try to run this code, the eslint checker is giving me an error (on the line shown above) of:

&gt;error  Expected property shorthand  object-shorthand

I have done a search and read the docs but it doesn&#39;t show how you are meant to use a variable and the unaccepted answer on [this question](https://stackoverflow.com/questions/31898616/identifying-gulp-eslint-error-reason) seems to think it may be a bug in eslint (although I have found no evidence to support that)

Is there a way to make this work or should I just disable the rule for that line?

eslint object-shorthand error with variable passed in

I am breaking apart Redux&#39; todo example to try to understand it. I read that `mapDispatchToProps` allows you to map dispatch actions as props, so I thought of rewriting `addTodo.js` to use mapDispatchToProps instead of calling dispatch(addTodo()). I called it `addingTodo()`. Something like this:


    import React from &#39;react&#39;;
    import {connect} from &#39;react-redux&#39;;
    import addTodo from &#39;../actions&#39;;
    
    let AddTodo = ({addingTodo}) =&gt; {
      let input;
      return (
          &lt;div&gt;
            &lt;form onSubmit={e =&gt; {
              e.preventDefault()
              if (!input.value.trim()) {
                return
              }
              addingTodo(input.value)
              input.value = &quot;&quot;
            }}&gt;
              &lt;input ref={node =&gt; {
                input = node
              }} /&gt;
              &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
      )
    }
    
    const mapDispatchToProps = {
      addingTodo: addTodo
    }
    
    AddTodo = connect(
      mapDispatchToProps
    )(AddTodo)
    
    export default AddTodo

However, when I run the app, I get this error: `Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.`. I never used `mapStateToProps` to begin with on AddTodo component, so I was not sure what was wrong. My gut feeling says that `connect()` expects `mapStateToProps` to precede `mapDispatchToProps`.

The working original looks like this:

    import React from &#39;react&#39;;
    import {connect} from &#39;react-redux&#39;;
    import addTodo from &#39;../actions&#39;;
    
    let AddTodo = ({dispatch}) =&gt; {
      let input;
      return (
          &lt;div&gt;
            &lt;form onSubmit={e =&gt; {
              e.preventDefault()
              if (!input.value.trim()) {
                return
              }
              dispatch(addTodo(input.value))
              input.value = &quot;&quot;
            }}&gt;
              &lt;input ref={node =&gt; {
                input = node
              }} /&gt;
              &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
      )
    }
    
    AddTodo = connect()(AddTodo)
    
    export default AddTodo


Complete repo can be found [here](https://github.com/IggHub/understanding-redux).

So my question is, is it possible to do mapDispatchToProps without mapStateToProps? Is what I am trying to do an acceptable practice - if not, why not?

Can I mapDispatchToProps without mapStateToProps in Redux?

I am trying to render a list of posts by mapping through an array. I&#39;ve done this many times before but for some reason

    renderPosts = async () =&gt; {
        try {
          let res = await axios.get(&#39;/posts&#39;);
          let posts = res.data;
          return  posts.map((post, i) =&gt; {
            return (
              &lt;li key={i} className=&quot;list-group-item&quot;&gt;{post.text}&lt;/li&gt;
            );
          });
        } catch (err) {
          console.log(err);
        }
      }

      render () {
        return (
          &lt;div&gt;
            &lt;ul className=&quot;list-group list-group-flush&quot;&gt;
              {this.renderPosts()}
            &lt;/ul&gt;
          &lt;/div&gt;
        );
      }

All I get is:

&gt; Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

I&#39;ve checked the data returned from renderPosts and it is an array with the correct values and no promises. What&#39;s going on here?


Objects are not valid as a React child (found: [object Promise])

    import React, { Component } from &#39;react&#39;
    import { Button, Input, Icon,Dropdown,Card} from &#39;semantic-ui-react&#39;
    import { Link } from &#39;react-router-dom&#39;
    import $ from &#39;jquery&#39;
    import styles from &#39;./Home.scss&#39;
    import Modal from &#39;./Modal.jsx&#39;
    import MakeChannelModal from &#39;./MakeChannelModal.jsx&#39;
    
    class Music extends React.Component {
        constructor(props) {
        super(props);
        this.state = {
    
          play: false,
          pause: true
    
        };
    
        this.url = &quot;http://streaming.tdiradio.com:8000/house.mp3&quot;;
        this.audio = new Audio(this.url);
    
      }
    
      play(){
        this.setState({
          play: true,
          pause: false
        });
        console.log(this.audio);
        this.audio.play();
      }
      
      pause(){
      this.setState({ play: false, pause: true });
        this.audio.pause();
      }
      
      render() {
        
      return (
        &lt;div&gt;
          &lt;button onClick={this.play}&gt;Play&lt;/button&gt;
          &lt;button onClick={this.pause}&gt;Pause&lt;/button&gt;
        &lt;/div&gt;
        );
      }
    }
    
    
    export default Music


This is the code that I am using to play the sound with url (this.url) in my react app. When I press the play button, it gives me an error 

&gt; Uncaught TypeError: Cannot read property &#39;setState&#39; of undefined


I am not sure why this is happpening since I don&#39;t see any undefined states. A;; states have been declared.

I am new to react so I might be missing something very important.

Please help!

Playing sound in React.js

I&#39;ve seen in some React/TypeScript implementations such as : 

```ref={ ref =&gt; this.container = ref! }```

What does the exclamation point means in ```ref!```?
Is that something specific in TypeScript, or a new standard JavaScript notation?

What does exclamation point after variable mean in JavaScript?

I just updated my browser to Chrome Version 63.0.3239.84 (Official Build) (64-bit).

I then proceeded to go on my website, where I have a input box with `autocomplete=&#39;off&#39;`, yet I still get the following:

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/PYASx.png

(You can see my inbuilt suggestion dropdown below it)

**This never used to be the case. Nothing else has changed!**

Why is this happening? Is this a bug in the new version of chrome? I have tried all other suggestions like `autocomplete=&quot;false&quot;` or applying autocomplete=off to the form too. I have even tried to apply these with jquery after the page has loaded but also no luck.

I have tested this on multiple machines with the newest version of chrome on different operating systems. The issue persists.

Disable autofill in Chrome 63

I am doing some research on how to split a huge single-page-monolith into a micro-frontend architecture.

# The idea:

 - the page consists of several components which would be running autonomously
 - each component is managed by one dev-team
 - each team can change, update and deploy their components without breaking components of other teams
 - each team chooses its own toolstack

# The reason

To efficiently develop large applications you need to have many people working on it. However the number of developers per app/team does not scale well. Parallel development of multiple independent apps by independent teams however can be scaled arbitrarily

With this in mind it is imperative that teams can choose their own toolstack and especially perform independent version-upgrades of third party-libraries (like angular, react, jquery). If this was not the case a framework-update would need to be compatible with every single component before you could deploy it to production.

# Does this work with Angular?

While independent version-upgrades are necessary, it would be reasonable to restrict the teams to a few supported frameworks (Angular, React, Vue, Polymer...) and for now I try to build a demo purely consisting of Angular-Apps.

However even though Angular 5 is supposedly a platform-framework which supports huge multi-module apps, it seems to be almost impossible to have several independent angular-apps running in the same browser window.

I managed to bootstrap several Angular-Apps (different versions, each hosted on its own server) on a single webapp by utilizing HTML-Imports. However there are several `global` dependencies which need to be shared between apps

 - zone.js can only be started once
 - routing requires url-changes
 - Browser-stuff like cookies, sessionstorage, etc...

There are several articles in the net on how to bootstrap multiple angular-modules but they all refer to multiple modules in the same core-app, which in turn means they all are running on the same framework-version and an update means you have to rebuild and deploy the whole monolith.

**Is there any solution other than &quot;`iframes`&quot; to get multiple Angular (5) Apps running on the same Page?**

Angular and Micro-Frontends

Given the current CSS grid example, how can I collapse the borders in order to avoid the double borders ?

This is such a simple thing to achieve using an Html table. How do I do it using `display: grid` ?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .wrapper {
      display: grid;
      grid-template-columns: 50px 50px 50px 50px;
    }

    .wrapper &gt; div {
      padding: 15px;
      text-align: center;
      border: 1px solid black;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;2&lt;/div&gt;
      &lt;div&gt;3&lt;/div&gt;
      &lt;div&gt;4&lt;/div&gt;
      &lt;div&gt;5&lt;/div&gt;
      &lt;div&gt;6&lt;/div&gt;
      &lt;div&gt;7&lt;/div&gt;
      &lt;div&gt;8&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Preventing double borders in CSS Grid

I&#39;m trying to retain the first 2 child elements on the same row while the third element is in its own below at full width, all while using flex.

I&#39;m particularly interested in using the `flex-grow` and `flex-shrink` properties on the first 2 elements (which is one of my reasons for not using percentages) however the third element really must be full width and below the first two.

The `label` element is added programmatically after the `text` element when there&#39;s an error and I can&#39;t change the code.

How do I force the label element to span a 100% width below the other two elements which are positioned using flex?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .parent {
      display: flex;
      align-items: center;
      width: 100%;
      background-color: #ececec;
    }

    .parent * {
      width: 100%;
    }

    .parent #text {
      min-width: 75px;
      flex-shrink: 2.25;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;parent&quot;&gt;
      &lt;input type=&quot;range&quot; id=&quot;range&quot;&gt;
      &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt;
      &lt;label class=&quot;error&quot;&gt;Error message&lt;/label&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Force flex item to span full row width

In a React _functional component_, which is the better approach to set default props, using `Component.defaultProps`, or using the _default parameters_ on the function definition, examples:

Default props:

    const Component = ({ prop1, prop2 }) =&gt; (
      &lt;div&gt;&lt;/div&gt;
    )

    Component.defaultProps = {
      prop1: false,
      prop2: &#39;My Prop&#39;,
    }

Default parameters:

    const Component = ({ prop1 = false, prop2 = &#39;My Prop&#39; }) =&gt; (
      &lt;div&gt;&lt;/div&gt;
    )    

React functional component default props vs default parameters

There are already a lot of [cool features][1] in ES6/ES7 for defining Javascript objects. However, the following pattern is common in Javascript:

&lt;!-- language: lang-js --&gt;

    const obj = { 
      requiredKey1: ..., 
      requiredKey2: ... 
    };
    
    if (someCondition) { 
      obj.optionalKey1 = ...;
    }

Is there a way to define the object all at once with both optional and required keys?

  [1]: https://devhints.io/es6

Succinct/concise syntax for &#39;optional&#39; object keys in ES6/ES7?

In **Chrome 61**, support for modules in JavaScript was added. Right now I am running Chrome 63.

I am trying to use `import`/`export` syntax in Chrome extension content script to use modules.

In **`manifest.json`**:

    &quot;content_scripts&quot;: [
        {
            &quot;js&quot;: [
                &quot;content.js&quot;
            ],
        }
    ]

In **`my-script.js`** (same directory as **`content.js`**):

    &#39;use strict&#39;;
    
    const injectFunction = () =&gt; window.alert(&#39;hello world&#39;);
    
    export default injectFunction;

In **`content.js`**:

    &#39;use strict&#39;;
    
    import injectFunction from &#39;./my-script.js&#39;;
    injectFunction();

I receive this error: **`Uncaught SyntaxError: Unexpected identifier`**

If I change the import syntax to `import {injectFunction} from &#39;./my-script.js&#39;;` I get this error: **`Uncaught SyntaxError: Unexpected token {`**

Is there some issue with using this syntax in **`content.js`** in Chrome extension (since in HTML you have to use `&lt;script type=&quot;module&quot; src=&quot;script.js&quot;&gt;` syntax), or am I doing something wrong? It seems strange that Google would ignore support for extensions.

How to import ES6 modules in content script for Chrome Extension

&gt; **Moderator note:** Please resist the urge to edit the code or remove this notice. The pattern of whitespace may be part of the question and therefore should not be tampered with unnecessarily. If you are in the &quot;whitespace is insignificant&quot; camp, you should be able to accept the code as is.

Is it ever possible that `(a== 1 &amp;&amp; a ==2 &amp;&amp; a==3)` could evaluate to `true` in JavaScript?

This is an interview question asked by a major tech company. It happened two weeks back, but I&#39;m still trying to find the answer. I know we never write such code in our day-to-day job, but I&#39;m curious.

Can (a== 1 &amp;&amp; a ==2 &amp;&amp; a==3) ever evaluate to true?

ES6 modules allows us to create a single point of entry like so:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    // main.js

    import foo from &#39;foo&#39;;

    foo()

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;scripts/main.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;

&lt;!-- end snippet --&gt;


**foo.js** will be stored in the browser cache. This is desirable until I push a new version of **foo.js** to production. 

It is common practice to add a query string param with a unique id to force the browser to fetch a new version of a js file (**foo.js?cb=1234**)

How can this be achieved using the es6 module pattern?

How do I cache bust imported modules in es6?

As far as I understand it, if I create an ES6 module, I can only import it from code that is itself a module. This means non-module code, i.e. inline Javascript, or the Chrome dev tools console can never access code that is in a module.

Is that true? Is there any way around this because it seems like a fairly extreme limitation.

How to use ES6 modules from dev tools console

In a JavaScript ES6-module, there may be many, small, easy-to-test functions that should be tested, but shouldn&#39;t be exported. How do I test functions in a module without exporting them? (without using [Rewire][1]).

  [1]: https://github.com/jhnns/rewire#limitations





How can I unit test non-exported functions?

From https://2ality.com/2019/04/nodejs-esm-impl.html Node 12 should support es6 modules; however, I just keep getting the error:


Question: How do I make a MVP of using es6 modules in node 12?



**package.json**
```
{
  &quot;name&quot;: &quot;dynamic-es6-mod&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;src/index.mjs&quot;,
  &quot;scripts&quot;: {
    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,
    &quot;start&quot;: &quot;node src/index.mjs&quot;
  },
  &quot;keywords&quot;: [],
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;dependencies&quot;: {
    &quot;globby&quot;: &quot;^10.0.1&quot;
  }
}
```

```
$ node -v
$ 12.6.0
$ npm run start


internal/modules/cjs/loader.js:821
  throw new ERR_REQUIRE_ESM(filename);
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/dev/dynamic-es6-mod/src/index.mjs
    at Object.Module._extensions..mjs (internal/modules/cjs/loader.js:821:9)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:839:10)
    at internal/main/run_main_module.js:17:11
```


Error [ERR_REQUIRE_ESM]: How to use es6 modules in node 12?

We&#39;re trying to use the new ways of exporting and importing modules for ES6 with Node.js. It&#39;s important for us to get the version number from the `package.json` file. The following code should do that:
```js
import {name, version} from &#39;../../package.json&#39;
```
However, on execution the following error is thrown:                       
    
    TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension &quot;.json&quot; for T:\ICP\package.json imported from T:\ICP\src\controllers\about.js

Is there something we&#39;re missing?  
Is the extension `.json` not supported?  
Is there another way to retrieve this information using Node.js 13+?

Content Type	Original Author	Original Content on Stackoverflow
Question	ZeroThe2nd	View Question on Stackoverflow
Solution 1 - Javascript	ZeroThe2nd	View Answer on Stackoverflow
Solution 2 - Javascript	Marcel Krause	View Answer on Stackoverflow
Solution 3 - Javascript	Muhammed Moussa	View Answer on Stackoverflow

ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Canonical way to define common constants in Vue.js?

Add a class to the HTML <body> tag with React?

Attributions