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 to call method of nested child component from parent component in React?
Nesting Redux Providers
How to pospone children evaluation in JSX
Clearing cache for log out in Relay.js app
Confirming Navigation with custom hash history does not work
undefined data from my action creator ? React/redux/thunk
Render a react element to a hidden area for measurement
Cannot read property 'panHandlers' of undefined
Webpack trying to hot reload react
react auto escapes my html tags
How could I convert a Mobx observable object into a string
can we reload the same component with different urls?
React Native alignSelf center and stretch to maxWidth?
combineReducers converts Immutable Map into plain JS object
undefined is not an object (evaluating 'this.props.replaceRoute(_Routes2.default.Home())')
“CSS module is undefined” error when using react-css-modules with react-router with locale and webpack

Categories

HOME
drupal
oop
model-view-controller
popover
liquibase
readdir
ebay-api
conceptual
watson-iot
lithium
sms
angularjs-ng-repeat
oms
wowza
osrm
fastreport
jinja2
minimum
sha1
reportlab
vivado-hls
civicrm
ajaxcontroltoolkit
my.cnf
workflow-foundation
proof-general
boosting
bytebuffer
jms-topic
directions
availability
openvms
incapsula
dom4j
mkdir
flex3
var
jslider
server-side-swift
icu
quartz
test-kitchen
android-doze-and-standby
yank
jcifs
pyautogui
qt3d
lattice
android-music-player
android-tabs
papyrus
netlink
python-rq
nd4j
salesforce-service-cloud
datamodel
nslocalizedstring
instabug
askbot
markerspiderfier
gtkwave
gnu-sort
bioconductor
gitk
taverna
notice
textblob
hexagonal-tiles
android-filterable
sparkcore
eggplant
vspackage
glog
accpac
touch-typing
kss
unityvs
livescript
msdropdown
rda
mdp
logo-lang
php-amqplib
netbeans-plugins
xcode5.1
octokit
azure-pack
typography
qgraphicsscene
ftpwebrequest
netbiscuits
mysql-connector
response-time
miniport
data-formats
cstring
office-2003
tracd

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