Function that exports emojis throws TypeError

luis-pato commented 3 years ago

I have used the open-wc project generator to create a project using lit (with npm init @open-wc). Everything was woking great, until i created a function that returns a random emoji from an emojis array. When i had this function on the component file, it worked well. I moved this function to an extra file, where i export it, and now when i run npm run start i get a TypeError: A.charCodeAt is not a function Error.

Expected behavior

I expected moving the function to an extra file wouldn't break starting up the server

Actual Behavior

After i moved the function to its own file and import it on my component i get a TypeError: A.charCodeAt is not a function Error:

Additional context

this is the function i have on the getRandomEmoji.jsfile:

export function getRandomEmoji() {
  const emojis = ['🚀', '📦', '🧪'];
  return emojis[Math.floor(Math.random() * emojis.length)];
}

i import it on my component like this:

import { getRandomEmoji } from '../../helpers/getRandomEmoji.js';

and then i use it like this:

<i class="stage__empty-emoji">${getRandomEmoji()}</i>

Packages and dependencies

"devDependencies": {
    "@open-wc/building-rollup": "^1.10.0",
    "@open-wc/eslint-config": "^4.3.0",
    "@open-wc/testing": "^2.5.33",
    "@web/dev-server": "^0.1.18",
    "@web/test-runner": "^0.12.20",
    "deepmerge": "^4.2.2",
    "eslint": "^7.30.0",
    "eslint-config-prettier": "^7.2.0",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.4",
    "prettier": "^2.2.1",
    "rimraf": "^3.0.2",
    "rollup": "^2.53.0",
    "rollup-plugin-copy": "^3.4.0"
  }

and

  "dependencies": {
    "lit": "*"
  }

Things i have tried

If i change the emojis array into a strings array (for instance const emojis = ['a', 'b', 'b'];) then it works. So i wonder if this is some kind of encoding problem, and if i can change something on the server config to fix the problem...?!

The open-wc project creator used an older lexer version (0.4.1). I have updated it on my local project to version 0.7.1 but that didn't fix the problem

guybedford commented 3 years ago

@luis-pato thanks for the detailed issue report here, unfortunately I'm still not able to replicate the issue locally.

I'm trying a test with the following code:

const { parse } = require('es-module-lexer');
parse(`
  export function getRandomEmoji() {
    const emojis = ['🚀', '📦', '🧪'];
    return emojis[Math.floor(Math.random() * emojis.length)];
  }
`).then(([imports, exports]) => {
  console.log(imports);
  console.log(exports)
  console.log('Parse Ok');
}, (err) => {
  console.error(err);
  console.error('Parse Error');
});

The line number of the error stack wasn't for the 0.7.1 version either so I wasn't able to verify where the error was being thrown from that stack.

If you have more information or a replication and I can look into this further.

luis-pato commented 3 years ago

oh, i'm sorry, that screenshot was from before i added the 0.7.1 version to the project. Here is a new screenshot

i'm not sure how i can create a working example of the problem, but i could add you as contributor to the project where i have the problem, so you could try it on your own.

It may be that the problem comes from somewhere else along the stack, but i am not experienced enough to determine that.

guybedford commented 3 years ago

@luis-pato it sounds to me like the issue is that dev-server-core is not passing a string to es-module-lexer. I'd suggest following it up further there.

luis-pato commented 3 years ago

thanks, i'll try that

guybedford commented 2 years ago

This is definitely an encoding issue not a bug, but please post back if I'm wrong.

Also add <meta charset=utf-8> to your HTML!

guybedford / es-module-lexer