[Bug Report] Dev build from source fails

Tofandel commented 4 years ago

Element UI version

2.13.0

OS/Browsers version

Linux (Kubuntu 19)

Vue version

2.6.10

Reproduction Link

https://github.com/ElemeFE/element.git#dev

Steps to reproduce

Simply clone the dev branch

And run npm install && npm run dist

What is Expected?

The build process to run successfully

What is actually happening?

The build process fails at 89% with a ton of errors like the following

ERROR in ./packages/tooltip/src/main.js 81:8
Module parse failed: Unexpected token (81:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     if (this.popperVM) {
|       this.popperVM.node = (
>         <transition
|           name={ this.transition }
|           onAfterLeave={ this.doDestroy }>
 @ ./packages/tooltip/index.js 1:0-33 4:0-7 5:16-23 5:30-37 8:15-22
 @ ./src/index.js
 @ multi ./src/index.js

It seems like the jsx loader is not correctly configured

Linkontoask commented 4 years ago

I suspect that you made some errors during the installation, you can try to reinstall the dependencies. jsx is mainly compiled bytransform-vue-jsx in babel

Tofandel commented 4 years ago

Already tried deleting node_modules and reinstalling, same issue, tried with a clean clone, same issue

Linkontoask commented 4 years ago

npm i yarn -g

You can try to reinstall dependencies using yarn

Tofandel commented 4 years ago

Just tried yarn install && yarn run dist on a clean clone Getting the same issue

I got a warning during install warning " > karma-webpack@3.0.5" has incorrect peer dependency "webpack@^2.0.0 || ^3.0.0".

Don't know if it's related

PS: I ruled out a possible global package conflict by uninstalling all my global packages

Tofandel commented 4 years ago

Webpack profiling output for one of the errors is:

{
          "id": 36,
          "identifier": "./element-ui/node_modules/vue-loader/lib/index.js??vue-loader-options!./element-ui/packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
          "name": "./node_modules/vue-loader/lib??vue-loader-options!./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
          "index": 51,
          "index2": 46,
          "size": 354,
          "cacheable": true,
          "built": true,
          "optional": false,
          "prefetched": false,
          "chunks": [
            0
          ],
          "issuer": "./element-ui/node_modules/vue-loader/lib/loaders/pitcher.js??ref--4!./element-ui/node_modules/vue-loader/lib/index.js??vue-loader-options!./element-ui/packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
          "issuerId": 35,
          "issuerName": "./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
          "issuerPath": [
            {
              "id": 98,
              "identifier": "multi ./src/index.js",
              "name": "multi ./src/index.js",
              "profile": {
                "factory": 1,
                "building": 4
              }
            },
            {
              "id": null,
              "identifier": "./element-ui/src/index.js",
              "name": "./src/index.js",
              "profile": {
                "factory": 44,
                "building": 30
              }
            },
            {
              "id": null,
              "identifier": "./element-ui/packages/dropdown/index.js",
              "name": "./packages/dropdown/index.js",
              "profile": {
                "factory": 194,
                "building": 95,
                "dependencies": 0
              }
            },
            {
              "id": 19,
              "identifier": "./element-ui/node_modules/vue-loader/lib/index.js??vue-loader-options!./element-ui/packages/dropdown/src/dropdown.vue",
              "name": "./packages/dropdown/src/dropdown.vue",
              "profile": {
                "factory": 378,
                "building": 187,
                "dependencies": 2312
              }
            },
            {
              "id": 35,
              "identifier": "./element-ui/node_modules/vue-loader/lib/loaders/pitcher.js??ref--4!./element-ui/node_modules/vue-loader/lib/index.js??vue-loader-options!./element-ui/packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "name": "./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "profile": {
                "factory": 2312,
                "building": 37
              }
            }
          ],
          "profile": {
            "factory": 35,
            "building": 40
          },
          "failed": true,
          "errors": 1,
          "warnings": 0,
          "assets": [],
          "reasons": [
            {
              "moduleId": 35,
              "moduleIdentifier": "./element-ui/node_modules/vue-loader/lib/loaders/pitcher.js??ref--4!./element-ui/node_modules/vue-loader/lib/index.js??vue-loader-options!./element-ui/packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "module": "./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "moduleName": "./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "type": "harmony side effect evaluation",
              "userRequest": "-!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./dropdown.vue?vue&type=script&lang=js&",
              "loc": "1:0-126"
            },
            {
              "moduleId": 35,
              "moduleIdentifier": "./element-ui/node_modules/vue-loader/lib/loaders/pitcher.js??ref--4!./element-ui/node_modules/vue-loader/lib/index.js??vue-loader-options!./element-ui/packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "module": "./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "moduleName": "./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "type": "harmony import specifier",
              "userRequest": "-!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./dropdown.vue?vue&type=script&lang=js&",
              "loc": "1:142-145"
            },
            {
              "moduleId": 35,
              "moduleIdentifier": "./element-ui/node_modules/vue-loader/lib/loaders/pitcher.js??ref--4!./element-ui/node_modules/vue-loader/lib/index.js??vue-loader-options!./element-ui/packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "module": "./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "moduleName": "./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "type": "harmony side effect evaluation",
              "userRequest": "-!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./dropdown.vue?vue&type=script&lang=js&",
              "loc": "1:147-270"
            },
            {
              "moduleId": 35,
              "moduleIdentifier": "./element-ui/node_modules/vue-loader/lib/loaders/pitcher.js??ref--4!./element-ui/node_modules/vue-loader/lib/index.js??vue-loader-options!./element-ui/packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "module": "./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "moduleName": "./packages/dropdown/src/dropdown.vue?vue&type=script&lang=js&",
              "type": "harmony export imported specifier",
              "userRequest": "-!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./dropdown.vue?vue&type=script&lang=js&",
              "loc": "1:147-270"
            }
          ],
          "usedExports": [
            "default"
          ],
          "providedExports": null,
          "optimizationBailout": [
            "ModuleConcatenation bailout: Module is not an ECMAScript module"
          ],
          "depth": 5,
          "source": "throw new Error(\"Module parse failed: Unexpected token (262:9)\\nYou may need an appropriate loader to handle this file type.\\n|     let triggerElm = !splitButton\\n|       ? this.$slots.default\\n>       : (<el-button-group>\\n|         <el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick}>\\n|           {this.$slots.default}\");"
},

Command used => webpack --config build/webpack.common.js --profile --json

The other webpack command runs fine (webpack --config build/webpack.component.js)

Hopefully that helps because I have no clue about what the problem is at this point

And being unable to compile from source is quite frustrating because I can't test changes and pull requests

Linkontoask commented 4 years ago

Can you post the current branch names, .babelrc, node and npm versions? I can restore your situation on my machine, because according to the information you told, I can't analyze the problem.

Tofandel commented 4 years ago

Branch is dev (It was in the url) .babelrc is exactly the same Npm: 6.13.1 Node: v10.15.2 Webpack: 4.41.2

Linkontoask commented 4 years ago

Please provide a reproduction repo

	Link

邮箱：linkorgs@163.com |

Signature is customized by Netease Mail Master

On 12/06/2019 21:00, Adrien Foulon wrote:

Branch is dev (It was in the url) .babelrc is exactly the same Npm: 6.13.1 Node: v10.15.2 Webpack: 4.41.2

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

Tofandel commented 4 years ago

Well I said that I'm cloning the original repo on dev, I don't see what a reproduction repo being exactly the same will add

I can add the node_modules folder but it's gonna be pretty much the same since it seems being environment related

(maybe a path variable story like vue cli)

Linkontoask commented 4 years ago

Sorry, I responded directly in the mailbox, only to find that the reply was wrong. I will try to recover your problem to help you

	Link

邮箱：linkorgs@163.com |

Signature is customized by Netease Mail Master

On 12/06/2019 22:56, Adrien Foulon wrote:

Well I said that I'm cloning the original repo on dev, I don't see what a reproduction repo being exactly the same will add

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

Linkontoask commented 4 years ago

I use the same environment / command as you, but it doesn't happen to you, I don't think this is a problem with Element @Tofandel sorry I can't help you

Tofandel commented 4 years ago

I finally figured it out...

For some reason if the directory is cloned into another node_modules directory (eg: my_project/node_modules/element-ui/)

Then the build fails, if not then all works correctly, I'm guessing there is something wrong with how directory are handled on the jsx vue plugin

Tofandel commented 4 years ago

Having found the source of the bug and a solution for it I will reopen this until a PR fixes the config

Issue is in lib/config.js

exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date\.js/;

Because the regex doesn't care about the tree directory, if the project is under a node modules directory, everything will be excluded

Replacing it with exports.jsexclude = [path.resolve('./node_modules'), path.resolve('./utils', 'popper.js'), path.resolve('./utils', 'date.js')] Fixed the issue

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

ElemeFE / element