Lightrun
question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not usable as a node module

See original GitHub issue

Issue Description

Hi there,

Great job with this, but it seems that I can’t really use this as a node module. If I don’t install babel-loader (webpack’s 6to5 loader) I get this error on require:

./~/react-d3-components/src/LineChart.js
Module parse failed: /User/folder/node_modules/react-d3-components/src/LineChart.js Line 23: Unexpected token (
You may need an appropriate loader to handle this file type.
|   },
| 
|   render() {
|     let {width,
|        height,
 @ ./~/react-d3-components/src/index.js 4:16-38 0 [ './~/react-d3-components/src/LineChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/LineChart.js Line 23: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {width,\n| \t\t\t height,\n @ ./~/react-d3-components/src/index.js 4:16-38',
  './~/react-d3-components/src/AreaChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/AreaChart.js Line 26: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t area,\n @ ./~/react-d3-components/src/index.js 5:16-38',
  './~/react-d3-components/src/BarChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/BarChart.js Line 30: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t xScale,\n @ ./~/react-d3-components/src/index.js 1:15-36',
  './~/react-d3-components/src/ScatterPlot.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/ScatterPlot.js Line 26: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t symbol,\n @ ./~/react-d3-components/src/index.js 3:18-42',
  './~/react-d3-components/src/PieChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/PieChart.js Line 18: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {fill, d, data, onMouseEnter, onMouseLeave} = this.props;\n| \n @ ./~/react-d3-components/src/index.js 2:15-36' ]
./~/react-d3-components/src/AreaChart.js
Module parse failed: /User/folder/node_modules/react-d3-components/src/AreaChart.js Line 26: Unexpected token (
You may need an appropriate loader to handle this file type.
|   },
| 
|   render() {
|     let {data,
|        area,
 @ ./~/react-d3-components/src/index.js 5:16-38 1 [ './~/react-d3-components/src/LineChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/LineChart.js Line 23: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {width,\n| \t\t\t height,\n @ ./~/react-d3-components/src/index.js 4:16-38',
  './~/react-d3-components/src/AreaChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/AreaChart.js Line 26: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t area,\n @ ./~/react-d3-components/src/index.js 5:16-38',
  './~/react-d3-components/src/BarChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/BarChart.js Line 30: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t xScale,\n @ ./~/react-d3-components/src/index.js 1:15-36',
  './~/react-d3-components/src/ScatterPlot.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/ScatterPlot.js Line 26: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t symbol,\n @ ./~/react-d3-components/src/index.js 3:18-42',
  './~/react-d3-components/src/PieChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/PieChart.js Line 18: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {fill, d, data, onMouseEnter, onMouseLeave} = this.props;\n| \n @ ./~/react-d3-components/src/index.js 2:15-36' ]
./~/react-d3-components/src/BarChart.js
Module parse failed: /User/folder/node_modules/react-d3-components/src/BarChart.js Line 30: Unexpected token (
You may need an appropriate loader to handle this file type.
|   },
| 
|   render() {
|     let {data,
|        xScale,
 @ ./~/react-d3-components/src/index.js 1:15-36 2 [ './~/react-d3-components/src/LineChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/LineChart.js Line 23: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {width,\n| \t\t\t height,\n @ ./~/react-d3-components/src/index.js 4:16-38',
  './~/react-d3-components/src/AreaChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/AreaChart.js Line 26: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t area,\n @ ./~/react-d3-components/src/index.js 5:16-38',
  './~/react-d3-components/src/BarChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/BarChart.js Line 30: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t xScale,\n @ ./~/react-d3-components/src/index.js 1:15-36',
  './~/react-d3-components/src/ScatterPlot.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/ScatterPlot.js Line 26: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t symbol,\n @ ./~/react-d3-components/src/index.js 3:18-42',
  './~/react-d3-components/src/PieChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/PieChart.js Line 18: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {fill, d, data, onMouseEnter, onMouseLeave} = this.props;\n| \n @ ./~/react-d3-components/src/index.js 2:15-36' ]
./~/react-d3-components/src/ScatterPlot.js
Module parse failed: /User/folder/node_modules/react-d3-components/src/ScatterPlot.js Line 26: Unexpected token (
You may need an appropriate loader to handle this file type.
|   },
| 
|   render() {
|     let {data,
|        symbol,
 @ ./~/react-d3-components/src/index.js 3:18-42 3 [ './~/react-d3-components/src/LineChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/LineChart.js Line 23: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {width,\n| \t\t\t height,\n @ ./~/react-d3-components/src/index.js 4:16-38',
  './~/react-d3-components/src/AreaChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/AreaChart.js Line 26: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t area,\n @ ./~/react-d3-components/src/index.js 5:16-38',
  './~/react-d3-components/src/BarChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/BarChart.js Line 30: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t xScale,\n @ ./~/react-d3-components/src/index.js 1:15-36',
  './~/react-d3-components/src/ScatterPlot.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/ScatterPlot.js Line 26: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t symbol,\n @ ./~/react-d3-components/src/index.js 3:18-42',
  './~/react-d3-components/src/PieChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/PieChart.js Line 18: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {fill, d, data, onMouseEnter, onMouseLeave} = this.props;\n| \n @ ./~/react-d3-components/src/index.js 2:15-36' ]
./~/react-d3-components/src/PieChart.js
Module parse failed: /User/folder/node_modules/react-d3-components/src/PieChart.js Line 18: Unexpected token (
You may need an appropriate loader to handle this file type.
|   },
| 
|   render() {
|     let {fill, d, data, onMouseEnter, onMouseLeave} = this.props;
| 
 @ ./~/react-d3-components/src/index.js 2:15-36 4 [ './~/react-d3-components/src/LineChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/LineChart.js Line 23: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {width,\n| \t\t\t height,\n @ ./~/react-d3-components/src/index.js 4:16-38',
  './~/react-d3-components/src/AreaChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/AreaChart.js Line 26: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t area,\n @ ./~/react-d3-components/src/index.js 5:16-38',
  './~/react-d3-components/src/BarChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/BarChart.js Line 30: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t xScale,\n @ ./~/react-d3-components/src/index.js 1:15-36',
  './~/react-d3-components/src/ScatterPlot.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/ScatterPlot.js Line 26: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {data,\n| \t\t\t symbol,\n @ ./~/react-d3-components/src/index.js 3:18-42',
  './~/react-d3-components/src/PieChart.js\nModule parse failed: /User/folder/node_modules/react-d3-components/src/PieChart.js Line 18: Unexpected token (\nYou may need an appropriate loader to handle this file type.\n| \t},\n| \n| \trender() {\n| \t\tlet {fill, d, data, onMouseEnter, onMouseLeave} = this.props;\n| \n @ ./~/react-d3-components/src/index.js 2:15-36' ]
Built with error:

If I do use the loader (and compile your src) I still get this error: Uncaught TypeError: Cannot read property 'category20' of undefined

It seems that your node_modules are not installed because you ignore them in .npmignore.

Is it setup correctly following these instructions? http://howtonode.org/how-to-module

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:17 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
mycodebucketcommented, Sep 1, 2016

Actually I was using a wrong d3 version. that doesn’t contain category20 method. after using correct version it is working properly. thanks.

0reactions
mycodebucketcommented, Sep 1, 2016

Hi, codesuki , yes i have bundled with requirejs.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Not usable as a node.js module? · Issue #54 · jstat/jstat - GitHub
This library builds with npm and is listed in the npm directory, but it can't itself be require() 'd like a module, and...
Read more >
require() not working in module type nodejs script
In my package.json file I've specified that my nodejs app is of type module , because if I do not do that, it...
Read more >
Using Node.js Modules with Azure applications - Microsoft Learn
Learn how to work with Node.js modules when using Azure App Service or Cloud Services.
Read more >
CommonJS modules | Node.js v19.3.0 Documentation
CommonJS modules are the original way to package JavaScript code for Node.js. Node.js also supports the ECMAScript modules standard used by browsers and ......
Read more >
ts-node - npm
This error is thrown by node when a module is require() d, but node believes it should execute as native ESM. This can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found