App.jsx: 11 Uncaught TypeError: Невозможно прочитать свойство 'TodoComponent' из неопределенного

Question

Я пытаюсь стилизовать какой-нибудь компонентactjs. Моя консоль разработки браузера возвращает мне эту ошибку:

App.jsx: 11 Uncaught TypeError: Невозможно прочитать свойство 'TodoComponent' из не определено на App.render (App.jsx: 11)

Я пытаюсь импортировать со следующими синтаксисами:

App.jsx:

import {styles} from ...
import {styles as styles} from...

styles.js:

export default styles... 
export styles...

Весь отказ.

Вот моя древовидная структура:

src content directory - ls :
App.jsx  styles.js

вот мой App.jsx

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}>
(...)

вот мой style.js:

    var TodoComponent = {
      width: "300px",
      margin: "30px auto",
      backgroundColor: "#44014C",
      minHeight: "200px",
      boxSizing: "border-box"
    };

    var styles = {


    TodoComponent: TodoComponent,
( other styles...) 
    };

Вот мой webpack.config.js:

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
}
};

config.babelrc:

{
  "presets": ["env", "react", "stage-0"]
}

Answer 1

Вам нужно его экспортировать:

var TodoComponent = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", minHeight: "200px", boxSizing: "border-box" };

export const styles = { TodoComponent: TodoComponent, };