Question

我在我的react本机应用程序中创建了一个React应用程序，这就是我的全局应用程序的结构：

        ------app
        ------variant
        ------Web
        -----------react-app-web
                   ------------------------index.js
                   ------------------------babel.config.js
                   ------------------------webpack.config.js
                   ------------------------package.json

问题是，当我尝试从存储库应用程序或变体导入简单组件时，在我的react-app-web的index.js中，它显示了此错误： SyntaxError意外令牌<，但是从react-app-web内部导入组件时没有问题。我添加了babel预设react和babel预设env，但是仍然是相同的错误。这是我的组件：

index.js：

   import React,{Component} from 'react';
   import ReactDOM from 'react-dom';
   import * as serviceWorker from './serviceWorker';
   import CenterComponent from '@variant/common.index'

   export default class Root extends Component {
     render() {
       return(<CenterComponent  />)
     }
    }
   ReactDOM.render(<Root/>,document.getElementById('root'));

babel.config.js：

  module.exports = {
    presets: ["@babel/preset-react", "@babel/preset-env"],
    plugins: ["@babel/plugin-proposal-class- 
      properties",'@babel/plugin-transform-runtime']};

webpack.config.js

     const path = require('path');

     module.exports = {
     mode: 'development',
    entry: ['@babel/polyfill','../../variant/generic/index.web.js'],
    output: {

    filename: './bundle.js',
      path: path.resolve(__dirname, 'public')
       },
    resolveLoader: {
    modules: [ __dirname + '\\node_modules' ],
    extensions: [ '.js', '.json','.jsx' ],
    mainFields: [ 'loader', 'main' ]
       },
      module: {
    rules: [{
     test: /\.jsx?$/,
    exclude: /node_modules/,

   use: [{
     loader: "babel-loader",
     options: {
     presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
     '@babel/plugin-transform-runtime',
     "@babel/plugin-proposal-class-properties"
        ]
          }
      }],

      },  {
   test: /\.(png|woff|woff2|eot|ttf|svg)$/,
   loader: 'url-loader'
    },
    {
    test: /\.css$/,
   use: ['style-loader', 'css-loader'],
   },

    ]
  },
    devServer: {
     hot: true
     },
   resolve: {
   extensions: ['*', '.js', '.jsx']
   }, 

  };

package.json

      {
      "name": "app",
     "version": "0.1.0",
      "private": true,
     "dependencies": {
     "@babel/polyfill": "^7.4.4",
      "babel-core": "^6.26.3",
      "babel-loader": "8.0.5",
       "mv": "^2.1.1",
       "path": "^0.12.7",
       "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-scripts": "3.0.1"
      },
     "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "postinstall": "link-module-alias"
         },
       "_moduleAliases": {
         "@app": "../../app/CustomApp",
        "@variant": "../../variant",
       "@test": "../Test"
        },
        "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"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-es2016": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.0.0",
    "css-loader": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "link-module-alias": "^1.2.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.0",
    "webpack": "4.29.6",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "3.2.1"
  }
}

您有什么想法请解决它？

Answer 1

看起来很愚蠢，但是也许您没有安装带有npm全局标志的组件，所以现在您试图将其从项目范围之外移出并抛出此错误

语法错误意外令牌：从外部React应用程序存储库中注入组件时

1 个答案: