Webpack module构建失败意外令牌（rails react build）

IT技术 javascript ruby-on-rails reactjs webpack babeljs
2021-05-21 17:26:52

我第一次使用 webpack 和 babel 进行 react/rails 构建和工作。我正在使用两个文件并收到错误：

./app/assets/frontend/main.jsx
module构建失败：语法错误
：/Users/cls/GitHub/rails_react/app/assets/frontend/main.jsx：意外令牌 (6:6)

第 6 行是： <Greet />

这是 main.jsx 文件

import Greet from './greet';

class Main extends React.Component {
    render() {
        return (
            <Greet />
        );
    }
}
let documentReady = () => {
    React.render(
        <Main />,
        document.getElementById('react')
    );
};
$(documentReady);

这是greet.jsx 文件：

export default class Greet extends React.Component {
    render() {
        return <h2>Hello There</h2>
    }
}

这是我的 webpack.config：

module.exports = {
  entry: "./app/assets/frontend/main.jsx",
  output: {
    path: __dirname + "/app/assets/javascripts",
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      { test: /\.jsx$/, loader: "babel-loader" }
    ]
  }
};

我没有 babelrc 文件？

3个回答

首先确保在您的解决方案中使用安装 react、babble 和其他依赖项 

   npm install react --save

然后在web包的配置文件，请包括presets在query类似如下：

   module.exports = {
entry: 'main.jsx',
output: {
    // Output the bundled file.
    path: './src',
    // Use the name specified in the entry key as name for the bundle file.
    filename: 'bundle.js'
},
module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['react']
        }
    }]
},
externals: {
    // Don't bundle the 'react' npm package with the component.
    'react': 'React'
},
resolve: {
    // Include empty string '' to resolve files by their explicit extension
    // (e.g. require('./somefile.ext')).
    // Include '.js', '.jsx' to resolve files by these implicit extensions
    // (e.g. require('underscore')).
    extensions: ['', '.js', '.jsx']
}
};

因此，根据给出的所有反馈，我能够弄清楚。感谢所有回答的人。

这是我需要做的：

npm install babel-preset-es2015

npm install babel-preset-react

并创建一个 .babelrc 文件（感谢 azium 和 Kreozot）

`{
  "presets": [
    "react",
    "es2015"
  ]
}`

我想我们正在观看 Samer Buna 的同一门课程“React.js on Rails：构建全栈 Web 应用程序”

为了解决这个问题，我安装了这个module：

npm install react --save

npm install babel-preset-es2015

npm install babel-preset-react

我正在使用此配置 https://jsfiddle.net/daronwolff/11tgotvz/

感谢@milad-rezazadeh 和@chrissavage

其它你可能感兴趣的问题
上一篇箭头函数被认为是使用 babel 的 React 组件中的意外标记 下一篇在 React 中测试 mapbox-gl 时如何修复“window.URL.createObjectURL 不是函数”？