[Bug]: cant request module without the extension

System Info

System: OS: macOS 14.4.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 464.98 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.20.4 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.7.0 - /usr/local/bin/npm pnpm: 8.15.4 - /usr/local/bin/pnpm Browsers: Chrome: 129.0.6668.90 Edge: 129.0.2792.79 Safari: 17.4.1 npmPackages: @rspack/cli: ^1.0.5 => 1.0.5 @rspack/core: ^1.0.5 => 1.0.5

Details

I try to migrate from webpack to rspack, when I start dev server got this error,however I already config '.tsx' in resolve.extensions. **Found module './src/index.tsx'. However, it's not possible to request this module without the extension if its extension was not listed in the resolve.extensions. Here're some possible solutions:

add the extension ".tsx" to resolve.extensions in your rspack configuration
use './src/index.tsx' instead of './src'**

Reproduce link

No response

Reproduce Steps

I try to migrate from webpack to rspack, when i start dev server got this error: Found module './src/index.tsx'. However, it's not possible to request this module without the extension if its extension was not listed in theresolve.extensions`. Here're some possible solutions:

add the extension ".tsx" to resolve.extensions in your rspack configuration

use './src/index.tsx' instead of './src'` but I already config '.tsx' in resolve.extensions,I dont know why this occur,how I can fix this? This is my config:

{
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
bail: isEnvProduction,
devtool: isEnvProduction
  ? shouldUseSourceMap
    ? 'source-map'
    : false
  : isEnvDevelopment && 'cheap-module-source-map',
entry: {
  'main': paths.appIndexJs,
},
output: {
  path: isEnvProduction ? paths.appBuild : paths.appBuild,
  pathinfo: isEnvDevelopment,
  filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/[name]/bundle.js',
  chunkFilename: isEnvProduction
    ? 'static/js/[name].[contenthash:8].chunk.js'
    : isEnvDevelopment && 'static/js/[name].chunk.js',
  publicPath: paths.publicUrlOrPath,
  devtoolModuleFilenameTemplate: isEnvProduction
    ? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
    : isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
optimization: {
  minimize: isEnvProduction,
  minimizer: [
    new rspack.SwcJsMinimizerRspackPlugin({
      parallel: true,
      terserOptions: {
        parse: {
          ecma: 8,
        },
        compress: {
          ecma: 5,
          warnings: false,
          comparisons: false,
          inline: 2,
        },
        mangle: {
          safari10: true,
        },
        keep_classnames: isEnvProductionProfile,
        keep_fnames: isEnvProductionProfile,
        output: {
          ecma: 5,
          comments: false,
          ascii_only: true,
        },
        sourceMap: shouldUseSourceMap,
      },
    }),
    new rspack.LightningCssMinimizerRspackPlugin({
      minimizerOptions: {
        preset: ['default', { minifyFontValues: { removeQuotes: false } }],
      },
    }),
  ],
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    cacheGroups: {
      common: {
        priority: 5,
        chunks: 'all',
        name: 'common',
        minSize: 0,
        minChunks: 2,
      },
      vendors: {
        priority: 1,
        chunks: 'initial',
        name: 'vendors',
        test: /[\\/]node_modules[\\/]/,
        enforce: true
      },
    },
  },
  runtimeChunk: isEnvDevelopment ? 'single' : {
    name: (entrypoint) => `runtime-${entrypoint.name}`,
  },
},
resolve: {
  modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
  extensions: [
    '.web.mjs',
    '.mjs',
    '.web.js',
    '.js',
    '.web.ts',
    '.ts',
    '.web.tsx',
    '.tsx',
    '.json',
    '.web.jsx',
    '.jsx',
  ],
  alias: {
    '@home': paths.appSrc,
    'react-native': 'react-native-web',
    ...(isEnvProductionProfile && {
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    }),
    ...(modules.webpackAliases || {}),
  },
},
module: {
  rules: [
    {
      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
      use: [
        {
          loader: path.resolve('loaders/srcset-loader.js'),
          options: {
            outputPath: 'static/responsive',
            replaceSymbol: ['@'],
          },
        },
      ],
      include: paths.responsivePath,
    },
    {
      oneOf: [
        {
          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
          type: 'asset',
          parser: {
            dataUrlCondition: {
              maxSize: imageInlineSizeLimit,
            },
          },
          generator: {
            filename: 'static/media/[name].[contenthash:8][ext]',
          },
        },
        {
          test: [/\.ttf$/, /\.woff$/, /\.woff2$/, /\.eot$/],
          type: 'asset/resource',
          generator: {
            filename: 'static/media/[name].[contenthash:8][ext]',
          },
        },
        {
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          include: paths.appSrc,
          loader: require.resolve('babel-loader'),
          options: {
            customize: require.resolve('babel-preset-react-app/webpack-overrides'),

            plugins: [
              [
                require.resolve('babel-plugin-named-asset-import'),
                {
                  loaderMap: {
                    svg: {
                      ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                    },
                  },
                },
              ],
            ],
            cacheDirectory: true,
            cacheCompression: false,
            compact: isEnvProduction,
          },
        },
        {
          test: /\.(js|mjs)$/,
          exclude: /@babel(?:\/|\\{1,2})runtime/,
          loader: require.resolve('babel-loader'),
          options: {
            babelrc: false,
            configFile: false,
            compact: false,
            presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],
            cacheDirectory: true,
            cacheCompression: false,
            sourceMaps: shouldUseSourceMap,
            inputSourceMap: shouldUseSourceMap,
          },
        },
        {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
          }),
          sideEffects: true,
        },
        {
          test: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: {
              getLocalIdent: getCSSModuleLocalIdent,
            },
          }),
        },
        {
          test: sassRegex,
          exclude: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            'sass-loader',
          ),
          sideEffects: true,
        },
        {
          test: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: {
                namedExport: false,
                localIdentName: '[folder]-[local]-[contenthash:base64:5]',
                exportLocalsConvention: 'as-is',
              },
            },
            'sass-loader',
          ),
        },
      ],
    },
  ],
},
plugins: [
  new ESLintPlugin({
    cache: true,
    formatter: require.resolve('react-dev-utils/eslintFormatter'),
    eslintPath: require.resolve('eslint'),
    resolvePluginsRelativeTo: __dirname,
  }),
  new NodePolyfillPlugin(),
  new HtmlWebpackPlugin(
    Object.assign(
      {},
      {
        inject: true,
        template: paths.appHtml,
        chunks: [= 'main'],
      },
      isEnvProduction
        ? {
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            },
          }
        : undefined,
    ),
  ),
  isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
  new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
  new ModuleNotFoundPlugin(paths.appPath),
  new rspack.DefinePlugin(env.stringified),
  isEnvDevelopment && new rspack.HotModuleReplacementPlugin(),
  isEnvDevelopment && new CaseSensitivePathsPlugin(),
  isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
  isEnvProduction &&
    new rspack.CssExtractRspackPlugin({
      filename: 'static/css/[name].[contenthash:8].css',
      chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
    }),
  new RspackManifestPlugin({
    fileName: 'asset-manifest.json',
    publicPath: paths.publicUrlOrPath,
    generate: (seed, files, entrypoints) => {
      const manifestFiles = files.reduce((manifest, file) => {
        manifest[file.name] = file.path;
        return manifest;
      }, seed);
      const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));

      return {
        files: manifestFiles,
        entrypoints: entrypointFiles,
      };
    },
  }),
  new rspack.IgnorePlugin({
    contextRegExp: new RegExp('/^\.\/locale$/'),
    resourceRegExp: new RegExp('/moment$/'),
  }),
  isEnvProduction &&
    new GenerateSW({
      clientsClaim: true,
      exclude: [/\.map$/, /asset-manifest\.json$/],
      navigateFallback: paths.publicUrlOrPath + 'index.html',
      navigateFallbackDenylist: [
        new RegExp('^/_'),
        new RegExp('/[^/?]+\\.[^/]+$'),
      ],
    }),
  useTypeScript &&
    new ForkTsCheckerWebpackPlugin({
      typescript: resolve.sync('typescript', {
        basedir: paths.appNodeModules,
      }),
      async: isEnvDevelopment,
      typescript: {
        configFile: paths.appTsConfig,
      },
      formatter: isEnvProduction ? typescriptFormatter : undefined,
    }),
].filter(Boolean),
devServer: {
  port: 8080,
  client: {
    logging: 'error',
  },
},
};

web-infra-dev / rspack