Webpack: в настоящее время нет загрузчиков, настроенных для обработки этого файла

Question

Я пытаюсь создать расширение chrome с помощью реакции, и я извлек React с помощью npm run eject

. Я могу связать фоновый файл. js, поскольку в нем нет JSX, но я могу не удается правильно настроить babel, поскольку я не могу связать контент-скрипт, содержащий JSX, но я могу связать индекс. js, содержащий JSX.

В моем package.json у меня есть:

{
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

{
  "scripts": {
    "start": "node scripts/start.js",
    "prebuild": "rimraf build",
    "build": "npm-run-all build:*",
    "build:app": "cross-env INLINE_RUNTIME_CHUNK=false node scripts/build.js",
    "build:bg": "cross-env webpack --mode production ./src/background.js --output ./build/background.js",
    "build:ctn": "cross-env webpack --mode production ./src/content.js --output ./build/content.js",
    "test": "node scripts/test.js"
  }
}

В моем content.js У меня есть:

import React from 'react'
import ReactDOM from 'react-dom'

const Content = () => {
  console.log('Hello from content script')

  return (
    <div>
      Hello world!
    </div>
  )
}

const app = document.createElement('div')
app.id = 'my-extension-root'
document.body.appendChild(app)

ReactDOM.render(<Content />, app)

В webpack.config. js У меня

entry: [
      // Include an alternative client for WebpackDevServer. A client's job is to
      // connect to WebpackDevServer by a socket and get notified about changes.
      // When you save a file, the client will either apply hot updates (in case
      // of CSS changes), or refresh the page (in case of JS changes). When you
      // make a syntax error, this client will display a syntax error overlay.
      // Note: instead of the default WebpackDevServer client, we use a custom one
      // to bring better experience for Create React App users. You can replace
      // the line below with these two lines if you prefer the stock client:
      // require.resolve('webpack-dev-server/client') + '?/',
      // require.resolve('webpack/hot/dev-server'),
      isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
      // Finally, this is your app's code:
      paths.appIndexJs,
      // We include the app code last so that if there is a runtime error during
      // initialization, it doesn't blow up the WebpackDevServer client, and
      // changing JS code would still trigger a refresh.
    ].filter(Boolean),
    output: {
      // The build folder.
      path: isEnvProduction ? paths.appBuild : undefined,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: isEnvDevelopment,
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: isEnvProduction
        ? 'static/js/[name].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      // TODO: remove this when upgrading to webpack 5
      futureEmitAssets: true,
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: isEnvProduction
        ? 'static/js/[name].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',
      // webpack uses `publicPath` to determine where the app is being served from.
      // It requires a trailing slash, or the file assets will get an incorrect path.
      // We inferred the "public path" (such as / or /my-project) from homepage.
      publicPath: paths.publicUrlOrPath,
      // Point sourcemap entries to original disk location (format as URL on Windows)
      devtoolModuleFilenameTemplate: isEnvProduction
        ? info =>
            path
              .relative(paths.appSrc, info.absoluteResourcePath)
              .replace(/\\/g, '/')
        : isEnvDevelopment &&
          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
      // Prevents conflicts when multiple webpack runtimes (from different apps)
      // are used on the same page.
      jsonpFunction: `webpackJsonp${appPackageJson.name}`,
      // this defaults to 'window', but by setting it to 'this' then
      // module chunks which are built will work in web workers as well.
      globalObject: 'this',
    },```