javascript - 导入 React Native => 需要适当的“类型”加载器

Question

当我尝试: import Share from 'react-native-share';时，我得到：

ERROR in ./node_modules/react-native-share/index.js 40:5
Module parse failed: Unexpected token (40:5)
You may need an appropriate loader to handle this file type.
| });
|
> type Props = {
|   visible: boolean,
|   onCancel: () => void,

似乎它无法注册加载程序中的“类型”。如何修改我的 Babel 加载器以完全导入 react-native？

我的.babelrc：

{
  "presets": [
    "env",
    "react",
    "stage-2",
    "es2015",
    "babel-preset-react"
  ]
}

我的 package.json：

{
  ...
  "dependencies": {
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.2",
    "async": "^2.6.0",
    "axios": "^0.18.1",
    "babel-preset-es2015": "^6.24.1",
    "bluebird": "^3.5.3",
    "body-parser": "^1.19.0",
    "echarts": "^4.2.1",
    "echarts-for-react": "^2.0.15-beta.0",
    "express": "^4.16.4",
    "express-session": "^1.16.1",
    "file-loader": "^3.0.1",
    "js-yaml": "^3.13.1",
    "material-ui": "^1.0.0-beta.47",
    "mongoose": "^4.3.4",
    "multer": "^1.4.1",
    "nodemon": "^1.18.10",
    "prismjs": "^1.15.0",
    "promise": "^8.0.2",
    "react": "^16.9.0",
    "react-device-detect": "^1.7.5",
    "react-dom": "^16.9.0",
    "react-facebook-login": "^4.1.1",
    "react-native": "^0.60.5",
    "react-native-share": "^2.0.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-share-button": "file:react-share-button",
    "share-menu": "^4.0.0-rc.4",
    "url-loader": "^1.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.8.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^1.0.0",
    "eslint": "^5.8.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "style-loader": "^0.23.0",
    "webpack": "^4.5.0",
    "webpack-cli": "^3.1.2"
  },
  "private": true
}

我的 package.json

{
  ...
  "dependencies": {
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.2",
    "async": "^2.6.0",
    "axios": "^0.18.1",
    "babel-preset-es2015": "^6.24.1",
    "bluebird": "^3.5.3",
    "body-parser": "^1.19.0",
    "echarts": "^4.2.1",
    "echarts-for-react": "^2.0.15-beta.0",
    "express": "^4.16.4",
    "express-session": "^1.16.1",
    "file-loader": "^3.0.1",
    "js-yaml": "^3.13.1",
    "material-ui": "^1.0.0-beta.47",
    "mongoose": "^4.3.4",
    "multer": "^1.4.1",
    "nodemon": "^1.18.10",
    "prismjs": "^1.15.0",
    "promise": "^8.0.2",
    "react": "^16.9.0",
    "react-device-detect": "^1.7.5",
    "react-dom": "^16.9.0",
    "react-facebook-login": "^4.1.1",
    "react-native": "^0.60.5",
    "react-native-share": "^2.0.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-share-button": "file:react-share-button",
    "share-menu": "^4.0.0-rc.4",
    "url-loader": "^1.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.8.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^1.0.0",
    "eslint": "^5.8.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "style-loader": "^0.23.0",
    "webpack": "^4.5.0",
    "webpack-cli": "^3.1.2"
  },
}

我的 webpack.config

module.exports = {
  entry: {
    myWebsite: './myWebsite.jsx',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: [ "style-loader", "css-loader" ],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: `${__dirname}/compiled`,
    publicPath: '/',
    filename: '[name].bundle.js',
  },
};

我将不胜感激任何帮助！真的卡住了，对类型和 babel 做了一些研究，并没有找到太多

标签： javascriptreactjsreact-nativewebpackbabeljs