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

Can't create WebStorm React project
React app only at production. Error: Unexpected token < in JSON at position 0
ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
react-route display blank page
react native router flux: override android hardware back key
can't type in input fields when using material-ui-redux-form due to re rendering
undefined within the react component - but not in action
Updating a nested state in redux using Object.assign
Typescript input onchange event.target.value
ReactComponentTreeHook unexpected : Webpack 2
ReactJS: Uncaught TypeError: Cannot read property 'subscribe' of undefined(…)
Draft-js apply inline-styles to readonly editor
About injectScript in WebView for React-Native
My flux store gets re-instantiated on reload
React Mobx - component not updating after store change
Property not found - flowtype / react, using this

Categories

HOME
optimization
azure-documentdb
postgresql-9.3
gaussian
query-string
grid
swap
cdn
obd-ii
cracking
apache-httpclient-4.x
suitecrm
dynamics-crm-2011
guidewire
mongodb-replica-set
samba
google-street-view
django-rest-auth
include-path
scalatest
mongoose-im
adobe-captivate
android-6.0-marshmallow
formtastic
kundera
xlib
openoffice-impress
textview
exacttarget
ibm-bpm
slim-lang
angularjs-resource
azure-vm-scale-set
device-driver
stencyl
stdin
nscollectionview
ninja-forms
firefox-developer-edition
bootstrap-carousel
gradlew
ack
line-endings
xmldom
react.rb
ionic2-select
monaca
bioperl
nservicebus6
vertex-shader
ownership
qudpsocket
cedar-bdd
db2-zos
nsoperationqueue
mod
factorization
angular-promise
javapackager
database-project
log-analysis
tinymce-plugins
genero
nfa
beagleboard
touch-typing
iphone-6
dojox.grid
nsurlrequest
cocos2d-x-2.x
powershell-v1.0
worklight-appcenter
indic
visual-studio-setup-proje
hotlinking
rssi
nodeunit
mongoid4
mysql-error-1146
tlbimp
ojb
panelgrid
asp.net-4.0
dd4t
coinbase-php
codeigniter-form-helper
auctex
screensharing
idoc
github-archive
nsscrollview
jqueryi-ui-buttonset
pinchzoom
zend-validate
cherokee
isgl3d
linq-to-mysql
dynamic-scope
atmega16
ffdshow
html-help-workshop
managed-code
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