小编acu*_*145的帖子

我有一个动态加载组件的函数如下：

export const loader = (file: string) => {
  let pagePath = file.replace(/^views/, 'pages');
  pagePath = pagePath.replace(/\/index$/, '');

  const LazyComponent = lazy(
    () =>
      import(
        /* webpackChunkName: "dynamic_page" */ `@/${pagePath}/index.tsx`
      ),
  );

  return (
    <Suspense fallback={<Loading />}>
      <LazyComponent />
    </Suspense>
  );
};

export const Loader: React.FC<{ path: string }> = ({ path }) => {
  return (
    <ErrorBoundary>
      {loader(path)}
    </ErrorBoundary>
  );
};

当传递错误的路径时，动态导入部分会抛出错误：

caught Error: Cannot find module './pages/modules/info/priceConfig/index.tsx'

为什么 ErrorBoundary 组件不处理错误？如果我想捕获它并返回默认组件，该怎么办？

我正在使用css-loader并出现以下错误：

./src/pages/home/index.js中的错误找不到
模块：错误：无法解析'/ Users / jian / Documents / sina / webpack-barbarian-test'
@ ./src/中的'css-loader' pages / home / index.js 2：0-20
@ multi ../webpack-barbarian/node_modules/webpack-dev-server/client？http：// localhost ../webpack-barbarian/node_modules/webpack/hot/dev-server.js ./src/pages/home/index.js

./src/pages/home/index.js：

import $ from 'jQuery'
import './style.css'

$("#container").html('This is a test file, 1')

webpack.config.js：

{
    mode: 'development',
    entry: {
        home: './src/pages/home/index.js'
    },
    output: {
        path: '/Users/jian/Documents/sina/webpack-barbarian-test/dist',
        filename: '[name].js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.js', 'jsx', '.vue', '.json'],
        alias: {}
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader',
            include: ['/Users/jian/Documents/sina/src', '/Users/jian/Documents/sina/test'],
            options: …