ES6 export array of objects

Question

Trying to export an array of objects in Javascript ES6:

settings.js

const elements = [
  {
    input: document.getElementById("name"),
    required: true,
    min: 1,
    max: 100,
    type: "alpha"
  },
  {
    input: document.getElementById("addr1"),
    required: true,
    min: 1,
    max: 100,
    type: "alphanumeric"
  }
];

export default elements;

validation.js

import elements from "./settings.js";

I always get the error:

Uncaught SyntaxError: Unexpected identifier

index.html

<!DOCTYPE html>

<div id="form">
    <form action="">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" placeholder="Your name..">
        <div class="error"></div>

        <label for="addr">Address 1</label>
        <input type="text" id="addr1" name="addr1" placeholder="Your first address..">
        <div class="error"></div>

        <label for="addr1">Address 2</label>
        <input type="text" id="addr2" name="addr2" placeholder="Your second address..">
        <div class="error"></div>

        <label for="city">City</label>
        <input type="text" id="city" name="city" placeholder="Your city..">
        <div class="error"></div>

        <label for="state">State</label>
        <select id="state" name="state">
            <option value="australia">Australia</option>
            <option value="usa">USA</option>
        </select>
        <div class="error"></div>

        <label for="zip">Zip Code</label>
        <input type="text" id="zip" name="zip" placeholder="Your zip code..">
        <div class="error"></div>

        <input type="button" id="confirm" value="Ok">
        <input type="button" id="cancel" value="Cancel">
    </form>
</div>

<script src="./validation.js"></script>
</body>

</html>

Cannot figure out the reason!

your import depends on the page element? I'm not sure you can guarantee that your page elements are loaded (and have the right context) to be able to do the `document.getElementById()` there. Do you get the problem if you change that to a literal string or a number? — Marc, Aug 29 '18 at 17:44
`import` is synchronous, so it won't work in a web browser unless you compile it to code that a browser can actually understand. It should work if you put your code in a [module](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) however. — Derek 朕會功夫, Aug 29 '18 at 17:44
How are you loading the JS file? Please include the full error with location information if possible. — loganfsmyth, Aug 29 '18 at 17:50
I don't see that error here https://stackblitz.com/edit/js-uvre2b?embed=1&file=index.js The values for `name` and `addr1` are not properly set though. — lealceldeiro, Aug 29 '18 at 17:52
How are you importing the file? Are you loading it via Webpack, or via ` — loganfsmyth, Aug 29 '18 at 17:58
I am not importing in html the file that export the module. Should I? I just import in html the main js file that import the exported module. — Stefano Maglione, Aug 29 '18 at 18:01
Please add full examples of how you are importing into your question. — loganfsmyth, Aug 29 '18 at 18:56

ES6 export array of objects

0 Answers0