时间戳

首页 > 解决方案 > 您可能需要适当的加载器来处理这种文件类型，目前没有配置加载器 import Counter from './components/counter.jsx'

javascript - 您可能需要适当的加载器来处理这种文件类型，目前没有配置加载器 import Counter from './components/counter.jsx'

问题描述

我试图设置一个新的 js/typescript 环境来练习 web 开发，同时使用 react、yarn 和 webpack，但是在尝试设置它时我不断收到这个错误。我当前的配置看起来像这样。我对这一切都很陌生，所以如果您看到任何我应该更改的内容，请告诉我。

webpack.config.js

const path = require('path')

module.exports = {
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
    historyApiFallback: true,
  },
  entry: path.resolve(__dirname, './src/index.js'),
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['react'],
            },
          },
        ],

        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [require('precss'), require('autoprefixer')]
              },
            },
          },
          {
            loader: 'saas-loader',
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  output: {
    filename: 'bundle.js',
  },
}

index.js

import React from 'react'
import {render} from 'react-dom'
import 'bootstrap/dist/css/bootstrap.css'
import Counter from './components/counter.jsx'

ReactDOM.render(<Counter />, document.getElementById('app'))

包.json

{
  "name": "trend-dot-com",
  "version": "1.0.0",
  "main": "index.js",
  "license": "TBA",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "bootstrap": "^4.5.0",
    "postcss-loader": "^3.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass-loader": "^8.0.2"
  },
  "scripts": {
    "watch": "webpack-dev-server --progress"
  }
}

提前致谢！

标签： javascriptreactjswebpack

解决方案

乍一看，一切看起来都很好。但问题似乎出在您的 webpack.config 文件中。

试试下面

const path = require('path')

module.exports = {
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
    historyApiFallback: true,
  },
  entry: path.resolve(__dirname, './src/index.js'),
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: 
          {
            loader: 'babel-loader',
            options: {
                presets:["@babel/preset-env","@babel/preset-react" ]
            },
          },
      },
    {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [require('precss'), require('autoprefixer')]
              },
            },
          },
          {
            loader: 'saas-loader',
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  output: {
    filename: 'bundle.js',
  },
}

同样在更改此设置后，还有一个未安装的 css-loader 错误，因此您可以安装并将其添加到您的 package.json 中。但是由于您已经有 Sass 包，您可能想在 index.js 中引用引导 sass 版本 - 由您决定。希望这可以帮助！。

推荐阅读