Задать вопрос

5465

Ответы пользователя по тегу Webpack

  • Как исправить ошибку "Module build failed" для module scss в React Ts проекте?

    @5465
    Ошибка "Module build failed" означает, что Webpack не смог скомпилировать ваш модуль SCSS в CSS. В этой конкретной ошибке проблема заключается в том, что свойство 'modules' указано в конфигурации загрузчика 'style-loader', но оно не поддерживается.

    Чтобы исправить эту ошибку, вам нужно удалить свойство 'modules' из конфигурации загрузчика 'style-loader'. Также вам не нужно указывать свойство 'modules' для загрузчиков 'css-loader' и 'sass-loader', потому что вы уже используете плагин 'typed-scss-modules' для генерации типизированных модулей SCSS.

    Измените ваш конфигурационный файл webpack.config.js следующим образом:

    {
  test: /\.s[ac]ss$/i,
  use: [
    {
      loader: 'style-loader',
      options: {
        sourceMap: true,
      },
    },
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        modules: {
          exportLocalsConvention: 'camelCase',
        },
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          parser: 'postcss-js',
        },
        execute: true,
      },
    },
  ],
},


    Вы также можете изменить свойство 'exportLocalsConvention' на 'asIs', если вы хотите сохранить имена классов CSS без изменений.

    После этого перезапустите сборку вашего проекта и должно все заработать.
    Ответ написан
    Комментировать
    Комментировать

  • Почему в webpack module federation, при добавлении get параметра в url состояние redux сбрасывается?

    @5465
    Проблема может быть связана с тем, что при добавлении get параметра в URL компонент Dashboard перерендеривается и создается новый экземпляр Redux store для этого компонента, который не содержит сохраненных данных.

    Для решения этой проблемы необходимо сохранять состояние Redux store вне компонента и передавать его внутрь компонента при каждом рендере. Для этого можно использовать React Context API.

    В главном приложении создайте контекст:

    // appContext.js
import React from 'react';

export const AppContext = React.createContext({});


    В главном приложении оберните ваш компонент в провайдер контекста и передайте в контекст текущее состояние Redux store:

    // App.js
import { AppContext } from './appContext';

function App() {
  const [store, setStore] = useState(initialState); // начальное состояние Redux store

  return (
    <AppContext.Provider value={{ store, setStore }}>
      <Routes>
        <Route path='items' element={<Items />} />
      </Routes>
    </AppContext.Provider>
  );
}


    В компоненте Dashboard микрофронта, вы можете получить текущее состояние Redux store через контекст и использовать его для отображения данных:

    // Dashboard.js
import React, { useContext } from 'react';
import { useSearchParams } from 'react-router-dom';
import { AppContext } from '../appContext';

function Dashboard() {
  const { store } = useContext(AppContext);
  const [searchParams] = useSearchParams();

  // получаем данные из текущего состояния Redux store
  const items = store.items;

  // обновляем данные в Redux store, если это необходимо
  if (searchParams.get('update')) {
    const newItems = await fetchItems(); // получаем новые данные
    setStore(prevState => ({ ...prevState, items: newItems })); // обновляем состояние Redux store
  }

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}


    Теперь, когда вы добавляете параметр update в URL, компонент Dashboard не будет перерендериваться и состояние Redux store не будет сбрасываться, потому что вы сохраняете его в контексте.
    Ответ написан
    1 комментарий
    1 комментарий