build error on Ubuntu

Description

Followed the wiki to configure and build brave from scratch and got an error at npm run build step

Steps to Reproduce

1. clone the repo
2. install all prerequisites
3. run npm install
4. run npm run init
5. run npm run build

Actual result:

Build fails with this error:

ERROR in [at-loader] ./node_modules/brave-ui/src/components/buttonsIndicators/button/index.tsx:65:8 
    TS2322: Type '{ children: (Element | null)[]; text: string; size?: "small" | "large" | "medium" | "call-to-action" | undefined; type?: "default" | "accent" | "warn" | "subtle" | undefined; brand?: "brave" | "rewards" | undefined; ... 6 more ...; disabled: boolean | undefined; }' is not assignable to type 'Readonly<ThemedOuterStyledProps<Props & ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement>, IThemeProps>>'.
  Types of property 'type' are incompatible.
    Type '"default" | "accent" | "warn" | "subtle" | undefined' is not assignable to type 'undefined'.
      Type '"default"' is not assignable to type 'undefined'.

npm ERR! Linux 4.18.0-20-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "web-ui" "--" "--mode=development" "--output-public-path=/out/" "brave_extension=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx" "brave_extension_background=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/background.ts" "content=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/content.ts"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! brave-core@0.68.5 web-ui: `webpack --config components/webpack/webpack.config.js --progress --colors "--mode=development" "--output-public-path=/out/" "brave_extension=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx" "brave_extension_background=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/background.ts" "content=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/content.ts"`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the brave-core@0.68.5 web-ui script 'webpack --config components/webpack/webpack.config.js --progress --colors "--mode=development" "--output-public-path=/out/" "brave_extension=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx" "brave_extension_background=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/background.ts" "content=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/content.ts"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the brave-core package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --config components/webpack/webpack.config.js --progress --colors "--mode=development" "--output-public-path=/out/" "brave_extension=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx" "brave_extension_background=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/background.ts" "content=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/content.ts"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs brave-core
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls brave-core
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /data/maiar/brave-browser/src/brave/npm-debug.log

Traceback (most recent call last):
  File "../../brave/script/transpile-web-ui.py", line 115, in <module>
    sys.exit(main())
  File "../../brave/script/transpile-web-ui.py", line 34, in main
    args.public_asset_path)
  File "../../brave/script/transpile-web-ui.py", line 95, in transpile_web_uis
    execute_stdout(args, env)
  File "/data/maiar/brave-browser/src/brave/script/lib/util.py", line 187, in execute_stdout
    execute(argv, env)
  File "/data/maiar/brave-browser/src/brave/script/lib/util.py", line 175, in execute
    raise e
subprocess.CalledProcessError: Command '['npm', 'run', 'web-ui', '--', '--mode=development', '--output-public-path=/out/', 'brave_extension=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/braveShieldsPanel.tsx', 'brave_extension_background=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/background.ts', 'content=/data/maiar/brave-browser/src/brave/components/brave_extension/extension/brave_extension/content.ts']' returned non-zero exit status 1
ninja: build stopped: subcommand failed.
null
null

npm ERR! Linux 4.18.0-20-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "build" "--debug_build=true"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! brave@0.68.5 build: `node ./scripts/commands.js build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the brave@0.68.5 build script 'node ./scripts/commands.js build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the brave package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./scripts/commands.js build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs brave
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls brave
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /data/maiar/brave-browser/npm-debug.log

Expected result:

Build succeedes

Reproduces how often:

Always

Brave version (brave://version info)

trunk version 97a7b8af4bf3a73093bfb2beb82a4884f1f2441a

Version/Channel Information:

Other Additional Information:

bog@bog-VirtualBox:/data/brave-browser$ npm --version
3.5.2
bog@bog-VirtualBox:/data/brave-browser$ node --version
v8.10.0

Miscellaneous Information:

[fmarier]

FYI, I am building Brave on Ubuntu 18.04 and it works fine for me. I’m using node v12.6.0 though from:

deb https://deb.nodesource.com/node_12.x bionic main

and I also get the following after npm install:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

[bsclifton]

Looks like you’re running Node 8 @bog2k3 @JoshuaCarter? You need to be using v10 (LTS). Can you upgrade to that and give it a go?

That should also have a newer version of npm, but just in case I would try updating npm also. Let us know if that helps! 😄