Блог

Попытка использовать css-загрузчик с react-redux и выдать мне несколько ошибок при вводе модуля webpack.config.js (код):

   module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
module.exports = {
      module: {
        rules: [
          {
            test: /.css$/i,
            use: {loader:"css-loader"},
          },
        ],
      },
    };
 

или , я попытался:

 module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
 module: {
        rules: [
          {
            test: /.css$/i,
            use: {loader:"css-loader"}
          }
        ]
      },
};

 

С тем же результатом
ошибка :

 Module parse failed: Unexpected token (32:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   render() {
|     return (
>       <Provider store={store}>
|         <AlertProvider template={AlertTemplate} {...alertOptions}>
|           <Router>
 @ ./leadmanager/frontend/src/index.js 1:0-35

webpack 5.53.0 compiled with 1 error in 204 ms
 

и реагировать-файл Redux:

 import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

import { Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';

import Header from './layout/Header';
import Dashboard from './leads/Dashboard';
import Alerts from './layout/Alerts';
import Login from './accounts/Login';
import Register from './accounts/Register';
import PrivateRoute from './common/PrivateRoute';

import { Provider } from 'react-redux';
import store from '../store';
import { loadUser } from '../actions/auth';

// Alert Options
const alertOptions = {
  timeout: 3000,
  position: 'top center',
};

class App extends Component {
  componentDidMount() {
    store.dispatch(loadUser());
  }

  render() {
    return (
      <Provider store={store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Router>
            <Fragment>
              <Header />
              <Alerts />
              <div className="container">
                <Switch>
                  <PrivateRoute exact path="/" component={Dashboard} />
                  <Route exact path="/register" component={Register} />
                  <Route exact path="/login" component={Login} />
                </Switch>
              </div>
            </Fragment>
          </Router>
        </AlertProvider>
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

 

Я действительно не понимаю ,почему это происходит, и мне интересно, может ли кто-нибудь объяснить мне, как устранить эту ошибку или как css-загрузчик webpack влияет на объект Redux .Thx!!

Похоже, вы переписываете правила webpack, в частности заменяете *.js на *.css. Укажите несколько в одном массиве.

 module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.css$/i,
        use: {loader:"css-loader"},
      },
    ],
  },
};