如何修复material-kit-react'找不到模块：webpack loader错误'

Posted 2023-02-22

【中文标题】如何修复material-kit-react\'找不到模块：webpack loader错误\'

【英文标题】：How to fix material-kit-react 'module not found: webpack loader error'如何修复material-kit-react'找不到模块：webpack loader错误'

【发布时间】：2019-12-20 10:47:16

【问题描述】：

我想将material-kit-react 实施到一个反应项目中。当我尝试通过 npm 包访问其组件时，我不断遇到某种 webpack 错误。

完全错误：

./node_modules/material-kit-react/src/components/CustomButtons/Button.jsx 51:4
Module parse failed: Unexpected token (51:4)
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
|   );
|   return (
>     <Button ...rest ref=ref className=btnClasses>
|       children
|     </Button>

错误来自此代码：

import React from 'react';
import RegularButton from 'material-kit-react/src/components/CustomButtons/Button'

function App() 
  return (
    <div>
      <RegularButton>Default</RegularButton>
    </div>
  );

这是我的 package.json 文件：

  "name": "material-ui-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "material-kit-react": "^1.7.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.0"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": "react-app"
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

我几乎可以肯定该错误来自于 material-kit-react npm 包中的文件是 .jsx 而不是 .js 的事实，但我可能误解了这个问题。我真的很想在不退出 create-react-app 的情况下解决这个问题。我没有任何配置自己的 webpack 文件的经验，但任何建议都会很有用。谢谢。

有人问过similar question，但从未得到答复。

【参考方案1】：

更新：

我决定向 Creative Tim 员工发送电子邮件，通知我将 material-kit-react npm 包更改为使用 .js 文件而不是 .jsx 以与 create-react-app 和 gatsby.js 启动器兼容。他们现在已经解决了这个问题。这是指向新 material-kit-react 的更新链接。

【参考方案2】：

您的webpack.config.js 文件似乎有问题。要解析 .jsx 文件，您的 module.export 部分应如下所示：

module.exports = 
  entry: './app/assets/frontend/main.jsx',
  output: 
    path: __dirname + '/app/assets/javascripts',
    filename: 'bundle.js'
  ,
  resolve: 
    extensions: ['', '.js', '.jsx']
  ,
  module: 
    loaders: [
      
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: 
          cacheDirectory: true,
          presets: ['react', 'es2015']
        
      
    ]
  

关注resolve部分。

【讨论】：

我有一个 SPFx 项目，但我无法在我的任何文件夹中找到/查看 webpack.config.js。我怎样才能创建这个？

@Aventus 老实说，我从未使用过 SPFx，但在大多数情况下，我们应该在项目的顶层定义这个文件。我做了一点研究，在微软的官方文档docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/… 中找到了这个。另外，我发现了这个带有 webpack 的 SPFx 项目示例，你可以试试github.com/peerigon/markdown-loader/tree/master/example 希望它有所帮助:)

嗨@Robert，感谢您提供这些有用的信息。此外，您共享的第二个链接似乎不是带有 webpack 的 SPFx 项目的链接。你知道我应该使用什么加载器来处理我想为我的打字稿项目使用 .js 文件的情况吗？这是我的帖子的链接***.com/questions/67103169/…