Dynamic imports not working with Webpack 4 + React + @loadable/component

Question

I have a project that uses React with Webpack 4, Babel and TypeScript. I'm trying to have code splitting and installed @loadable/component for that. Unfortunately when I call loadable(() => import(...)) to get one of my pages in a different chunk, webpack or babel doesn't seem to recognize that, nothing happens and I keep with a single JS file. Searched docs, other questions at S.O but nothing seems to work =\

Here's my .tsx file:

import loadable from "@loadable/component";

const TextDisplayPage = loadable(() => import("./pages/textDisplayPage"));

const AppRoutes = () => (
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route
      exact
      path="/introduction"
      render={() => (
        <TextDisplayPage
          textsToDisplay={DisplayTexts.INTRODUCTION}
          continueButtonLinkURL="/character"
        />
      )}
    />
  </Switch>
);

My .babelrc file:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@loadable/babel-plugin", "@babel/plugin-syntax-dynamic-import"]
}

Part of my webpack.config.js file (don't know if that's enough information but if it's not just let me know) :

/*...*/
module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: [/node_modules/],
        use: ["babel-loader", "ts-loader"],
      }
    ]
/*...*/

Any help is appreciated. Thanks in advance!