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

State appears as empty object in redux dev tools
Failing Typescript imports in unit tests
Bootstrap 4 NavBar with React <Link/> component
How to get the width of a react element
React-soundloud-embed error
How to make component stick to bottom in ScrollView but still alow other content to push it down
Enzyme: simple .to.have not working
ReactJS: Best way to check state values and update render based on state?
Does treetabular support remote child nodes?
Setting distance between X values
Add a prefix into routes on ReactJS
How to pass a value to my parent React component from input type?
why my setTimeout function is not work while I use react-native and react-router-native
React Native - pass class to component as props
mapDispatchToProps with typescript is being difficult
react-form: How to use multiple forms in combineReducers?

Categories

HOME
indexing
pelican
casting
singleton
desktop-application
captcha
camunda
android-notifications
sha1
appsettings
simd
civicrm
glibc
vala
javaagents
google-drive-android-api
oracle-golden-gate
my.cnf
request-uri
delphi-2010
openoffice-impress
arp
drawrect
tikz
mplab
choco
contextmenustrip
unity3d-5
gem-fury
armadillo
azure-web-roles
sknode
mtm
datagridviewcombobox
binary-decision-diagram
colorbox
amazon-fire-tv
togglebutton
activeandroid
react.rb
senti-wordnet
dynatable
acceleo
apache-commons-cli
recursive-query
blitz3d
hfp
angularfire
cexception
code-translation
hana-sql-script
jquery-draggable
nmock
transparentproxy
radgrid
accpac
nsq
tigase
cocos2d-x-2.x
pnunit
opencobol
facebook-java-api
android-jack-and-jill
autofilter
jfilechooser
randomaccessfile
8-puzzle
pechkin
aspnet-compiler
wpa
stringstream
pageload
ntdll
metapost
optimistic-concurrency
jmesa
maven-eclipse-plugin
umfpack
xhtmlrenderer
designated-initializer
llblgen
text-manipulation
nstoolbar
database-agnostic
mysql-pconnect
projectgen
high-load

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile