Question

我感谢您给予的时间和建议。

我将样式化组件npm软件包下载到使用webpack的react-native项目中。我以前没有使用过webpack的经验，并且一直在使用各种对本机友好的软件包给我带来困难。

我收到以下错误：

完整的webpack.config.js文件

const path = require("path");

module.exports = {
  mode: "development",

  // Path to the entry file, change it according to the path you have
  entry: path.join(__dirname, "App.js"),

  // Path for the output files
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.bundle.js"
  },

  // Enable source map support
  devtool: "source-map",

  // Loaders and resolver config
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules[/\\](?!react-native-paper|react-native-vector-icons|react-native-safe-area-view)/,
        use: {
          loader: "babel-loader",
          options: {
            // Disable reading babel configuration
            babelrc: false,
            configFile: false,

            // The configration for compilation
            presets: [
              ["@babel/preset-env", { corejs: "2", useBuiltIns: "usage" }],
              "@babel/preset-react",
              "@babel/preset-flow"
            ],
            plugins: [
              "@babel/plugin-proposal-class-properties",
              "@babel/plugin-proposal-object-rest-spread"
            ]
          }
        }
      },
      {
        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
        loader: "file-loader"
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: {
    alias: {
      "react-native$": "react-native-web"
    },
    extensions: [".web.js", ".js"]
  },

  // Development server config
  devServer: {
    contentBase: [path.join(__dirname, "public")],
    historyApiFallback: true
  }
};


//**First Attempt**
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules[/\\](?!react-native-paper|react-native-vector-icons|react-native-safe-area-view)/,
        use: {
          loader: "babel-loader",
          options: {
            // Disable reading babel configuration
            babelrc: false,
            configFile: false,

            // The configration for compilation
            presets: [
              ["@babel/preset-env", { corejs: "2", useBuiltIns: "usage" }],
              "@babel/preset-react",
              "@babel/preset-flow"
            ],
            plugins: [
              "@babel/plugin-proposal-class-properties",
              "@babel/plugin-proposal-object-rest-spread"
            ]
          }
        }
      },
      {
        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
        loader: "file-loader"
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: {
    alias: {
      "react-native$": "react-native-web",
"styled-components": path.resolve("./node_modules/styled-components")
    },
    extensions: [".web.js", ".js"]
  }


//**Second Attempt**
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules[/\\](?!react-native-paper|react-native-vector-icons|react-native-safe-area-view)/,
        use: {
          loader: "babel-loader",
          options: {
            // Disable reading babel configuration
            babelrc: false,
            configFile: false,

            // The configration for compilation
            presets: [
              ["@babel/preset-env", { corejs: "2", useBuiltIns: "usage" }],
              "@babel/preset-react",
              "@babel/preset-flow"
            ],
            plugins: [
              "@babel/plugin-proposal-class-properties",
              "@babel/plugin-proposal-object-rest-spread"
            ]
          }
        }
      },
      {
        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
        loader: "file-loader"
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: {
    alias: {
      "react-native$": "react-native-web",
    },
    extensions: [".web.js", ".js"],
    alias: {
        "styled-components": path.resolve("./node_modules/styled-components")
  }

这是我的package.json文件

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --open",
    "build": "webpack"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-styled-components": "^1.10.6",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "@reach/router": "^1.2.1",
    "axios": "^0.19.0",
    "core-js": "2",
    "react": "16.8.6",
    "react-art": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-hover-observer": "^2.1.1",
    "react-images": "^1.0.0",
    "react-native": "^0.60.4",
    "react-native-animation-library": "0.0.8",
    "react-native-easy-grid": "^0.2.2",
    "react-native-modal": "^11.4.0",
    "react-native-paper": "^2.16.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.5",
    "react-photo-gallery": "^8.0.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.3.0",
    "styled-components": "^4.4.0",
    "typeface-roboto": "^0.0.75",
    "url-loader": "^2.1.0",
    "uuid": "^3.3.2"
  }
}

如何解决webpack中的“节点模块样式化的组件不是函数”？

0 个答案: