Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: cant request module without the extension #8061

Open
zlm11 opened this issue Oct 8, 2024 · 1 comment
Open

[Bug]: cant request module without the extension #8061

zlm11 opened this issue Oct 8, 2024 · 1 comment
Labels
bug Something isn't working need reproduction pending triage The issue/PR is currently untouched.

Comments

@zlm11
Copy link

zlm11 commented Oct 8, 2024

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:
1. add the extension ".tsx" to resolve.extensions in your rspack configuration
2. 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 the resolve.extensions. Here're some possible solutions: 1. add the extension ".tsx"toresolve.extensions in your rspack configuration 2. 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',
      },
    },
  };
@zlm11 zlm11 added bug Something isn't working pending triage The issue/PR is currently untouched. labels Oct 8, 2024
Copy link
Contributor

Hello @zlm11, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working need reproduction pending triage The issue/PR is currently untouched.
Projects
None yet
Development

No branches or pull requests

2 participants