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

Creating onClick event for datalist option in React
How to make a specific peace of code visible when there is a match on a Route? react-router
Saga doesn't end when canceled
How to force update data cache in react-apollo?
How to make fixed-data-table React fixed columns to both left and right side?
Sharepoint:Thread was being aborted Exception web service
redux-form unable to type values in fields
React Router v3 per flow bundle splitting
progressive web app site cannot be installed: no icon available to display
react doesn't render components with changes even when state changes
Should form tags be used in React if I am just calling a function on submit?
Debugging “react-redux” application?
Diagnosing RangeError: Maximum call stack size exceeded in React KeyEscapeUtils
Update state by changing an entire object within state array
browserHistory not Moving to New Component in React
Reactjs modal height change

Categories

HOME
postgresql
alasql
display
blob
opencv4android
highmaps
arcgis
where
pandoc
mailchimp
servicenow
ionic-native
segmentation-fault
angularjs-ng-repeat
phpexcel
ng2-charts
eclipse-orion
console-application
nsoperation
owncloud
simd
datasource
vala
concatenation
gsuite
apdu
ppp
windowserror
chartist.js
aws-certificate-manager
mongoose-im
adobe-captivate
boosting
launchd
emr
osgi-bundle
xlib
microstrategy
apache-falcon
wit-ai
azure-vm-scale-set
form-fields
stencyl
mediastream
server-side-swift
mixed-models
susy
file-descriptor
directadmin
definition
nshttpurlresponse
hdpi
runtime-permissions
cancan
jcifs
ajv
sp
seyren
opticalflow
dmalloc
wicketstuff
turbolinks
zsh-completion
scikit-image
universe
deck.js
bytearray
user-profile
phpdesigner
windows-kernel
callfire
android-networking
waterline
touch-typing
illegalargumentexception
mind-manager
gnip
indic
rssi
slimscroll
.net-reflector
xcode6.1-gm-seed
scidb
octokit
stringstream
dynamic-expresso
wordbreaker
windows-scheduler
simplemembership
idoc
winrt-async
jquery-ui-map
dancer
pdf-reader
bash4
object-tag
meego-harmattan
hs-err
carbon-emacs
data-formats
ihtmldocument2
ffdshow
wtsapi32
qlibrary
unauthorized
j++
moores-law

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