Node12 import error bokeh 2.0

Community Support
#1

Hi, I am using node:12 and importing bokehjs 2.0 into my js bundle. This gives me the following error:

zuifrontend_1  | Failed to compile.
zuifrontend_1  |
zuifrontend_1  | ./node_modules/@bokeh/bokehjs/build/js/lib/index.js 3:9
zuifrontend_1  | Module parse failed: Unexpected token (3:9)
zuifrontend_1  | File was processed with these loaders:
zuifrontend_1  |  * ./node_modules/babel-loader/lib/index.js
zuifrontend_1  | You may need an additional loader to handle the result of these loaders.
zuifrontend_1  | | export { version } from "./version";
zuifrontend_1  | | export { index } from "./embed";
zuifrontend_1  | > export * as embed from "./embed";
zuifrontend_1  | | export * as protocol from "./protocol";
zuifrontend_1  | | export * as _testing from "./testing";

I should mention that the node setup was made using create-react-app with typescript template.
tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src", "index.d.ts"]
}

Any idea how i can fix this?

#2

I’m not an expert here, so I can give just some hints. IIRC the BokehJS NPM bundle contains ESM modules, and, just as the error says, you may need some additional loader to enable ESM modules compilation in your project.

#3

Right… so some sort of ESM loader?

#4

Likely. Or maybe just some flag in tsconfig.json. Or maybe you will have to eject the app to be able to work with BokehJS. I think there was some other solution, but can’t find it right away. I will post it once a friend that has it sends it to me.

#5

Are you thinking about this link where he just uses CDN or alternatively ejects and runs bokeh through babel?

#6

No, there definitely was something else.

#7

Sorry for the false hope - I was wrong. That solution was only to be able to run some specific test runner. And his tsconfig is virtually the same as yours. No idea what to do next. @mateusz should know more.

#8

Right ok…i think i will opt for the eject unfortunately :confused:

I think i can just run bokeh through babel after having ejected and it should work…but its a pity that i had to eject. I hope this will get fixed either by bokeh or CRA.

Thanks for your help though :slight_smile:

#9

hm…i guess that was easier said than done :confused:

#10

I’d suggest a GH issue so @mateusz can be pinged directly.

Using @bokeh/bokehjs with Node and Webpack
#11

The solution the problem is available in its statement:

File was processed with these loaders:
zuifrontend_1 | * ./node_modules/babel-loader/lib/index.js
zuifrontend_1 | You may need an additional loader to handle the result of these loaders.

Module parse failed: Unexpected token (3:9)
export * as embed from “./embed”;

The problem is not with node (12.x or whichever), because bokehjs is not a node library, but it’s web browser library. So bokehjs’ code is not run in node at any point in time, it’s just being processed by node libraries like babel-loader, which apparently doesn’t recognize this pretty new ES export star syntax. You will need to consult babel’s documentation to resolve this. However, assuming that they already added support for this syntax and released a new version of the offending libraries, then fixing this should simply require updating your development setup to the most recent version of babel’s toolchain.

1 Like
[bokehjs] Trying to integrate into a TypeScript project
#12

I have made a solution for this to anyone who might be interested.

Run the following commands:

npm install @craco/craco
npm install --save-dev @babel/plugin-proposal-export-namespace-from
touch craco.config.js

Add the following content to craco.config.js

module.exports = {
  babel: {
    plugins: ["@babel/plugin-proposal-export-namespace-from"]
  }
};

In package.json, change the following lines:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

to

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

Now it should be possible to do

import * as Bokeh from "@bokeh/bokehjs";

and thereby use bokeh 2.0 in create-react-app without using eject and without using CDN

2 Likes
#13

For my case I added the “@babel/plugin-proposal-export-namespace-from” as suggested,

yarn add @babel/plugin-proposal-export-namespace-from

and added in package.json (Note that if you have test env, make sure sure you add both)

Screenshot at Jul 29 19-58-24
Screenshot at Jul 29 19-58-241120×960 127 KB

#14

So I guess you either ejected from CRA or configured webconfig manually then?