Webpack extensions configuration is ignored

When using it like this, in a project that contains typescript files (.tsx compiles to .jsx)

const UniversalComponent = universal(({ page }) => import(`./pages/${page}`), {
    minDelay: 500,
    loading: Loading,
    error: Err
})

Webpack tries to bundle all the files in that directory, including the .tsx files, even though there is no loader defined for it and the extensions is defined as

    resolve: {
        extensions: ['.jsx', '.js', '.sass', '.scss'],
    },

To ignore the compile errors, I temporarily added the ignore-loader for .tsx files. Is there a way to configure this behaviour. Should I open this issue on webpack?

[Kurounin]

After having a look at ContextModule, it seems webpack tries to load a dependency first without an extension (./Home), then with the extensions found in that folder (./Home.jsx, ./Home.tsx).

When using ContextReplacementPlugin regex option to filter the dependencies that are loaded I was left only with ./Home.jsx which resulted in a chunk named pages/Home-jsx that couldn’t be used.

To workaround the issue I modified the regex to keep only the dependency without an extension (which actually resolves to the .jsx file according to my webpack config):

        new webpack.ContextReplacementPlugin(
            /^\.\/pages$/,
            /[^.]{4}$/
        ),

Using the above regex I get the desired outcome

                Asset       Size  Chunks                    Chunk Names
        pages/Home.js    39.7 kB       0  [emitted]         pages/Home
      pages/Market.js    2.66 kB       1  [emitted]         pages/Market
    pages/NotFound.js    1.21 kB       2  [emitted]         pages/NotFound
              main.js    2.72 MB       3  [emitted]  [big]  main

Thanks for guiding me in the right direction.

[faceyspacey]

glad to hear it! …been recommending this approach for a while, and you’re the first to finally prove it works.