Question

我正在尝试使用Webpack（带有CLI版本3.3.12的v4.44.2）和样式组件（v5.2.0）来建立一个React项目（反应16.13.1），并且每当我尝试执行以下操作时都会遇到错误在项目的任何地方使用样式化的组件。

当我尝试将它们合并到任何组件中的任何位置时，都会出现以下错误。

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <styled.div />. Did you accidentally export a JSX literal instead of a component?
    in App
printWarning @ react.development.js?72d0:315
react-dom.development.js?61bb:23965 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.
    at createFiberFromTypeAndProps (react-dom.development.js?61bb:23965)
    at createFiberFromElement (react-dom.development.js?61bb:23988)
    at createChild (react-dom.development.js?61bb:13628)
    at reconcileChildrenArray (react-dom.development.js?61bb:13900)
    at reconcileChildFibers (react-dom.development.js?61bb:14305)
    at reconcileChildren (react-dom.development.js?61bb:16762)
    at updateHostComponent (react-dom.development.js?61bb:17302)
    at beginWork (react-dom.development.js?61bb:18627)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
react-dom.development.js?61bb:19527 The above error occurred in the <div> component:
    in div (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit [react error boundary site] to learn more about error boundaries.
logCapturedError @ react-dom.development.js?61bb:19527
react-dom.development.js?61bb:22665 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.
    at createFiberFromTypeAndProps (react-dom.development.js?61bb:23965)
    at createFiberFromElement (react-dom.development.js?61bb:23988)
    at createChild (react-dom.development.js?61bb:13628)
    at reconcileChildrenArray (react-dom.development.js?61bb:13900)
    at reconcileChildFibers (react-dom.development.js?61bb:14305)
    at reconcileChildren (react-dom.development.js?61bb:16762)
    at updateHostComponent (react-dom.development.js?61bb:17302)
    at beginWork (react-dom.development.js?61bb:18627)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)

这是我的package.json的相关部分：

"dependencies": {
    "axios": "^0.20.0",
    "express": "^4.17.1",
    "mongoose": "^5.10.7",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "babel-plugin-styled-components": "^1.11.1",
    "faker": "^5.1.0",
    "jest": "^26.4.2",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  }
}

这是我的Webpack配置：

var path = require('path');
var SRC_DIR = path.join(__dirname, '/client/src');
var DIST_DIR = path.join(__dirname, '/client/dist');

module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    filename: 'bundle.js',
    path: DIST_DIR
  },
  module : {
    rules : [
      {
        test : /\.jsx?/,
        include : SRC_DIR,
        loader : 'babel-loader',
        query: {
          presets: ["@babel/preset-react"],
          plugins: ["babel-plugin-styled-components"]
        }
      }
    ]
  }
 };

以下是我尝试使用的样式化组件：

import styled from 'styled-components';

const PhotoModContainerStyle = styled.div`
  border: 1px solid red;
  display: grid;
  grid-template-columns: 37% 37% 80%;
  column-gap: 7px;
  width: 98%;
  height: 24em;
  margin: 10px 15px 10px 10px;
  padding: 0;
  overflow: hidden;
`;

const PhotoModEntryStyle = styled.div`
  border: 2px solid blue;
  background-color: green;
  height: 99%;
  padding: 0;
  margin-right: 15px;
`;

export { PhotoModContainerStyle, PhotoModEntryStyle };

到目前为止，我已经检查了所有进出口，它们都还好。我尝试按照文档说明安装babel-plugin-styled-components并将其添加到Webpack配置中。我已经使用Google搜索一个多小时了，我正在阅读的所有内容都与我的确切问题无关，或者非常模糊，因此我会尽力做到最好。我在这里缺少什么吗？如果有人可以指出我在此过程中做错了什么，我将不胜感激。预先谢谢你！

尝试在Webpack中使用样式化组件时出错

0 个答案: