reactjs


React Loader Issue depends on directory?


I've been playing with https://www.npmjs.com/package/react-calendar-timeline and I have an issue.
If I want to overload the timeline class, I simply do
import React from 'react'
import Timeline from 'react-calendar-timeline';
export class MyTimeline extends Timeline {
//Here I can override methods
}
export default MyTimeline;
This compiles, and works correctly.
However, if I want to make the import statement:
import Timeline from 'react-calendar-timeline/src/lib/Timeline';
(I will eventually also have to update the .../lib/Item/item.js file and therefore need to inherit timeline.js, and /lib/items/items.js to make sure that we load my overridden item.js file instead of that branch's file).
I get loader issues, and don't really understand why.
Module parse failed: PATH\node_modules\react-calendar-timeline\src\lib\Timeline.js Unexpected token (36:19)
You may need an appropriate loader to handle this file type.
|
| export default class ReactCalendarTimeline extends Component {
| static propTypes = {
I don't understand this error because if I take everything from the react-calendar-timeline/src/lib directory inside of node_modules, and put it directly into my project, I can now inherit from the Timeline.js file (I know physically moving the directory out of node modules and into my project is bad practice).
So why is webpack able to compile the same code when it is in my actual project directory instead of node_modules?
My current webpack.config
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: ['transform-class-properties']
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style-loader!css-loader' },
]
You need to allow babel to transform class properties using the babel-plugin-transform-class-properties plugin. Link: https://babeljs.io/docs/plugins/transform-class-properties/

Related Links

How can I change the default HTML escaping function in React Components?
React's Refs in Reagent (or Om)?
React, adding components in component
Nested routes in react-router
React: avoid controlled component boilerplate
How to show and hide a Textbox in react js
Why does data-reactid contain a function implementation and how can I get rid of it?
Reactjs: CJSX Nested Conditionals
Can a component know its own DOM tree context?
Documentation / Explination for {…this.props}
How to model a HTML table with column per component in React?
Passing data to top-level React component
Syntax error in updated 0.12 react docs?
Facebook's React - data updating approch
Selectively rendering optional component properties in React JSX
Does React.js require server side?

Categories

HOME
url
virtual-machine
pyspark
fortran
dronekit
gaussian
salesforce-lightning
ebay
mediarecorder
kohana
wavefront
jpql
ndepend
http-status-codes
web-parts
autologin
vala
dev-c++
connectiq
multipart
javaagents
connection-pooling
v4l2
scrapy-spider
datastax-enterprise
gulp-jshint
uibarbuttonitem
sqldependency
sphinx4
ipython-parallel
jbossfuse
textview
webclient
extern
nscollectionview
cowboy
julia-jump
vertical-alignment
datagridviewcombobox
peerjs
rexx
encoder
xmldom
denodo
pyopenssl
seyren
hellosign
dmalloc
apache-commons-cli
therubyracer
joystick
netlink
airwatch
sbt-proguard
calc
event-tracking
clearquest
web-standards
accpac
xmla
static-files
novell
conditional-comments
agent-based-modeling
codio
mencoder
static-class
ojb
ia-32
zend-db-table
ftpwebrequest
qt5.1
aspmenu-control
beep
winrt-async
nserror
wxperl
datejs
clgeocoder
peoplepicker
text-manipulation
mdd
djangoappengine
disk-based
moores-law

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App