While attempting to style a ReactJS component, I encountered an error in my browser's development console:
App.jsx:11 Uncaught TypeError: Cannot read property 'TodoComponent' of undefined at App.render (App.jsx:11)
I have tried importing using the following syntaxes:
In App.jsx:
import {styles} from ...
import {styles as styles} from...
In styles.js :
export default styles...
export styles...
All have failed.
Here is my directory tree structure:
src content directory - ls :
App.jsx styles.js
Here is my App.jsx code snippet:
import React from "react";
import { render } from "react-dom";
// Import the styles
import {styles} from "./styles.js";
class App extends React.Component {
render() {
return (
<div style={styles.TodoComponent}>
(...)
And here is my style.js code snippet:
var TodoComponent = {
width: "300px",
margin: "30px auto",
backgroundColor: "#44014C",
minHeight: "200px",
boxSizing: "border-box"
};
var styles = {
TodoComponent: TodoComponent,
( other styles...)
};
This is my webpack.config.js configuration:
var webpack = require("webpack") ;
var path = require("path") ;
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports= {
mode: "development",
devtool : "source-map",
context : __dirname + "/src",
entry : { app : __dirname + "/src/App.jsx" },
output : { path: path.resolve(__dirname, "public/"),
filename : "frontend.bundle.js"
},
module: {
rules: [ {
test: /\.js|jsx$/,
exclude: /node_modules/,
include: path.resolve(__dirname, "src"),
use: [
{
loader: 'babel-loader',
options: {
presets: ["es2015", "stage-1", "react"]
}
}
]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]}
]},
optimization : {
splitChunks: {
chunks: "async",
minSize: 3000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: "~",
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
devServer: {
proxy: {
"/api": "http://localhost:7000"
},
contentBase: path.resolve(__dirname, "public/"),
open : true
}
};
Configuration in config.babelrc:
{
"presets": ["env", "react", "stage-0"]
}