Блог

В чем проблема: у меня есть index.tsx файл, в котором описывается компонент react, который я хочу создать на странице. Вот он (каталог этого кода есть ./src/pages/dashboard/panel/index.tsx ):

 import React from 'react'; import ReactDOM from 'react-dom'; import { TextField } from '@mui/material'; import ContainerNodecg from 'components/Container/Container';  const Component = () =gt; {  return (  lt;ContainerNodecggt;  lt;TextField /gt;  lt;TextField /gt;  lt;/ContainerNodecggt;  ); };  ReactDOM.render(  lt;React.StrictModegt;  lt;Component /gt;  lt;/React.StrictModegt;,  document.getElementById('app') );  export default Component;  

Но когда я запускаю webpack --watch , webpack не может разрешить путь импорта компонента, который существует в этом каталоге.
В tsconfig.json я установил baseUrl: src и с тех пор понятия не имею, почему webpack не видит этот компонент.

Полный каталог находится на скриншоте здесь

webpack.config.js является:

 const dashboardNames = ['panel'];  let dashboardEntries = {},  dashboardPlugins = []; dashboardNames.forEach((name) =gt; {  dashboardEntries[name] = [`./src/pages/dashboard/${name}/index.tsx`];  dashboardPlugins.push(  new HtmlWebpackPlugin({  filename: `${name}.html`,  template: `./src/pages/template.html`,  chunks: [name],  })  ); });  const dashboardConfig = {  entry: dashboardEntries,  output: {  filename: '[name].js',  path: path.join(__dirname, 'dashboard'),  },  plugins: dashboardPlugins,  devtool: 'source-map',  module: {  rules: [  {  test: /.css$/,  use: ['style-loader', 'css-loader'],  },  {  test: /.tsx?$/,  loader: 'ts-loader',  exclude: '/node_modules/',  },  ],  },  mode: 'production', };  

Что я делаю не так и как я должен сообщить webpack, где находится этот компонент? Это очень много.