ClojureScript

Undefined nameToPath for bootstrap` when using Twitter's Bootstrap (twbs)

Details

  • Type: Defect Defect
  • Status: Closed Closed
  • Priority: Minor Minor
  • Resolution: Not Reproducible
  • Affects Version/s: None
  • Fix Version/s: None
  • Component/s: None
  • Labels:
  • Environment:
    1.9.946

Description

How to reproduce problem

src/cljsbuild_bootstrap4/core.cljs
(ns cljsbuild-bootstrap4.core
  (:require [bootstrap]))

(enable-console-print!)

(println "Hello world!")

(-> ".alert" js/jQuery (.alert "close"))
index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cljsbuild-bootstrap4</title>
	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
	<div class="alert alert-warning alert-dismissible fade show" role="alert">
		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		</button>
		<strong>Holy guacamole!</strong> I should be fading.
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="out/main.js"></script>
</body>
</html>
build.clj
(require 'cljs.build.api)

(cljs.build.api/build "src" {:output-to "out/main.js"
                             :main 'cljsbuild-bootstrap4.core
                             :install-deps true
                             :npm-deps {:bootstrap "4.0.0-beta"}})
  1. Copy the 1.9.946 cljs.jar to the current working directory
  2. Run
    java -cp cljs.jar:src clojure.main build.clj
  3. open index.html
  4. Observe console messages.

Expected result

  1. Console should show the following messages:
    Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    Hello world!
  2. The Bootstrap Alert component should fade from the page resulting in a blank page.
  3. Compiler should produce:
    out/cljs_deps.js
    goog.addDependency("base.js", ['goog'], []);
    goog.addDependency("../cljs/core.js", ['cljs.core'], ['goog.string', 'goog.object', 'goog.math.Integer', 'goog.string.StringBuffer', 'goog.array', 'goog.math.Long']);
    goog.addDependency("../process/env.js", ['process.env'], ['cljs.core']);
    goog.addDependency("../node_modules/bootstrap/dist/js/bootstrap.js", ['bootstrap'], []); 
    goog.addDependency("../cljsbuild_bootstrap4/core.js", ['cljsbuild_bootstrap4.core'], ['cljs.core', 'bootstrap']);

Actual result

  1. Console shows
    Error: Undefined nameToPath for bootstrap
  2. The Bootstrap Alert component fails to fade from the page and remains on the page.
  3. Compiler produces:
    out/cljs_deps.js
    goog.addDependency("base.js", ['goog'], []);
    goog.addDependency("../cljs/core.js", ['cljs.core'], ['goog.string', 'goog.object', 'goog.math.Integer', 'goog.string.StringBuffer', 'goog.array', 'goog.math.Long']);
    goog.addDependency("../process/env.js", ['process.env'], ['cljs.core']);
    goog.addDependency("../cljsbuild_bootstrap4/core.js", ['cljsbuild_bootstrap4.core'], ['cljs.core', 'bootstrap']);

Activity

Hide
Hendrik Poernama added a comment -

I came across the same problem and did some tracing. It looks like 'load-foreign-library' correctly populated the 'provides' key, but 'library-graph-node' failed to get the 'provides'. I also observed that the output of library-graph-node is the one that gets passed to cljs_deps.js

load-foreign-library: /Users/Hendrik/Projects/bugreports/cljsbuild-bootstrap4/node_modules/bootstrap/dist/js/bootstrap.js
provides: ["bootstrap" "bootstrap/dist/js/bootstrap.js" "bootstrap/dist/js/bootstrap"]

load-foreign-library: /Users/Hendrik/Projects/bugreports/cljsbuild-bootstrap4/node_modules/bootstrap/package.json
provides: []

Copying file:/Users/Hendrik/Projects/bugreports/cljsbuild-bootstrap4/node_modules/bootstrap/dist/js/bootstrap.js to out/node_modules/bootstrap/dist/js/bootstrap.js

load-library: out/node_modules/bootstrap/dist/js/bootstrap.js

library-graph-node: /Users/Hendrik/Projects/bugreports/cljsbuild-bootstrap4/out/node_modules/bootstrap/dist/js/bootstrap.js
{:requires [], :provides [],
:url #object[java.net.URL 0x6a0659ac "file:/<snip>/cljsbuild-bootstrap4/out/node_modules/bootstrap/dist/js/bootstrap.js"],
:closure-lib true, :lib-path "out/node_modules/bootstrap/dist/js/bootstrap.js"}

Show
Hendrik Poernama added a comment - I came across the same problem and did some tracing. It looks like 'load-foreign-library' correctly populated the 'provides' key, but 'library-graph-node' failed to get the 'provides'. I also observed that the output of library-graph-node is the one that gets passed to cljs_deps.js load-foreign-library: /Users/Hendrik/Projects/bugreports/cljsbuild-bootstrap4/node_modules/bootstrap/dist/js/bootstrap.js provides: ["bootstrap" "bootstrap/dist/js/bootstrap.js" "bootstrap/dist/js/bootstrap"] load-foreign-library: /Users/Hendrik/Projects/bugreports/cljsbuild-bootstrap4/node_modules/bootstrap/package.json provides: [] Copying file:/Users/Hendrik/Projects/bugreports/cljsbuild-bootstrap4/node_modules/bootstrap/dist/js/bootstrap.js to out/node_modules/bootstrap/dist/js/bootstrap.js load-library: out/node_modules/bootstrap/dist/js/bootstrap.js library-graph-node: /Users/Hendrik/Projects/bugreports/cljsbuild-bootstrap4/out/node_modules/bootstrap/dist/js/bootstrap.js {:requires [], :provides [], :url #object[java.net.URL 0x6a0659ac "file:/<snip>/cljsbuild-bootstrap4/out/node_modules/bootstrap/dist/js/bootstrap.js"], :closure-lib true, :lib-path "out/node_modules/bootstrap/dist/js/bootstrap.js"}
Hide
Hendrik Poernama added a comment -

I am also getting the same error when trying to use 'apollo-client'. 'cljs_deps.js' would be missing the 'whatwg-fetch' dependency.

I suspect this is because 'whatwg-fetch' is a polyfill that does not explicitly export anything. I was able to workaround the issue by appending the following lines to the bottom of '<projectdir>/node_modules/whatwg-fetch/fetch.js'

const whatwg_fetch = 1;
export { whatwg_fetch };

I don't know enough to say that this is the same problem, other than the error message being identical. I have not tried adding the same hack to bootstrap.js

Show
Hendrik Poernama added a comment - I am also getting the same error when trying to use 'apollo-client'. 'cljs_deps.js' would be missing the 'whatwg-fetch' dependency. I suspect this is because 'whatwg-fetch' is a polyfill that does not explicitly export anything. I was able to workaround the issue by appending the following lines to the bottom of '<projectdir>/node_modules/whatwg-fetch/fetch.js' const whatwg_fetch = 1; export { whatwg_fetch }; I don't know enough to say that this is the same problem, other than the error message being identical. I have not tried adding the same hack to bootstrap.js
Hide
Derek Chiang added a comment -

Getting the same error for `ethereumjs-abi` too.

Log from console:

```
base.js:1357 Uncaught Error: Undefined nameToPath for ethereumjs_abi
at visitNode (base.js:1357)
at visitNode (base.js:1355)
at visitNode (base.js:1355)
at Object.goog.writeScripts_ (base.js:1369)
at Object.goog.require (base.js:706)
at (index):46
```

Show
Derek Chiang added a comment - Getting the same error for `ethereumjs-abi` too. Log from console: ``` base.js:1357 Uncaught Error: Undefined nameToPath for ethereumjs_abi at visitNode (base.js:1357) at visitNode (base.js:1355) at visitNode (base.js:1355) at Object.goog.writeScripts_ (base.js:1369) at Object.goog.require (base.js:706) at (index):46 ```
Hide
Mike Fikes added a comment -

Corin, I can't repro. I've also updated the description so that anyone can attempt to repro. (Minimal per https://clojurescript.org/community/reporting-issues)

I get a slightly different out/cljs_deps.js (below), but otherwise, I get the expected behavior as per the ticket description.

out/cljs_deps.js
goog.addDependency("base.js", ['goog'], []);
goog.addDependency("../node_modules/bootstrap/dist/js/bootstrap.js", ['module$Users$mfikes$Desktop$minimal$node_modules$bootstrap$dist$js$bootstrap'], []);
goog.addDependency("../cljs/core.js", ['cljs.core'], ['goog.string', 'goog.Uri', 'goog.object', 'goog.math.Integer', 'goog.string.StringBuffer', 'goog.array', 'goog.math.Long']);
goog.addDependency("../process/env.js", ['process.env'], ['cljs.core']);
goog.addDependency("../cljsbuild_bootstrap4/core.js", ['cljsbuild_bootstrap4.core'], ['module$Users$mfikes$Desktop$minimal$node_modules$bootstrap$dist$js$bootstrap', 'cljs.core']);
Show
Mike Fikes added a comment - Corin, I can't repro. I've also updated the description so that anyone can attempt to repro. (Minimal per https://clojurescript.org/community/reporting-issues) I get a slightly different out/cljs_deps.js (below), but otherwise, I get the expected behavior as per the ticket description.
out/cljs_deps.js
goog.addDependency("base.js", ['goog'], []);
goog.addDependency("../node_modules/bootstrap/dist/js/bootstrap.js", ['module$Users$mfikes$Desktop$minimal$node_modules$bootstrap$dist$js$bootstrap'], []);
goog.addDependency("../cljs/core.js", ['cljs.core'], ['goog.string', 'goog.Uri', 'goog.object', 'goog.math.Integer', 'goog.string.StringBuffer', 'goog.array', 'goog.math.Long']);
goog.addDependency("../process/env.js", ['process.env'], ['cljs.core']);
goog.addDependency("../cljsbuild_bootstrap4/core.js", ['cljsbuild_bootstrap4.core'], ['module$Users$mfikes$Desktop$minimal$node_modules$bootstrap$dist$js$bootstrap', 'cljs.core']);
Hide
Mike Fikes added a comment -

Ahh I see what is going on. This is a problem with 1.9.946. No longer reproducible with 1.10.238.

Show
Mike Fikes added a comment - Ahh I see what is going on. This is a problem with 1.9.946. No longer reproducible with 1.10.238.

People

Vote (2)
Watch (2)

Dates

  • Created:
    Updated:
    Resolved: