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 WebPack Live Update not working
Change language to “+2 more” link in react-big-calendar
TypeError: 'undefined' is not a function (evaluating 'Object.entries(opts)') only on safari
Apollo mutation not appearing in props
What is the best way to apply a default set of values on an array in redux, but only on initial load?
React Script Proxy not working
I am getting an “Invalid Host header” message, when running my React app in a Webpack dev server on Cloud9.io
How do I Make and Use React components?
React-Router V4 - server rendering works only on one machine
Redux Form can't fill initialValues
How to reduce webpack bundle in development mode?
onScroll not getting triggered on container in React
Warning: Failed prop type: Game: prop type `game` is invalid; it must be a function, usually from React.PropTypes
issue hosting on firebase with React-Redux app?
How to convey error information through Relay render when the response includes errors and data?
Unable to trigger Redux action after ajax

Categories

HOME
reactjs
msbuild
system-calls
fortran
cluster-analysis
packet
azure-eventhub
opengl-es
snmp
css-selectors
jshell
docker-compose
servicenow
zabbix
ejb-3.0
gcloud
ndepend
fine-uploader
derby
saucelabs
react-select
nsoperation
ibatis
datasource
minimagick
screen-scraping
windows-mobile
windows-10-mobile
csproj
cqlsh
openoffice-impress
login-required
spring-oauth2
circle
favorites
webclient
machine-code
certbot
mkdir
iterm2
nsdateformatter
julia-jump
delphi-xe
uitextview
firefox-developer-edition
encoder
reqif
mef
spring-data-commons
g77
gige-sdk
sp
nservicebus6
optional-parameters
firebase-polymer
glade
jspx
objectify
vitamio
boost-propertytree
jmap
paypal-subscriptions
innertext
vanilla-forums
tess4j
avd
minko
screen-lock
aiff
launcher
grunt-contrib-connect
selenium-grid2
disparity-mapping
pyalgotrade
django-tests
facebook-likebox
pechkin
stringstream
pageload
cron4j
states
android-memory
filedialog
systrace
nserror
maven-eclipse-plugin
yii-cactiverecord
moss2007-security
norton
mysql-logic
konsole
pixel-bender

Resources

Encrypt Message