# Import npm module

**URL:** <https://talk.observablehq.com/t/import-npm-module/3387>\
**Category:** Help\
**Created:** [June 1, 2020, 6:51pm UTC](https://talk.observablehq.com/t/import-npm-module/3387 "2020-06-01T18:51:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dnprock](https://avatars.discourse-cdn.com/v4/letter/d/258eb7/32.png) [@dnprock](https://talk.observablehq.com/u/dnprock)\
**Post date:** [June 1, 2020, 6:51pm UTC](https://talk.observablehq.com/t/import-npm-module/3387/1 "2020-06-01T18:51:00Z")

</div>

Hello,

I’m trying to import an npm module to Observable notebooks. I tried different ways to package the module. I used babel to build main/browser/module packages.

I also try to use webpack with babel-loader to build the npm package. Here’s the link to the current version:

vidajs@0.0.5

> **[vidalab/vida](https://github.com/vidalab/vida/tree/master/package)**
>
> Flexible data viz using redwoodjs framework. Contribute to vidalab/vida development by creating an account on GitHub.

I compare the output code on [unpkg.com](http://unpkg.com). It looks similar to other packages like d3.

None of these versions can be imported to an Observable notebook. I can import them into a React project.

Does anyone know why I can’t import my module?

Thanks,

Phuoc Do

---

<div class="post-metadata">

**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\
**Post date:** [June 1, 2020, 7:24pm UTC](https://talk.observablehq.com/t/import-npm-module/3387/2 "2020-06-01T19:24:06Z")

</div>

It seems like you’ve bundle react, and react uses process.env to set production/dev

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/62d9dd691c87d43b334fce2fad3b4ab3f1b7e160.png)

> <https://stackoverflow.com/questions/29096018/react-webpack-process-env-is-undefined>

similiar problem with folks using rollup to bundle react

> <https://github.com/rollup/rollup/issues/487>
>
> Hi guys,
> Rollup bundle my file without errors but I have a react error "Uncaught ReferenceError: process is not defined"
> There is my...

---

<div class="post-metadata">

**Author:** ![dnprock](https://avatars.discourse-cdn.com/v4/letter/d/258eb7/32.png) [@dnprock](https://talk.observablehq.com/u/dnprock)\
**Post date:** [June 2, 2020, 7:35am UTC](https://talk.observablehq.com/t/import-npm-module/3387/3 "2020-06-02T07:35:54Z")

</div>

@radames thanks for the links. I tried a few things. When I bundle react with the library, Observable loads the library without errors. When I don’t bundle react with the library, I get “invalid module” with process.env. I think the common practice is to not bundle react.

vidajs@0.0.9 (with react, no error)  
vidajs@0.0.11 (without react, “invalid module” error)

---

<div class="post-metadata">

**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\
**Post date:** [June 2, 2020, 3:30pm UTC](https://talk.observablehq.com/t/import-npm-module/3387/4 "2020-06-02T15:30:26Z")

</div>

hi @dnprock I guess you’re right, you could import react separated.

look at this pattern here

> **[Hello, JSX](https://observablehq.com/@mbostock/hello-jsx#React)**
>
> An Observable notebook by Mike Bostock.