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

React.js Sub-Menu dimensions only available after ComponentDidUpdate
React-Router multiple RouteHandlers on same component
intercept ReactJS synthetic keydown handler
Browserify fails to create bundle with babelify transform (TypeError: Path must be a string.)
Accessing React component's static methods inside propTypes is not allowed
Flux/utils: How to access to props in the calculateState method?
What is the correct way to implement a stateless authentication?
Only animate list items when new are inserted, not when mounting initial
React as webpack external dependency
Karma + Browserify + Jasmine + Istanbul + React coverage
react boilerplate / generator with gulp, browserify, babel, etc?
Optimizing React Rendering with Function Partial Application
How to pass store explicitly into as a prop to “Connect()”
How can I use HTML5 Validation with React?
react testing: shallow rendering - getRenderOutput returning null
Async loaded config data for reactjs

Categories

HOME
qlikview
asp.net
javafx
url
stanford-nlp
sql-server-2014
ssh
abc
readdir
highmaps
okhttp3
pandoc
squeak
crash
xss
download
css-selectors
mediarecorder
procmon
travis-ci-cli
install
rmarkdown
virtualhost
activejdbc
camunda
javascript-debugger
react-select
amazon-data-pipeline
ibatis
loader
draw2d
bootstrap-datetimepicker
monad-transformers
multipart
quality-center
struts
ithit-webdav-server
core-animation
jira-zephyr
windows-mobile
libxml2
launchd
custom-fields
2checkout
tikz
keil
eclipse-jdt
ragel
flex3
repeat
perf
ninja-forms
office-interop
android-graphview
jvisualvm
mtm
mef
denodo
flask-socketio
boost-regex
androiddesignsupport
multi-targeting
grib
petapoco
tsc
fileopendialog
glade
strtol
syslog4j
patching
archiva
bbedit
markerspiderfier
controlpanel
vanilla-forums
openhab
euro
xcode5
launcher
api-eveonline
time-frequency
nodeunit
new-operator
fastcgi-mono-server
facebook-java-api
mahara
lastinsertid
svg-android
code-complete
cab
wpa
usersettings
rbm
invalidoperationexception
motordriver
winrt-async
jquery-ui-map
diazo
eeprom
nsundomanager
visual-leak-detector
jqzoom
youtube.net-api
designated-initializer
netduino
conditional-operator
google-local-search
web-widget
manuals
urlscan

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App