title: react-typescript - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
body: <p>I ran into an error while setting up webpack to work with React and TypeScript:</p>
  <pre class="lang-none prettyprint-override"><code>You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  | import * as React from 'react';
  |
  &gt; const Page404: React.SFC = () =&gt; (
  |   &lt;div&gt;Page404&lt;/div&gt;
  | );
  </code></pre>
  <p>I added <code>@babel/preset-env</code> in the <code>babel-presets</code> section of package.json.</p>
  <p>Here's my code:</p>
  <h3>package.json</h3>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;pay&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@babel/core&quot;: &quot;7.5.5&quot;,
      &quot;@babel/plugin-syntax-dynamic-import&quot;: &quot;^7.2.0&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.6.0&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/preset-typescript&quot;: &quot;^7.6.0&quot;,
      &quot;@svgr/webpack&quot;: &quot;4.3.2&quot;,
      &quot;@types/axios&quot;: &quot;^0.14.0&quot;,
      &quot;@types/jest&quot;: &quot;^24.0.18&quot;,
      &quot;@types/lodash&quot;: &quot;^4.14.138&quot;,
      &quot;@types/node&quot;: &quot;12.7.3&quot;,
      &quot;@types/react&quot;: &quot;16.9.2&quot;,
      &quot;@types/react-dom&quot;: &quot;16.9.0&quot;,
      &quot;@types/react-redux&quot;: &quot;^7.1.2&quot;,
      &quot;@types/react-router&quot;: &quot;^5.0.3&quot;,
      &quot;@types/react-router-dom&quot;: &quot;^4.3.5&quot;,
      &quot;@types/redux&quot;: &quot;^3.6.0&quot;,
      &quot;@types/redux-actions&quot;: &quot;^2.6.1&quot;,
      &quot;@types/redux-devtools-extension&quot;: &quot;^2.13.2&quot;,
      &quot;@types/redux-thunk&quot;: &quot;^2.1.0&quot;,
      &quot;@types/styled-components&quot;: &quot;^4.1.18&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;1.13.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;1.13.0&quot;,
      &quot;axios&quot;: &quot;^0.19.0&quot;,
      &quot;axios-extensions&quot;: &quot;^3.0.6&quot;,
      &quot;babel-eslint&quot;: &quot;10.0.2&quot;,
      &quot;babel-jest&quot;: &quot;^24.8.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.0.6&quot;,
      &quot;babel-plugin-named-asset-import&quot;: &quot;^0.3.3&quot;,
      &quot;babel-preset-react-app&quot;: &quot;^9.0.1&quot;,
      &quot;camelcase&quot;: &quot;^5.2.0&quot;,
      &quot;case-sensitive-paths-webpack-plugin&quot;: &quot;2.2.0&quot;,
      &quot;css-loader&quot;: &quot;2.1.1&quot;,
      &quot;dayjs&quot;: &quot;^1.8.16&quot;,
      &quot;dotenv&quot;: &quot;6.2.0&quot;,
      &quot;dotenv-expand&quot;: &quot;4.2.0&quot;,
      &quot;eslint&quot;: &quot;^6.1.0&quot;,
      &quot;eslint-config-react-app&quot;: &quot;^5.0.1&quot;,
      &quot;eslint-loader&quot;: &quot;2.2.1&quot;,
      &quot;eslint-plugin-flowtype&quot;: &quot;3.13.0&quot;,
      &quot;eslint-plugin-import&quot;: &quot;2.18.2&quot;,
      &quot;eslint-plugin-jsx-a11y&quot;: &quot;6.2.3&quot;,
      &quot;eslint-plugin-react&quot;: &quot;7.14.3&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;^1.6.1&quot;,
      &quot;file-loader&quot;: &quot;3.0.1&quot;,
      &quot;fs-extra&quot;: &quot;7.0.1&quot;,
      &quot;html-webpack-plugin&quot;: &quot;4.0.0-beta.5&quot;,
      &quot;identity-obj-proxy&quot;: &quot;3.0.0&quot;,
      &quot;is-wsl&quot;: &quot;^1.1.0&quot;,
      &quot;jest&quot;: &quot;24.8.0&quot;,
      &quot;jest-environment-jsdom-fourteen&quot;: &quot;0.1.0&quot;,
      &quot;jest-resolve&quot;: &quot;24.8.0&quot;,
      &quot;jest-watch-typeahead&quot;: &quot;0.3.1&quot;,
      &quot;lodash&quot;: &quot;^4.17.15&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;0.5.0&quot;,
      &quot;optimize-css-assets-webpack-plugin&quot;: &quot;5.0.3&quot;,
      &quot;pnp-webpack-plugin&quot;: &quot;1.5.0&quot;,
      &quot;postcss-flexbugs-fixes&quot;: &quot;4.1.0&quot;,
      &quot;postcss-loader&quot;: &quot;3.0.0&quot;,
      &quot;postcss-normalize&quot;: &quot;7.0.1&quot;,
      &quot;postcss-preset-env&quot;: &quot;6.7.0&quot;,
      &quot;postcss-safe-parser&quot;: &quot;4.0.1&quot;,
      &quot;react&quot;: &quot;^16.9.0&quot;,
      &quot;react-app-polyfill&quot;: &quot;^1.0.2&quot;,
      &quot;react-dev-utils&quot;: &quot;^9.0.3&quot;,
      &quot;react-dom&quot;: &quot;^16.9.0&quot;,
      &quot;react-redux&quot;: &quot;^7.1.1&quot;,
      &quot;react-router&quot;: &quot;^5.0.1&quot;,
      &quot;react-router-dom&quot;: &quot;^5.0.1&quot;,
      &quot;redux&quot;: &quot;^4.0.4&quot;,
      &quot;redux-actions&quot;: &quot;^2.6.5&quot;,
      &quot;redux-devtools-extension&quot;: &quot;^2.13.8&quot;,
      &quot;redux-thunk&quot;: &quot;^2.3.0&quot;,
      &quot;resolve&quot;: &quot;1.12.0&quot;,
      &quot;resolve-url-loader&quot;: &quot;3.1.0&quot;,
      &quot;sass-loader&quot;: &quot;7.2.0&quot;,
      &quot;semver&quot;: &quot;6.3.0&quot;,
      &quot;style-loader&quot;: &quot;1.0.0&quot;,
      &quot;styled-components&quot;: &quot;^4.3.2&quot;,
      &quot;terser-webpack-plugin&quot;: &quot;1.4.1&quot;,
      &quot;ts-pnp&quot;: &quot;1.1.2&quot;,
      &quot;tslint&quot;: &quot;^5.19.0&quot;,
      &quot;tslint-react&quot;: &quot;^4.0.0&quot;,
      &quot;typescript&quot;: &quot;3.6.2&quot;,
      &quot;url-loader&quot;: &quot;2.1.0&quot;,
      &quot;webpack&quot;: &quot;^4.39.3&quot;,
      &quot;webpack-dev-server&quot;: &quot;3.2.1&quot;,
      &quot;webpack-manifest-plugin&quot;: &quot;2.0.4&quot;,
      &quot;workbox-webpack-plugin&quot;: &quot;4.3.1&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;node scripts/start.js&quot;,
      &quot;build&quot;: &quot;node scripts/build.js&quot;,
      &quot;test&quot;: &quot;node scripts/test.js&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;jest&quot;: {
      &quot;roots&quot;: [
        &quot;&lt;rootDir&gt;/src&quot;
      ],
      &quot;collectCoverageFrom&quot;: [
        &quot;src/**/*.{js,jsx,ts,tsx}&quot;,
        &quot;!src/**/*.d.ts&quot;
      ],
      &quot;setupFiles&quot;: [
        &quot;react-app-polyfill/jsdom&quot;
      ],
      &quot;setupFilesAfterEnv&quot;: [],
      &quot;testMatch&quot;: [
        &quot;&lt;rootDir&gt;/src/**/__tests__/**/*.{js,jsx,ts,tsx}&quot;,
        &quot;&lt;rootDir&gt;/src/**/*.{spec,test}.{js,jsx,ts,tsx}&quot;
      ],
      &quot;testEnvironment&quot;: &quot;jest-environment-jsdom-fourteen&quot;,
      &quot;transform&quot;: {
        &quot;^.+\\.(js|jsx|ts|tsx)$&quot;: &quot;&lt;rootDir&gt;/node_modules/babel-jest&quot;,
        &quot;^.+\\.css$&quot;: &quot;&lt;rootDir&gt;/config/jest/cssTransform.js&quot;,
        &quot;^(?!.*\\.(js|jsx|ts|tsx|css|json)$)&quot;: &quot;&lt;rootDir&gt;/config/jest/fileTransform.js&quot;
      },
      &quot;transformIgnorePatterns&quot;: [
        &quot;[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$&quot;,
        &quot;^.+\\.module\\.(css|sass|scss)$&quot;
      ],
      &quot;modulePaths&quot;: [],
      &quot;moduleNameMapper&quot;: {
        &quot;^react-native$&quot;: &quot;react-native-web&quot;,
        &quot;^.+\\.module\\.(css|sass|scss)$&quot;: &quot;identity-obj-proxy&quot;
      },
      &quot;moduleFileExtensions&quot;: [
        &quot;web.js&quot;,
        &quot;js&quot;,
        &quot;web.ts&quot;,
        &quot;ts&quot;,
        &quot;web.tsx&quot;,
        &quot;tsx&quot;,
        &quot;json&quot;,
        &quot;web.jsx&quot;,
        &quot;jsx&quot;,
        &quot;node&quot;
      ],
      &quot;watchPlugins&quot;: [
        &quot;jest-watch-typeahead/filename&quot;,
        &quot;jest-watch-typeahead/testname&quot;
      ]
    },
    &quot;babel&quot;: {
      &quot;presets&quot;: [
        &quot;react-app&quot;,
        &quot;@babel/preset-env&quot;
      ],
      &quot;plugins&quot;: [
        &quot;@babel/plugin-syntax-dynamic-import&quot;
      ]
    }
  }
  </code></pre>
  <h3>webpack.config.ts - module</h3>
  <pre class="lang-json prettyprint-override"><code>module: {
        strictExportPresence: true,
        rules: [
          // Disable require.ensure as it's not a standard language feature.
          { parser: { requireEnsure: false } },
  
          // First, run the linter.
          // It's important to do this before Babel processes the JS.
          {
            test: /\.(js|mjs|jsx|ts|tsx)$/,
            enforce: 'pre',
            use: [
              {
                options: {
                  formatter: require.resolve('react-dev-utils/eslintFormatter'),
                  eslintPath: require.resolve('eslint'),
                  resolvePluginsRelativeTo: __dirname,
                  
                },
                loader: require.resolve('eslint-loader'),
              },
            ],
            include: paths.appSrc,
          },
          {
            // &quot;oneOf&quot; will traverse all following loaders until one will
            // match the requirements. When no loader matches it will fall
            // back to the &quot;file&quot; loader at the end of the loader list.
            oneOf: [
              // &quot;url&quot; loader works like &quot;file&quot; loader except that it embeds assets
              // smaller than specified limit in bytes as data URLs to avoid requests.
              // A missing `test` is equivalent to a match.
              {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: require.resolve('url-loader'),
                options: {
                  limit: imageInlineSizeLimit,
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
              // Process application JS with Babel.
              // The preset includes JSX, Flow, TypeScript, and some ESnext features.
              {
                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]',
                          },
                        },
                      },
                    ],
                  ],
                  // This is a feature of `babel-loader` for webpack (not Babel itself).
                  // It enables caching results in ./node_modules/.cache/babel-loader/
                  // directory for faster rebuilds.
                  cacheDirectory: true,
                  cacheCompression: isEnvProduction,
                  compact: isEnvProduction,
                },
              },
              // Process any JS outside of the app with Babel.
              // Unlike the application JS, we only compile the standard ES features.
              {
                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: isEnvProduction,
                  
                  // If an error happens in a package, it's possible to be
                  // because it was compiled. Thus, we don't want the browser
                  // debugger to show the original code. Instead, the code
                  // being evaluated would be much more helpful.
                  sourceMaps: false,
                },
              },
            ],
          },
        ],
      },
  </code></pre>