How to dynamically load a page through react router?

Question

React

There are files: index.jsx, alias.jsx
From Router I try to load the Alias ​​component (alias.jsx), but it gives an error

index.jsx

.....

const Alias2 = React.lazy(() => import('./Alias'));

export default function(props) {
  return (
    <Router>
      <TestLinks />
      <Switch>
        <Route path="/about">
          <Aboute/>
        </Route>
        <Route exact path="/podkatalog/:alias.php" component={Alias} />
      </Switch>
    </Router>
  );
}

function Alias(props){
  
  return (
    <div>
      
      <Suspense fallback={<div>Загрузка...</div>}>
        <Alias2 />
      </Suspense>
    </div>
  )
}

webpack says:

...
module:{
  	rules:[
  		{
        test: /\.js|jsx$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
            	[	'@babel/preset-env', 
            	], [
            		'@babel/preset-react'
            	]
            ],
            plugins: [
            	"@babel/plugin-syntax-dynamic-import"
            ]
          }
        }
      },
...

webpack generates a 1.js file that contains the Alias ​​component, but when you click on the link, it gives errors