2

I wanted to use react-vis library in my ES5 project. The library itself is written in ES6. So, I was getting errors such as this.

I was thinking to do ES6 to ES5 conversion of react-vis library using babel as explained here. So I cloned the react-vis repo and executed below command:

~/workspaces/react-vis/packages/react-vis$ yarn add babel-cli babel-preset-env

Then, created .babelrc file at packages/react-vis/.babelrc:

// .babelrc
{
    "presets": [
        "env"
    ]
}

Then I added:

"build2": "babel src -d build",

to packages/react-vis/package.json

and finally executed following command:

~/workspaces/react-vis/packages/react-vis$ npm run build2

> react-vis@1.11.7 build2
> babel src -d build

SyntaxError: src/animation.js: Unexpected token (34:4)
  32 |   const {damping, stiffness} = animationStyle;
  33 |   return {
> 34 |     ...animationStyle,
     |     ^
  35 |     damping: damping || presets.noWobble.damping,
  36 |     stiffness: stiffness || presets.noWobble.stiffness
  37 |   };

But then as you can see, am getting unexpected token at destructuring. Where did I go wrong? Also, is there any better solution to use react-vis library in ES5 project?

Update

It seems that my yarn add failed:

~/workspaces/react-vis/packages/react-vis$ yarn add babel-cli babel-preset-env
yarn add v1.22.17
[1/5] Validating package.json...
[2/5] Resolving packages...
warning babel-cli > chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning babel-cli > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > react-vis@1.11.7" has unmet peer dependency "react@^16.8.3".
warning " > react-vis@1.11.7" has unmet peer dependency "react-dom@^16.8.3".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > eslint-plugin-prettier@3.1.3" has unmet peer dependency "prettier@>= 1.13.0".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-showcase > babel-loader@8.1.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis > react-addons-test-utils@15.6.2" has incorrect peer dependency "react-dom@^15.4.2".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > @storybook/react@5.3.19" has unmet peer dependency "@babel/core@^7.0.1".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > @storybook/react@5.3.19" has unmet peer dependency "babel-loader@^7.0.0 || ^8.0.0".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > storybook-addon-jsx@7.2.3" has unmet peer dependency "@storybook/addons@>= 5.x".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > storybook-addon-jsx@7.2.3" has unmet peer dependency "@storybook/channels@>= 5.x".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > storybook-addon-jsx@7.2.3" has unmet peer dependency "@storybook/theming@>= 5.x".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > storybook-addon-jsx@7.2.3" has unmet peer dependency "@storybook/components@>= 5.x".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > storybook-addon-jsx@7.2.3" has unmet peer dependency "@storybook/core-events@>= 5.x".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > ocular > react-ga@2.7.0" has unmet peer dependency "prop-types@^15.6.0".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > @storybook/addon-knobs > @storybook/api@5.3.19" has unmet peer dependency "regenerator-runtime@*".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > @storybook/react > @babel/plugin-transform-react-constant-elements@7.9.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > @storybook/react > @babel/preset-flow@7.9.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > @storybook/react > @storybook/core@5.3.19" has unmet peer dependency "@babel/core@*".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > @storybook/react > @storybook/core@5.3.19" has unmet peer dependency "babel-loader@^7.0.0 || ^8.0.0".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > @storybook/react > babel-plugin-named-asset-import@0.3.6" has unmet peer dependency "@babel/core@^7.1.0".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > ocular > eslint-config-uber-jsx > eslint-plugin-react@6.10.3" has incorrect peer dependency "eslint@^2.0.0 || ^3.0.0".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > ocular > react-icons > react-icon-base@2.1.0" has unmet peer dependency "prop-types@*".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > @storybook/react > @babel/preset-flow > @babel/plugin-transform-flow-strip-types@7.9.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis > eslint-plugin-jest > @typescript-eslint/experimental-utils > @typescript-eslint/typescript-estree > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning "workspace-aggregator-49cd9a63-a8d6-41e5-85ad-166e966bfd2e > react-vis-website > @storybook/react > @babel/preset-flow > @babel/plugin-transform-flow-strip-types > @babel/plugin-syntax-flow@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
[5/5] Building fresh packages...
[-/12] ⠁ waiting...
[2/12] ⠁ canvas-prebuilt
[3/12] ⠁ node-sass
[-/12] ⠁ waiting...
error /home/oem/workspaces/react-vis/node_modules/canvas-prebuilt: Command failed.
Exit code: 1
Command: node_modules/.bin/node-pre-gyp install
Arguments: 
Directory: /home/oem/workspaces/react-vis/node_modules/canvas-prebuilt
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using node-pre-gyp@0.10.3
node-pre-gyp info using node@16.14.0 | linux | x64
node-pre-gyp WARN Using request for node-pre-gyp https download 
node-pre-gyp info check checked for "/home/oem/workspaces/react-vis/node_modules/canvas-prebuilt/canvas/build/Release/canvas-prebuilt.node" (not found)
node-pre-gyp http GET https://github.com/chearon/node-canvas-prebuilt/releases/download/v1.6.11/canvas-prebuilt-v1.6.11-node-v93-linux-x64.tar.gz
node-pre-gyp http 404 https://github.com/chearon/node-canvas-prebuilt/releases/download/v1.6.11/canvas-prebuilt-v1.6.11-node-v93-linux-x64.tar.gz
node-pre-gyp ERR! install error 
node-pre-gyp ERR! stack Error: 404 status code downloading tarball https://github.com/chearon/node-canvas-prebuilt/releases/download/v1.6.11/canvas-prebuilt-v1.6.11-node-v93-linux-x64.tar.gz
node-pre-gyp ERR! stack     at Request.<anonymous> (/home/oem/workspaces/react-vis/node_modules/node-pre-gyp/lib/install.js:137:27)
node-pre-gyp ERR! stack     at Request.emit (node:events:532:35)
node-pre-gyp ERR! stack     at Request.onRequestResponse (/home/oem/workspaces/react-vis/node_modules/request/request.js:1059:10)
node-pre-gyp ERR! stack     at ClientRequest.emit (node:events:520:28)
node-pre-gyp ERR! stack     at HTTPParser.parserOnIncomingClient [as onIncoming] (node:_http_client:618:27)
node-pre-gyp ERR! stack     at HTTPParser.parserOnHeadersComplete (node:_http_common:128:17)
node-pre-gyp ERR! stack     at TLSSocket.socketOnData (node:_http_client:482:22)
node-pre-gyp ERR! stack     at TLSSocket.emit (node:events:520:28)
node-pre-gyp ERR! stack     at addChunk (node:internal/streams/readable:315:12)
node-pre-gyp ERR! stack     at readableAddChunk (node:internal/streams/readable:289:9)
node-pre-gyp ERR! System Linux 5.13.0-39-generic
node-pre-gyp ERR! command "/home/oem/.nvm/versions/node/v16.14.0/bin/node" "/home/oem/workspaces/react-vis/node_modules/canvas-prebuilt/node_modules/.bin/node-pre-gyp" "install"
node-pre-gyp ERR! cwd /home/oem/workspaces/react-vis/node_modules/canvas-prebuilt
node-pre-gyp ERR! node -v v16.14.0
node-pre-gyp ERR! node-pre-gyp -v v0.10.3

So tried npm install, but that too failed:

~/workspaces/react-vis/packages/react-vis$ npm install babel-cli babel-preset-env
npm notice 
npm notice New minor version of npm available! 8.3.1 -> 8.7.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.7.0
npm notice Run npm install -g npm@8.7.0 to update!
npm notice 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: react-vis@1.11.7
npm ERR! Found: react-dom@16.14.0
npm ERR! node_modules/react-dom
npm ERR!   dev react-dom@"^16.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-dom@"^15.4.2" from react-addons-test-utils@15.6.2
npm ERR! node_modules/react-addons-test-utils
npm ERR!   dev react-addons-test-utils@">=15.4.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/oem/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/oem/.npm/_logs/2022-04-20T14_03_52_627Z-debug-0.log

Update 2

I upgaded my npm version to 8.7.0 and now able to do npm install for latest versions @babel/cli and @babel/preset-env. But now running build2 gives following error:

~/workspaces/react-vis/packages/react-vis$ npm run build2

> react-vis@1.11.7 build2
> babel src -d build

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'babel-preset-env' imported from /home/oem/workspaces/react-vis/packages/react-vis/babel-virtual-resolve-base.js
    at new NodeError (/home/oem/workspaces/react-vis/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2552:5)
    at packageResolve (/home/oem/workspaces/react-vis/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3208:9)
    at moduleResolve (/home/oem/workspaces/react-vis/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3242:18)
    at defaultResolve (/home/oem/workspaces/react-vis/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3281:13)
    at /home/oem/workspaces/react-vis/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3304:14
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/oem/workspaces/react-vis/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:63:103)
    at _next (/home/oem/workspaces/react-vis/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:65:194)
    at /home/oem/workspaces/react-vis/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:65:364
    at new Promise (<anonymous>) {
  code: 'ERR_MODULE_NOT_FOUND'
}
npm ERR! Lifecycle script `build2` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: react-vis@1.11.7 
npm ERR!   at location: /home/oem/workspaces/react-vis/packages/react-vis
MsA
  • 2,599
  • 3
  • 22
  • 47
  • What is your node version? – kelsny Apr 20 '22 at 13:40
  • Note that you should be using `@babel/cli` and `@babel/preset-env` at this point. `babel-preset-env` in particular is well out-of-date (and `babel-cli` is a major version behind). – jonrsharpe Apr 20 '22 at 13:42
  • @kellys node v16.14.0, npm 8.3.1. Also seems that I was getting error while doing `yarn add`. I have added the error in the OP. – MsA Apr 20 '22 at 14:12
  • @kellys Now I have upgraded `npm` to `8.7.0` and was able to install latest versions `@babel/cli` and `@babel/preset-env` as suggested by jonrsharpe... – MsA Apr 20 '22 at 14:19
  • @jonrsharpe I updated npm and installed latest versions `@babel/cli` and `@babel/preset-env`, but now getting new error `Cannot find package 'babel-preset-env'`. I have added whole error in OP. Do I need to change the build script? – MsA Apr 20 '22 at 14:23
  • Look at the usage examples on https://babeljs.io/docs/en/babel-preset-env – jonrsharpe Apr 20 '22 at 14:26
  • @jonrsharpe Able to compile to ES5. It generated multiple files, not single bundle file. So tried to generate single file with webpack+babel. But it gave `Uncaught ReferenceError: reactVis`. So explored react-vis repo a bit & found that they were using `browserify`. So to compile ES6 to ES5, I added `--presets [ @babel/preset-env ]` on [this line](https://github.com/uber/react-vis/blob/cacb3ca24138e9960caa2a4687505af8995f69ec/packages/react-vis/package.json#L26) as suggested [here](https://stackoverflow.com/a/58374070/1317018). But again getting `Cannot call a class as a function`.What I miss? – MsA Apr 20 '22 at 16:41

0 Answers0