Editor-ui building

Questions
1

Hello!

I’m not able to compile the editor-ui package, I don’t know what’s going on.

Can anybody help me?

$ npm run build

> [email protected] build C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\packages\editor-ui
> vue-cli-service build


\  Building for production...Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
\  Building for production...

 ERROR  Failed to compile with 2 errors                                                                                                                  2:17:48 PM

 error  in ./src/components/ExpressionEdit.vue?vue&type=style&index=0&id=d5db668e&scoped=true&lang=scss&

Module build failed (from C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/sass-loader/dist/cjs.js):
SassError: expected selector.
    ╷
108 │ /deep/ .expression-dialog{
    │ ^
    ╵
  C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\packages\editor-ui\src\components\ExpressionEdit.vue 108:1  root stylesheet
    at runLoaders (C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\node_modules\webpack\lib\NormalModule.js:316:20)
    at C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at render (C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\node_modules\sass-loader\dist\index.js:73:7)
    at Function.call$2 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:56230:16)
    at _render_closure1.call$2 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:34691:12)
    at _RootZone.runBinary$3$3 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:20227:18)
    at _RootZone.runBinary$3 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:20231:19)
    at _FutureListener.handleError$1 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:18696:19)
    at _Future__propagateToListeners_handleError.call$0 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:18984:40)
    at Object._Future__propagateToListeners (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:3500:88)
    at _Future._completeError$2 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:18820:9)
    at _AsyncAwaitCompleter.completeError$2 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:18219:12)
    at Object._asyncRethrow (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:3256:17)
    at C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:10615:20

 @ ./src/components/ExpressionEdit.vue?vue&type=style&index=0&id=d5db668e&scoped=true&lang=scss& 1:0-578 1:594-597 1:599-1174 1:599-1174
 @ ./src/components/ExpressionEdit.vue
 @ C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--14-0!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n
8n/node_modules/thread-loader/dist/cjs.js!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/babel-loader/lib!C:/Projetos/web/cubo/npm-packages/
@guilhermeagirardi/n8n/node_modules/ts-loader??ref--14-3!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--0-0!C
:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/vue-loader/lib??vue-loader-options!./src/components/ParameterInput.vue?vue&type=script&lang=ts
&
 @ ./src/components/ParameterInput.vue?vue&type=script&lang=ts&
 @ ./src/components/ParameterInput.vue
 @ C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--14-0!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n
8n/node_modules/thread-loader/dist/cjs.js!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/babel-loader/lib!C:/Projetos/web/cubo/npm-packages/
@guilhermeagirardi/n8n/node_modules/ts-loader??ref--14-3!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--0-0!C
:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/vue-loader/lib??vue-loader-options!./src/components/CredentialsInput.vue?vue&type=script&lang=
ts&
 @ ./src/components/CredentialsInput.vue?vue&type=script&lang=ts&
 @ ./src/components/CredentialsInput.vue
 @ C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--14-0!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n
8n/node_modules/thread-loader/dist/cjs.js!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/babel-loader/lib!C:/Projetos/web/cubo/npm-packages/
@guilhermeagirardi/n8n/node_modules/ts-loader??ref--14-3!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--0-0!C
:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/vue-loader/lib??vue-loader-options!./src/components/CredentialsEdit.vue?vue&type=script&lang=t
s&
 @ ./src/components/CredentialsEdit.vue?vue&type=script&lang=ts&
 @ ./src/components/CredentialsEdit.vue
 @ C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--14-0!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n
8n/node_modules/thread-loader/dist/cjs.js!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/babel-loader/lib!C:/Projetos/web/cubo/npm-packages/
@guilhermeagirardi/n8n/node_modules/ts-loader??ref--14-3!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--0-0!C
:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/vue-loader/lib??vue-loader-options!./src/components/MainSidebar.vue?vue&type=script&lang=ts&
 @ ./src/components/MainSidebar.vue?vue&type=script&lang=ts&
 @ ./src/components/MainSidebar.vue
 @ ./src/router.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

 error  in ./src/components/MultipleParameter.vue?vue&type=style&index=0&id=8576aa2e&scoped=true&lang=scss&

Module build failed (from C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/sass-loader/dist/cjs.js):
SassError: expected selector.
    ╷
144 │ /deep/ .duplicate-parameter-item{
    │ ^
    ╵
  C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\packages\editor-ui\src\components\MultipleParameter.vue 144:1  root stylesheet
    at runLoaders (C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\node_modules\webpack\lib\NormalModule.js:316:20)
    at C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at render (C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\node_modules\sass-loader\dist\index.js:73:7)
    at Function.call$2 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:56230:16)
    at _render_closure1.call$2 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:34691:12)
    at _RootZone.runBinary$3$3 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:20227:18)
    at _RootZone.runBinary$3 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:20231:19)
    at _FutureListener.handleError$1 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:18696:19)
    at _Future__propagateToListeners_handleError.call$0 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:18984:40)
    at Object._Future__propagateToListeners (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:3500:88)
    at _Future._completeError$2 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:18820:9)
    at _AsyncAwaitCompleter.completeError$2 (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:18219:12)
    at Object._asyncRethrow (C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:3256:17)
    at C:\Projetos\web\cubo\node_modules\sass\sass.dart.js:10615:20

 @ ./src/components/MultipleParameter.vue?vue&type=style&index=0&id=8576aa2e&scoped=true&lang=scss& 1:0-581 1:597-600 1:602-1180 1:602-1180
 @ ./src/components/MultipleParameter.vue
 @ C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--14-0!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n
8n/node_modules/thread-loader/dist/cjs.js!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/babel-loader/lib!C:/Projetos/web/cubo/npm-packages/
@guilhermeagirardi/n8n/node_modules/ts-loader??ref--14-3!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--0-0!C
:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/vue-loader/lib??vue-loader-options!./src/components/ParameterInputList.vue?vue&type=script&lan
g=ts&
 @ ./src/components/ParameterInputList.vue?vue&type=script&lang=ts&
 @ ./src/components/ParameterInputList.vue
 @ C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--14-0!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n
8n/node_modules/thread-loader/dist/cjs.js!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/babel-loader/lib!C:/Projetos/web/cubo/npm-packages/
@guilhermeagirardi/n8n/node_modules/ts-loader??ref--14-3!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--0-0!C
:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/vue-loader/lib??vue-loader-options!./src/components/NodeSettings.vue?vue&type=script&lang=ts&
 @ ./src/components/NodeSettings.vue?vue&type=script&lang=ts&
 @ ./src/components/NodeSettings.vue
 @ C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--14-0!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n
8n/node_modules/thread-loader/dist/cjs.js!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/babel-loader/lib!C:/Projetos/web/cubo/npm-packages/
@guilhermeagirardi/n8n/node_modules/ts-loader??ref--14-3!C:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/cache-loader/dist/cjs.js??ref--0-0!C
:/Projetos/web/cubo/npm-packages/@guilhermeagirardi/n8n/node_modules/vue-loader/lib??vue-loader-options!./src/views/NodeView.vue?vue&type=script&lang=ts&
 @ ./src/views/NodeView.vue?vue&type=script&lang=ts&
 @ ./src/views/NodeView.vue
 @ ./src/router.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Error parsing bundle asset "C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\packages\editor-ui\dist\js\app.e12de427.js": no such file
Error parsing bundle asset "C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\packages\editor-ui\dist\js\chunk-vendors.0ff1d7b6.js": no such file

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to C:\Projetos\web\cubo\npm-packages\@guilhermeagirardi\n8n\packages\editor-ui\dist\report.html
 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\guilh\AppData\Roaming\npm-cache\_logs\2020-02-06T16_17_48_810Z-debug.log
2

Sorry, I have sadly no idea. I tried to reproduce the error but I am unable to. Extra blew away all node_modules folders and package-lock.json files and install everything new to make sure that not an update of some package causes this error. However, even after doing that, it did still build totally fine.

I would probably just to be sure also try to reinstall everything. Apart from that do not know if it can be Windows-related as I am using Linux (Ubuntu). But would be surprised as the issue seems to be that it does not like the /deep/.

3

I updated Node.js to the latest version and tried again, it didn’t work.
I deleted all the node_modules folders and package-lock.json files and ran “npm run bootstrap” again, it didn’t work.
I did some other tests, and also nothing!

So I created a docker container with ubuntu and tested it, and it worked. It really looks like something related to Windows.

The problem now is that I will work in an IDE with Windows and I need the linux container just to be able to compile.

Tell me someone has a solution for this :tired_face:

4

I solved the problem!!

I read some articles on the internet talking about the /deep/ selector, that it is depreciated and that some preprocessors are unable to process it.

So I replaced the occurrences of /deep/ in the:
packages/editor-ui/src/components/ExpressionEdit.vue and
packages/editor-ui/src/components/MultipleParameter.vue
files with ::v-deep, and it worked!

I just can’t understand why it only happens in my Windows environment…

1 Like
5

Ah yes, I did also see that when I looked for a solution to the problem. However, did not expect at all that it would be different for Linux and Windows and so cause that issue for you. Good to know. Should then probably change that.
Can you please create a Pull-Request for that so that other Windows users do not run into the same issue.

6

Ok, tomorrow I do. :love_you_gesture:

1 Like