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-redux. How to get updated store state on first application render
How to hide status bar (react native/iOS)?
[React][Router] onSubmit Form doesn't go to the page
Persisting events for a period of time with React / Redux
Add a success message after redirect in reactjs
react-router-dom usage in index.js
How do I change webpack dev server's default port from 8080 to a different port?
how can I cohabitate D3 and React.js or Vue.js?
Set default activeClassName for NavLink in React Router v4
Reactjs combine all the states to parent component
How to pass a function down the component's hierarchy without using props in React?
Meteor React createContainer rerender
Idiomatic way to chain redux state changes?
How to select unknown element in react native webview?
How to split props string in React?
TypeScript: Export React components as part of a namespace

Categories

HOME
pact
airflow
marie
ldap
ibm
gaussian
lithium
sms
sdk
samsung-gear-s2
box-api
mamp
react-select
infopath
background-image
filehelpers
ibatis
loader
gomobile
minimagick
lotusscript
inline-assembly
prepros
jira-zephyr
traveling-salesman
gulp-jshint
jboss-arquillian
mplab
visual-prolog
matlab-compiler
wunderground
azure-storage-files
stochastic-process
scalamock
linkurious
mediastream
blueimp
taiga
xmldom
cancan
dotnet-cli
r-commander
xamarin-test-cloud
rmq
trusted-computing
ios-keyboard-extension
computed-properties
toggleclass
dbi
ldd
networkstream
jira-agile
geokit
usps
stdlist
ooad
jersey-test-framework
web-performance
magnet-uri
roslyn-code-analysis
properties-file
sparkcore
vspackage
sicstus-prolog
skview
nfa
asp.net-2.0
method-overloading
breeze-sharp
worklight-appcenter
dotcmis
ccmenuitem
rails-migrations
webshim
sigma-grid-control
rssi
new-operator
power-management
fastcgi-mono-server
facebook-likebox
octokit
android-library
backbone-views
wordbreaker
biztalk-deployment
yii-components
sup
dancer
advanceddatagrid
maven-eclipse-plugin
apache-commons-email
parallel-python
lightopenid
azure-appfabric
arraycollection
p4.net
browser-state
linq-to-mysql
dojox.gfx
data-formats

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile