some wrong

[fanly]

[saleh-old]

+1

[phoet]

since screenshots are not searchable, here is my error-message with webpack, i think it's basically the same:

ERROR in ./~/vue-bulma-emoji/src/index.js
Module parse failed: /Users/peterschroder/42ls/penseo-chat/node_modules/vue-bulma-emoji/src/index.js Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export filter from './filter'
| 
| export EmojiIcon from  './EmojiIcon'

[phoet]

@p0wl would you mind taking a look into this? i'm not familiar enough with JS and how it uses exports in various ways... what kind of export is used here?

can i configure webpack to load it correctly? i tried loading it via babel, but that did not help :D

[p0wl]

This syntax (export something from 'module') is currently a stage-1 proposal: https://github.com/leebyron/ecmascript-export-default-from. If you use babel, use this plugin: http://babeljs.io/docs/plugins/transform-export-extensions/

If @fundon is ok with it, I could propose a change which uses a stage-0 syntax for exporting:

export filter from './filter'
export EmojiIcon from  './EmojiIcon'
export default from 'emojione'

should be

import filter from './filter'
import EmojiIcon from  './EmojiIcon'
import Emojione from 'emojione'

export { EmojiIcon, filter}
export default Emojione

[phoet]

thx for the hint, much appreciated! this is the changeset that i needed to apply to get it working with webpack:

diff --git a/.babelrc b/.babelrc
index 13f0e47..20d4140 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,7 +3,7 @@
     ["env", { "modules": false }],
     "stage-2"
   ],
-  "plugins": ["transform-runtime"],
+  "plugins": ["transform-runtime", "transform-export-extensions"],
   "comments": false,
   "env": {
     "test": {
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index e77f5ae..23b3cdf 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -43,7 +43,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test')]
+        include: [resolve('node_modules/vue-bulma-emoji'), resolve('src'), resolve('test')]
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
diff --git a/package.json b/package.json
index a533f72..7351816 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "mustache": "^2.3.0",
     "numeral": "^2.0.6",
     "vue": "^2.2.2",
+    "vue-bulma-emoji": "^0.0.2",
     "vue-clickaway": "^2.1.0",
     "vue-range-slider": "^0.2.4",
     "vue-resource": "^1.3.1",
@@ -36,6 +37,7 @@
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
     "babel-plugin-istanbul": "^3.1.2",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-env": "^1.2.1",
diff --git a/src/components/ChatActions.vue b/src/components/ChatActions.vue
index 6f55255..429f953 100644
--- a/src/components/ChatActions.vue
+++ b/src/components/ChatActions.vue
@@ -34,11 +34,22 @@
         <span :class="['penseocon',  {'penseocon-back2-chat-text' : smartOptionsToggle, 'penseocon-chat-options' : !smartOptionsToggle}]"></span>
       </a>
     </div>
+    <div>
+      <emoji-icon class="e1a-smile"></emoji-icon>
+    </div>
   </aside>
 </template>

 <script>
+import Vue from 'vue';
+import { EmojiIcon, filter } from 'vue-bulma-emoji';
+
+Vue.use(filter);
+
 export default {
+  components: {
+    EmojiIcon,
+  },
   data() {
     return {
       focussed: false,