Cannot add local file to webpack bundle.

[kovkev]

🐞 bug report

Affected Rule

load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli")

Description

Adding a file to the data = [] attribute of the webpack rule will not produce that file in the resulting output directory.

🔬 Minimal Reproduction

git clone https://github.com/bazelbuild/rules_nodejs
cs rules_nodejs/examples/react_webapp/
vi BUILD.bazel # add file "somestyles.css" to `data = [` of the webpack rule, to get:

webpack(
    name = "bundle",
    outs = ["app.bundle.js"],
    args = [
        "$(execpath index.js)",
        "--config",
        "$(execpath webpack.config.js)",
        "-o",
        "$@",
    ],
    data = [
        "index.js",
        "somestyles.css",
        "styles.css",
        "webpack.config.js",
        "@npm//:node_modules",
    ],
)

edit somestyles.css to contain:

h1 {
  color: red;
}

run bazel build :bundle

Inspect the results:

(venv3.7.15) root@kevin-ThinkPad-X1C-5th-W10DG:~/pdev/tgkj/external/github/bazelbuild/rules_nodejs/examples/react_webpack# ls -la bazel-ou
t/k8-fastbuild/bin/
total 164
drwxr-xr-x 2 root root   4096 Jan 19 18:51 .
drwxr-xr-x 4 root root   4096 Jan 12 15:03 ..
-r-xr-xr-x 1 root root 135980 Jan 19 18:51 app.bundle.js
-r-xr-xr-x 1 root root    151 Jan 19 18:50 _bundle.module_mappings.json
-r-xr-xr-x 1 root root    151 Jan 12 15:03 _compile.module_mappings.json
-r-xr-xr-x 1 root root    266 Jan 12 15:03 index.js
-r-xr-xr-x 1 root root     62 Jan 12 15:34 styles.css
-r-xr-xr-x 1 root root    151 Jan 12 15:34 _styles.module_mappings.json
(venv3.7.15) root@kevin-ThinkPad-X1C-5th-W10DG:~/pdev/tgkj/external/github/bazelbuild/rules_nodejs/examples/react_webpack#

Notice that somestyles.css is not in the resulting files.

🌍 Your Environment

Operating System:

uname -a
Linux kevin-ThinkPad-X1C-5th-W10DG 5.3.0-26-generic #28~18.04.1-Ubuntu SMP Wed Dec 18 16:40:14 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux

Output of bazel version:

  
(venv3.7.15) root@kevin-ThinkPad-X1C-5th-W10DG:~/pdev/tgkj/external/github/bazelbuild/rules_nodejs/examples/react_webpack# bazel-1.1.0 --version
bazel 1.1.0
  

Rules_nodejs version:

(Please check that you have matching versions between WORKSPACE file and @bazel/* npm packages.)

  
```
http_archive(
    name = "build_bazel_rules_nodejs",
    sha256 = "e1a0d6eb40ec89f61a13a028e7113aa3630247253bcb1406281b627e44395145",
    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/1.0.1/rules_nodejs-1.0.1.tar.gz"],
)
```
  

/home/kevin/pdev/tgkj/external/github/bazelbuild/rules_nodejs/examples/react_webpack
├─┬ @bazel/bazel@2.0.0
│ ├── UNMET OPTIONAL DEPENDENCY @bazel/bazel-darwin_x64@2.0.0
│ ├── @bazel/bazel-linux_x64@2.0.0
│ ├── UNMET OPTIONAL DEPENDENCY @bazel/bazel-win32_x64@2.0.0
│ └── UNMET DEPENDENCY @bazel/hide-bazel-files@latest
├─┬ @bazel/buildifier@0.29.0
│ ├── UNMET OPTIONAL DEPENDENCY @bazel/buildifier-darwin_x64@0.29.0
│ ├── @bazel/buildifier-linux_x64@0.29.0
│ └── UNMET OPTIONAL DEPENDENCY @bazel/buildifier-win32_x64@0.29.0
├── @bazel/hide-bazel-files@0.39.1 extraneous
├── @bazel/ibazel@0.11.0
npm ERR! extraneous: @bazel/hide-bazel-files@0.39.1 /home/kevin/pdev/tgkj/external/github/bazelbuild/rules_nodejs/examples/react_webpack/node_modules/@bazel/hide-bazel-files
npm ERR! missing: @bazel/hide-bazel-files@latest, required by @bazel/bazel@2.0.0
(venv3.7.15) root@kevin-ThinkPad-X1C-5th-W10DG:~/pdev/tgkj/external/github/bazel

[kovkev]

Ultimately, I am looking to give visibility of a library that is in the local directory to webpack. For example, I cloned https://hermanya.github.io/react-landing-page locally and I can't get webpack to be able to see it when it runs index.js and does module resolution.

[kovkev]

The reason I made a local clone and am not using nom install is because I wanted to modify a file in the library. I wanted to add ‘placeholder=“Email Address”’ in the SignUp component

[kovkev]

Also, I don't see react-landing-page in node_modules:

(venv3.7.15) root@kevin-ThinkPad-X1C-5th-W10DG:~/pdev/tgkj# find bazel-out/k8-fastbuild/bin/ | grep node_modules | grep react-landing-page
(venv3.7.15) root@kevin-ThinkPad-X1C-5th-W10DG:~/pdev/tgkj#

[kovkev]

The latest solution I found to building my project with a locally modified library is to add this to args:

        "--resolve-alias",
        "react-landing-page=/home/kevin/pdev/tgkj/external/github/hermanya/react-landing-page",

So now, the webpack rule looks as follows:

webpack(
    name = "bundle",
    outs = ["app.bundle.js"],
    args = [
        "$(execpath index.js)",
        "--config",
        "$(execpath webpack.config.js)",
        "-o",
        "$@",
    ],
    data = [
        "index.js",
        "somestyles.css",
        "styles.css",
        "webpack.config.js",
        "@npm//:node_modules",
        "--resolve-alias",
        "react-landing-page=/home/kevin/pdev/tgkj/external/github/hermanya/react-landing-page",
    ],
)

The problem with this is that I have to specify the full path. I don't know if there's another way with Bazel to specify the $(execroot) somehow?

[joeljeske]

Have you tried using the copy_to_bin rule on the css file and then putting that rule in the webpack data?

https://bazelbuild.github.io/rules_nodejs/Built-ins.html

[evahowe]

@kovkev - have you tried @joeljeske suggestion?

[github-actions]

This issue has been automatically marked as stale because it has not had any activity for 60 days. It will be closed if no further activity occurs in two weeks. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[github-actions]

This issue was automatically closed because it went two weeks without a reply since it was labeled "Can Close?"