# importCell conflicts with static import **URL:** \ **Category:** Help\ **Created:** [January 28, 2021, 9:13pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548 "2021-01-28T21:13:59Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\ **Post date:** [January 28, 2021, 9:13pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/1 "2021-01-28T21:13:59Z")
Hi, @mootari made me discover [Dataflow / Mike Bostock / Observable](https://observablehq.com/@mbostock/dataflow) which provides the `importCell()` function to dynamically import cells from another notebook. I updated the [small notebook](https://observablehq.com/@severo/tip-quick-histogram) where I showed how to do the same using the `import {...} with {...} from '...'` syntax. But both examples collide, and to make them work, I’ve had to make the dynamic import depend on the static import, to be sure it’s evaluated after. What is the reason? And is there a better way to use both in the same notebook? ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [January 28, 2021, 9:54pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/2 "2021-01-28T21:54:40Z")
Could you try removing the workaround? After an initial failure, I can’t seem to replicate the problem anymore. (Perhaps a caching issue?) Edit: Ah, there it is again, after removing and adding back the import in a new cell. Edit 2: I can’t reliably reproduce the error. Still recommending to remove the workaround, for easier investigation. ---
**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\ **Post date:** [January 28, 2021, 10:02pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/3 "2021-01-28T22:02:15Z")
Oh, you’re right, it only occurs if the cache is deactivated, or if it’s the cache is empty (_some_ request has still not been cached). Reloading the page with the cache activated removes the error. So: we still need to understand why it fails on the first visit. ---
**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\ **Post date:** [January 28, 2021, 10:04pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/4 "2021-01-28T22:04:03Z")
I removed the workaround ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [January 28, 2021, 10:04pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/5 "2021-01-28T22:04:05Z")
Could you republish your notebook without the workaround, please? ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [January 28, 2021, 10:36pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/6 "2021-01-28T22:36:00Z")
I suspect that this is a conflict between two d3-require instances: 1. packaged with Observable’s Runtime, loads [@mbostock/dataflow#d3](https://observablehq.com/@mbostock/dataflow#d3) 2. packaged with runtime.umd.js which is loaded in [@mbostock/dataflow#Runtime](https://observablehq.com/@mbostock/dataflow#Runtime); attempts to load [@d3/histogram#d3](https://observablehq.com/@d3/histogram#d3) This second attempt causes the error. I think @mbostock may want to take a look at that bug. ---
**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\ **Post date:** [January 28, 2021, 10:37pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/7 "2021-01-28T22:37:07Z")
Thanks for taking the time to dig into that problem. I wouldn’t have been able to reach that point. ---
**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\ **Post date:** [January 28, 2021, 10:58pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/8 "2021-01-28T22:58:12Z")
I haven’t had a chance to dig into the issue here, but I think I ran into something similar in this old thread: > [@Require + notebook runtime](https://talk.observablehq.com/t/require-notebook-runtime/1740): > > I’ve been running into an issue where require'd modules intermittently throw a mysterious Pe: invalid module error if I’ve imported Observable’s runtime library and embedded a notebook in another cell. The following notebook is my attempt to give a minimal example: The two cells of interest are: req, which requires vega-lite (can be replaced with any other module of your choice, in my original case it was d3) loaded, which embeds an almost-blank notebook using required Observable runtime … ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [January 28, 2021, 10:58pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/9 "2021-01-28T22:58:47Z")
The process was: 1. verify that you can reliably reproduce the error (👍 for that with cache disabled) 2. in your developer tools, open the “Search” drawer and search for “invalid module” (it should appear in two files) 3. prettify each file and set a breakpoint in the corresponding line (you may have to search the file for “invalid module”) 4. reload, and wait for the breakpoint to hit From here on we have two objectives: 1. find out where the error originated 2. find out the nature (and possibly the cause) of the error The first can be done fairly easily by looking through the call stack, but finding the right place requires some intuition. In the screenshot below we find the notebook cell that the error originated from: ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/6753c26fd1496ab6609f9c0237853dd8322f252f.png) The second point on the other hand is a lot messier, especially when working with minified code. In order to orient yourself, you’ll want to have some unminified reference code at hand. [**Here**](https://github.com/d3/d3-require/blob/master/src/index.js) is the one for d3-require. By relating the minified code with the reference code, we find [**the line**](https://github.com/d3/d3-require/blob/4056a786912e9335a86b41c2b1cdfa392bd14289/src/index.js#L79) where we had set our breakpoint. Now we jump back to the top of the call stack, collapse it, and take a closer look at the scope below it: ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/7/771c2bb0b07249696de1c2548e9a2e34093ff858.png) On the right side, we see the actual error message. By hovering over the variable “Ce” we can inspect its contents, and conclude that `Ce.pop()`returned `undefined`because the array is empty. Looking the ref. source, we related `Ce` to `queue`. From here on it gets somewhat handwavy. We can set additional breakpoints for `Ce.push` and `Ce.pop` in order to poke around in the values that pass through. Doing so (and inspecting both anonymous function bodies and surrounding scope), we discover that there’s another d3 instance which gets loaded successfully. When you’ve messed around with d3-require in the past, you may have noticed that it caches resolved modules, and also sets some global variables (an [unfortunate requirement](https://github.com/d3/d3-require/issues/33#issuecomment-606777977) of the AMD format). Tip: It’s good to keep in mind that you can interact with the active breakpoint’s scope in the JS console. ---
**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\ **Post date:** [January 29, 2021, 9:07am UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/10 "2021-01-29T09:07:28Z")
Thanks a lot for the detailed answer, it’s very useful, and I could reproduce the process. Do you know if the developer tools provide a way to search for a string (“invalid module” in our case) in all the sources, or is it necessary to open every file then search in it? ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [January 29, 2021, 10:02am UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/11 "2021-01-29T10:02:09Z")
> [@severo](#): > > Do you know if the developer tools provide a way to search for a string (“invalid module” in our case) in all the sources Yes, that is the “search drawer” to which I was referring in point 2: > 1. in your developer tools, open the “Search” drawer and search for “invalid module” (it should appear in two files) The “drawer” is the section at the bottom with the JS console, that can be toggled (hence “drawer”). You can add the search tab via the dot menu to the left: ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/b/badecb5780c99e5efe9f0f13fb8473d5be712995.png) ---
**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\ **Post date:** [January 29, 2021, 10:09am UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/12 "2021-01-29T10:09:37Z")
OK, thanks! Firefox does not provide a Search tab 🤷‍♂️. I will use Chromium the next time I have to do hardcore debugging ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [January 29, 2021, 10:31am UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/13 "2021-01-29T10:31:05Z")
Firefox also lets you search across all files. If you’re on macOS though, make sure that you’re in the debugger panel. Otherwise you’ll just toggle fullscreen. 🙂 [https://developer.mozilla.org/en-US/docs/Tools/Debugger/How\_to/Search#searching\_in\_all\_files](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Search#searching_in_all_files) ---
**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\ **Post date:** [January 29, 2021, 10:37am UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/14 "2021-01-29T10:37:20Z")
Thanks, it’s perfect ---
**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\ **Post date:** [January 29, 2021, 2:17pm UTC](https://talk.observablehq.com/t/importcell-conflicts-with-static-import/4548/15 "2021-01-29T14:17:11Z")
I made a tweak to my notebook so that importCell passes through the existing require function, rather than loading a new one. ```auto // Instantiate a new runtime, but reuse the existing runtime’s require. // (This is ensures that any requires in imports still work.) const library = Object.assign(new Library(), {require: () => require}); const runtime = new Runtime(library); ``` That seems to have fixed the problem. Thanks for doing all the legwork!