reactjs - 使用 webpack 的语法错误和来自不同目录的反应组件，意外的令牌 (8:12)

Question

尝试使用我的 React 项目目录之外的目录中的组件并使用 webpack 构建，但出现以下错误。

SyntaxError: /Users/cmc/Sites/common/form_builder/src/index.js: Unexpected token (8:12)

   6 | 
   7 |         render(
>  8 |             <div>
     |             ^
   9 |                 common
  10 |             </div>
  11 |         )

文件夹结构

• 网站
  • webpack-test（反应项目）
  • 常见的（我试图获得常见的组件）
  • 表单生成器

我尝试安装与 react 项目具有相同依赖项的 node_modules，还添加了相同的 .babelrc 文件。

webpack.config.json

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index_bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            include: [
                "/Users/cmc/Sites/common/form_builder/",
                path.resolve(__dirname, ""),
            ]}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

.babelrc

    "presets": [
      "@babel/env",
      "@babel/react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  }

包.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development  --hot",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }
}

应用程序.js

import React, { Component } from 'react';
import Test from '../../../common/form_builder/src/index';

class App extends Component {

    render() {

        return(
            <div>
                <Test />
            </div>
        );
    }

}

export default App;

index.js

import React, { Component } from '../../webpack-test/node_modules/react';

class Test extends Component {

    render() {
        return(
            <div>
                Test
            </div>
        )
    }


}

export default Test;

完全错误：

[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built] [./src/index.js] 177 bytes { main} [built] + 26 个隐藏模块

../common/form_builder/src/index.js 中的错误模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：SyntaxError: /Users/cmc/Sites/common/form_builder/src/index .js：意外令牌 (7:12)

 5 |     render() {
   6 |         return(
   7 |             <div>
     |             ^
   8 |                 Test
   9 |             </div>
   10 |         )

在 Parser.raise (/Users/cmc/Sites/webpack-test/node_modules/@babel/parser/lib/index.js:6322:17) 在 Parser.unexpected (/Users/cmc/Sites/webpack-test/node_modules /@babel/parser/lib/index.js:7638:16)

标签： reactjswebpack