Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nothing getting built to dist folder... #1654

Closed
jmw992 opened this issue Apr 18, 2022 · 12 comments
Closed

Nothing getting built to dist folder... #1654

jmw992 opened this issue Apr 18, 2022 · 12 comments

Comments

@jmw992
Copy link

jmw992 commented Apr 18, 2022

I am trying to make a custom styled chart, for example changing the font color and size of axis tick labels.

When I build the elastic-charts package I'm not seeing a dist folder get created despite the compiler output showing the dist folder type checking passing...

I ran

yarn
yarn install
yarn build
And got the following 
jacob@Jacobs-MacBook-Pro elastic-charts % yarn build
yarn run v1.22.18
$ lerna run --loglevel=silent --scope @elastic/charts build --stream --no-prefix
$ yarn build:ts && yarn build:css
$ yarn build:clean && yarn build:compile && yarn build:check
$ echo 'Cleaning dist...' && rm -rf ./dist
Cleaning dist...
$ echo 'Compiling...' && tsc -p ./tsconfig.json && tsc -p ./tsconfig.nocomments.json
Compiling...
$ echo 'Type checking dist...' && tsc -p ./tsconfig.check.json
Type checking dist...
$ yarn build:sass && yarn autoprefix:css && yarn concat:sass
$ echo 'Building sass...' && sass src:dist --style compressed --quiet --color
Building sass...
$ echo 'Autoprefixing...' && yarn postcss dist/*.css --no-map --use autoprefixer -d dist
Autoprefixing...
$ /Users/jacob/elastic-charts/node_modules/.bin/postcss dist/theme_dark.css dist/theme_light.css dist/theme_only_dark.css dist/theme_only_light.css --no-map --use autoprefixer -d dist
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
$ echo 'Concat SASS...' && node scripts/concat_sass.js
Concat SASS...
✨  Done in 46.17s.
jacob@Jacobs-MacBook-Pro elastic-charts % cd dist
cd: no such file or directory: dist

Are the command prompts outdated or is there a step I'm missing or just a better way to approach this overall?
@nickofthyme
Copy link
Collaborator

No we use yarn workspaces while still maintaining a top-level yarn script with lerna run. So yarn build actually calls...

lerna run --loglevel=silent --scope @elastic/charts build --stream --no-prefix

This will call build in the @elastic/charts workspace which the stdout assumes cwd as packages/charts hence the confusion. So the charts package is built within the packages/charts/dist directory.

@jmw992
Copy link
Author

jmw992 commented Apr 19, 2022

Tx @nickofthyme, i'll try and work with that and I'll try and report my success. Also dope github account name pun :)

@jmw992
Copy link
Author

jmw992 commented Apr 19, 2022

So I am trying to link this into Kibana directly by swapping out the npm dependency for a built target from this fork. I thought I could replace "@elastic/charts": 40.1.1, with "@elastic/charts": "./dependencies/charts", which was forked from the same release tag.

I copied over the packages/charts with the built dist from my elastic-chart

However when I run yarn kbn bootstrap it fails

Terminal result 
jacob@Jacobs-MacBook-Pro omo % nvm use
Found '/Users/jacob/Documents/dev/omo/.nvmrc' with version <16.13.2>
Now using node v16.13.2 (npm v8.1.2)
jacob@Jacobs-MacBook-Pro omo % yarn kbn bootstrap
yarn run v1.22.18
$ node scripts/kbn bootstrap
 succ [bazel_tools] all bazel tools are correctly installed
 info [bazel] INFO: Invocation ID: ece80fa4-72d2-462f-8743-74dd2c3706ef
 info [bazel] INFO: Analyzed target //packages:build (1 packages loaded, 400 targets configured).
 info [bazel] INFO: Found 1 target...
 info [bazel] ERROR: /Users/jacob/Documents/dev/omo/packages/kbn-ui-shared-deps-npm/BUILD.bazel:135:8: Action packages/kbn-ui-shared-deps-npm/shared_built_assets failed: (Exit 2): webpack-cli.sh failed: error executing command bazel-out/host/bin/external/npm/webpack-cli/bin/webpack-cli.sh --config packages/kbn-ui-shared-deps-npm/webpack.config.js --output-path ... (remaining 3 argument(s) skipped)
 info [bazel] 
 info [bazel] Use --sandbox_debug to see verbose messages from the sandbox
 info [bazel]    2641 modules
 info [bazel] 
 info [bazel] ERROR in dll kbn-ui-shared-deps-npm
 info [bazel] Module not found: Error: Can't resolve '@elastic/charts' in '/private/var/tmp/_bazel_jacob/627b88ff12c87b963e5fe7208abbeaa4/sandbox/darwin-sandbox/178/execroot/kibana/packages/kbn-ui-shared-deps-npm'
 info [bazel] Target //packages:build failed to build
 info [bazel] Use --verbose_failures to see the command lines of failed build steps.
 info [bazel] INFO: Elapsed time: 14.075s, Critical Path: 13.65s
 info [bazel] INFO: 2 processes: 2 internal.
 info [bazel] 
ERROR [bootstrap] failed:
ERROR The bazel command that was running failed to complete.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
jacob@Jacobs-MacBook-Pro omo % yarn kbn bootstrap
yarn run v1.22.18
$ node scripts/kbn bootstrap
 succ [bazel_tools] all bazel tools are correctly installed
 info [bazel] INFO: Invocation ID: 1a7a76fe-5820-40de-adca-659667809735
 info [bazel] INFO: Analyzed target @nodejs//:yarn (0 packages loaded, 3 targets configured).
 info [bazel] INFO: Found 1 target...
 info [bazel] INFO: Elapsed time: 0.835s, Critical Path: 0.37s
 info [bazel] INFO: 1 process: 1 internal.
 info [bazel] INFO: Running command line: /private/var/tmp/_bazel_jacob/627b88ff12c87b963e5fe7208abbeaa4/external/nodejs_darwin_amd64/bin/yarn
 info [bazel] $ node ./preinstall_check
 info [bazel] [1/5] Validating package.json...
 info [bazel] [2/5] Resolving packages...
 info [bazel] warning Resolution field "trim@1.0.1" is incompatible with requested version "trim@0.0.1"
 info [bazel] warning Resolution field "trim@1.0.1" is incompatible with requested version "trim@0.0.1"
 info [bazel] warning Resolution field "trim@1.0.1" is incompatible with requested version "trim@0.0.1"
 info [bazel] warning Resolution field "typescript@4.1.3" is incompatible with requested version "typescript@^3.3.3333"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^10.1.0"
 info [bazel] warning Resolution field "typescript@4.1.3" is incompatible with requested version "typescript@^4.3.5"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@12.20.24"
 info [bazel] warning Resolution field "typescript@4.1.3" is incompatible with requested version "typescript@~4.4.2"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^14.0.10"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^14.0.10"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^14.0.10"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^14.0.10"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^14.14.31"
 info [bazel] warning Resolution field "typescript@4.1.3" is incompatible with requested version "typescript@^3.5.3"
 info [bazel] warning Resolution field "trim@1.0.1" is incompatible with requested version "trim@0.0.1"
 info [bazel] warning Resolution field "trim@1.0.1" is incompatible with requested version "trim@0.0.1"
 info [bazel] [3/5] Fetching packages...
 info [bazel] [4/5] Linking dependencies...
 info [bazel] warning " > @elastic/charts@40.1.1" has incorrect peer dependency "moment@^2.29.1".
 info [bazel] warning " > @elastic/charts@40.1.1" has incorrect peer dependency "moment-timezone@^0.5.32".
 info [bazel] warning " > @mapbox/mapbox-gl-rtl-text@0.2.3" has unmet peer dependency "mapbox-gl@>=0.32.1 <2.0.0".
 info [bazel] warning "maplibre-gl > @mapbox/mapbox-gl-supported@1.5.0" has unmet peer dependency "mapbox-gl@>=0.32.1 <2.0.0".
 info [bazel] warning " > react-monaco-editor@0.41.2" has incorrect peer dependency "@types/react@^17.x".
 info [bazel] warning " > react-monaco-editor@0.41.2" has incorrect peer dependency "react@^17.x".
 info [bazel] warning " > react-shortcuts@2.0.1" has incorrect peer dependency "react@^0.14.8 || ^15".
 info [bazel] warning " > react-shortcuts@2.0.1" has incorrect peer dependency "react-dom@^0.14.8 || ^15".
 info [bazel] warning " > @elastic/eslint-plugin-eui@0.0.2" has incorrect peer dependency "eslint@>=5, <7".
 info [bazel] warning "@octokit/rest > @octokit/plugin-request-log@1.0.2" has unmet peer dependency "@octokit/core@>=3".
 info [bazel] warning "@storybook/addon-docs > @mdx-js/react@1.6.22" has incorrect peer dependency "react@^16.13.1 || ^17.0.0".
 info [bazel] warning "@storybook/addon-storyshots > preact-render-to-string@5.1.19" has unmet peer dependency "preact@>=10".
 info [bazel] warning "@storybook/react > @storybook/react-docgen-typescript-plugin > react-docgen-typescript@2.1.1" has incorrect peer dependency "typescript@>= 4.3.x".
 info [bazel] warning " > @storybook/testing-react@0.0.22" has unmet peer dependency "@storybook/client-api@^6 || >=6.0.0-0 || >=6.1.0-0 || >=6.2.0-0 || >=6.3.0-0 ".
 info [bazel] warning "@testing-library/react-hooks > react-error-boundary@3.1.1" has incorrect peer dependency "react@>=16.13.1".
 info [bazel] [5/5] Building fresh packages...
 info [bazel] $ node scripts/kbn patch_native_modules
 info [bazel] INFO: Invocation ID: de8c49c7-9cfe-4d86-a92b-94e4cb08f1ca
 info [bazel] $ node ./preinstall_check
 info [bazel] [1/5] Validating package.json...
 info [bazel] [2/5] Resolving packages...
 info [bazel] warning Resolution field "trim@1.0.1" is incompatible with requested version "trim@0.0.1"
 info [bazel] warning Resolution field "trim@1.0.1" is incompatible with requested version "trim@0.0.1"
 info [bazel] warning Resolution field "trim@1.0.1" is incompatible with requested version "trim@0.0.1"
 info [bazel] warning Resolution field "typescript@4.1.3" is incompatible with requested version "typescript@^3.3.3333"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^10.1.0"
 info [bazel] warning Resolution field "typescript@4.1.3" is incompatible with requested version "typescript@^4.3.5"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@12.20.24"
 info [bazel] warning Resolution field "typescript@4.1.3" is incompatible with requested version "typescript@~4.4.2"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^14.0.10"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^14.0.10"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^14.0.10"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^14.0.10"
 info [bazel] warning Resolution field "@types/node@16.10.2" is incompatible with requested version "@types/node@^14.14.31"
 info [bazel] warning Resolution field "typescript@4.1.3" is incompatible with requested version "typescript@^3.5.3"
 info [bazel] warning Resolution field "trim@1.0.1" is incompatible with requested version "trim@0.0.1"
 info [bazel] warning Resolution field "trim@1.0.1" is incompatible with requested version "trim@0.0.1"
 info [bazel] success Already up-to-date.
 info [bazel] $ node scripts/kbn patch_native_modules
 info [bazel] INFO: Analyzed target //packages:build (1892 packages loaded, 8292 targets configured).
 info [bazel] INFO: Found 1 target...
 info [bazel] INFO: From Assembling npm types package packages/kbn-i18n/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-analytics/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/elastic-datemath/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-ace/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-apm-utils/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-i18n-react/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-config-schema/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/elastic-apm-synthtrace/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-alerts/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-es-query/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-apm-config-loader/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-config/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-dev-utils/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-crypto/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-docs-utils/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] INFO: From Assembling npm types package packages/kbn-es-archiver/npm_module_types:
 info [bazel] Analysis will use the bundled TypeScript version 4.1.3
 info [bazel] ERROR: /Users/jacob/Documents/dev/omo/packages/kbn-ui-shared-deps-npm/BUILD.bazel:135:8: Action packages/kbn-ui-shared-deps-npm/shared_built_assets failed: (Exit 2): webpack-cli.sh failed: error executing command bazel-out/host/bin/external/npm/webpack-cli/bin/webpack-cli.sh --config packages/kbn-ui-shared-deps-npm/webpack.config.js --output-path ... (remaining 3 argument(s) skipped)
 info [bazel] 
 info [bazel] Use --sandbox_debug to see verbose messages from the sandbox
 info [bazel]    2641 modules
 info [bazel] 
 info [bazel] ERROR in dll kbn-ui-shared-deps-npm
 info [bazel] Module not found: Error: Can't resolve '@elastic/charts' in '/private/var/tmp/_bazel_jacob/627b88ff12c87b963e5fe7208abbeaa4/sandbox/darwin-sandbox/283/execroot/kibana/packages/kbn-ui-shared-deps-npm'
 info [bazel] Target //packages:build failed to build
 info [bazel] Use --verbose_failures to see the command lines of failed build steps.
 info [bazel] INFO: Elapsed time: 47.198s, Critical Path: 21.87s
 info [bazel] INFO: 236 processes: 234 remote cache hit, 2 internal.
 info [bazel] 
ERROR [bootstrap] failed:
ERROR The bazel command that was running failed to complete.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
jacob@Jacobs-MacBook-Pro omo %

I've tried pointing it to the dist folder, and even copying over all of the subfolders in elastic-charts/packages to my kibana\dependencies folder as well but no luck.

Is there a way to point at my own custom fork like this?

@markov00
Copy link
Member

I use to do the following:

  1. yarn build in elastic-charts package
  2. cd packages/charts and update the version in package.json it doesn't matter much which version, but you just need to update it
  3. npm pack this will create a tar.gz package of the build that you can link in the Kibana package.json directly like:
    "@elastic/charts": "../elastic-charts/packages/charts/elastic-chartsv50.tar.gz"

the yarn kbn bootstrap in Kibana to pick up the updated version

We are working with some folks in the Kibana Ops team to make this process more smooth, but this is how it works at the moment.

@nickofthyme
Copy link
Collaborator

Yeah linking to kibana is not very nice or easy right now. We previously had a way to link a watched charts build to kibana via #1164 but that was only a brief luxury as kibana completed migration to Bazel.

So the only way to link charts now it via .gz build, AFAIK. You’d first build and pack charts locally.

cd ./packages/charts
yarn build
npm pack

Locate the full path to the .gz file, update kibana package.json with this path for charts in kibana.

// kibana package.json
{
  "@elastic/charts": "Users/path/to/charts/file.gz"
}

Then run this in kibana

yarn kbn bootstrap --no-validate

The --no-validate flag is required when installing from a local source, otherwise it will throw an error.

As far as pointing to the charts dist/ I have never gotten that to work. There are two issues at hand -- one is bazel which caches build data that likely doesn't see those changes and the second is the @kbn/ui-shared-deps-npm package that reexports charts and other ui libraries, see here. Between those two something is blocking those changes.

@jmw992
Copy link
Author

jmw992 commented Apr 19, 2022

Those steps did work for me, thanks @nickofthyme, you da man!

@jmw992 jmw992 closed this as completed Apr 19, 2022
@jmw992
Copy link
Author

jmw992 commented Apr 20, 2022

So unfortunately I haven't been able to get that separately packaged elastic-charts package to be consumed by Kibana. I replace the @elastic/charts but then kibana seems to download and use the npm package >:(

I've tried to confirm this by just adding some console logging in my elastic-charts fork which appears in it's storybook, and then not seeing it in the kibana which should be pointing at that *.tgz file

It looks like culprit is most likely the bazel build system which is referencing it as an npm dependency still in

I know this is an issue outside of elastic-charts, but If you @nickofthyme or anyone else has experience working from an in-development or custom elastic-charts version I'd appreciate some pointers.

I suppose I could always publish an npm package of the fork and grab from that and have the bazel system pick that up, but I'd prefer not to clutter npm with my shenanigans 😛

I've posted about this on the forum as well, I'll try and bring over any answer I get over here :)

@markov00
Copy link
Member

hey @jmw992, if I'm not wrong you need to update the version in the package.json before every new build/pack, if not bazel picks up the last available

@jmw992
Copy link
Author

jmw992 commented Apr 20, 2022

@markov00 , so update the version number in elastic-charts/packages/charts/package.json, pack that, and then set

// kibana package.json
{
  "@elastic/charts": "Users/path/to/charts/file.gz"
}

Then bazel should see the new version number and hopefully use the tgz from there?

@markov00
Copy link
Member

exactly

@jmw992
Copy link
Author

jmw992 commented Apr 20, 2022

Just wanted to confirm that adjustment worked. Also want to give people a heads up that if you want to adjust font size, and other chart themeing for Kibana that it actually needs to be done in the eui crate and not here. eui/src/themes/charts/themes.ts

The version bump trick that @markov00 was required for eui which I needed to do sooner. Thanks markov00, you're also the man!

@markov00
Copy link
Member

If you don't mind it would be great to see the output of your theme changes, we are going to improve our theme, but we are interested in understanding if there is something that is we should focus more on

. Also want to give people a heads up that if you want to adjust font size, and other chart themeing for Kibana that it actually needs to be done in the eui crate and not here. eui/src/themes/charts/themes.ts

You are right, in Kibana, our default themes are overridden by EUI chart theme. We anyway are going to merge this theme back to elastic-charts in the near future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@markov00 @jmw992 @nickofthyme