Element: [Bug Report] all component are working well except select

[fingerpich]

Element UI version

1.4.3

OS/Browsers version

ubuntu / chrome 58.0.3029.96

Vue version

2.3.3

Reproduction Link

I don't know where is the problem to reproduce it

Steps to reproduce

import ElOption from '../../../../node_modules/element-ui/packages/select/src/option'
import ElButton from '../../../../node_modules/element-ui/packages/button/src/button'

is working well but when I add the following line

import ElSelect from '../../../../node_modules/element-ui/packages/select/src/select'

it throws an error

I have removed node_modules folder and install it again but it wouldn't help

What is Expected?

make it work

What is actually happening?

 error  in ./~/element-ui/packages/scrollbar/src/main.js

Module parse failed: /home/ubuntu/Downloads/WebStorm-171.4249.40/projects/halema/client/adminsApp/node_modules/element-ui/packages/scrollbar/src/main.js Unexpected token (65:6)
You may need an appropriate loader to handle this file type.
|     }, this.$slots.default);
|     const wrap = (
|       <div
|         ref="wrap"
|         style={ style }

 @ ./~/element-ui/packages/scrollbar/index.js 1:0-35
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/element-ui/packages/select/src/select.vue
 @ ./~/element-ui/packages/select/src/select.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/user/tests/testsList.vue
 @ ./src/components/user/tests/testsList.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/user/tests/tests.vue
 @ ./src/components/user/tests/tests.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

[Leopoldthecoder]

You should import our built file instead of source file. http://element.eleme.io/#/en-US/component/quickstart

[fingerpich]

Its not because of imports

When I use a <ui-select> in a /folder its working well
but when I use it in /folder/subfolder/subfolder/someComponent.vue it shows me this error.

I will add a plunker demo soon.

[Aetherus]

I followed the quickstart guide and imported ElementUI as a whole,

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element);

however, I still get this error. From the error log, it seems that the remote variation of el-select uses scrollbar, and that is written in JSX. Maybe it's just el-select imports scrollbar from the wrong place. The local variation of el-select does not use scrollbar so it's OK.

Relevant code in my component:

<el-select v-model="filters.supplierId"
                 placeholder="商家"
                 remote
                 filterable
                 reserve-keyword
                 :remote-method="fetchSupplier">
      <el-option
            v-for="supplier in suppliers"
            :key="supplier.id"
            :label="supplier.name"
            :value="supplier.id">
      </el-option>
</el-select>

error log:

 ERROR  Failed to compile with 1 errors                                                                                                                         15:35:37

 error  in ./node_modules/element-ui/packages/scrollbar/src/main.js

Module parse failed: Unexpected token (65:6)
You may need an appropriate loader to handle this file type.
|     }, this.$slots.default);
|     const wrap = (
|       <div
|         ref="wrap"
|         style={ style }

 @ ./node_modules/element-ui/packages/scrollbar/index.js 1:0-35
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/element-ui/packages/select/src/select.vue
 @ ./node_modules/element-ui/packages/select/src/select.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/products/Index.vue
 @ ./src/pages/products/Index.vue
 @ ./src/pages/products/routes.js
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8181 webpack/hot/dev-server ./src/main.js