如何在 Rails 应用程序中导入 React(jsx) 文件?

戈尔迪

在我的 Rails 应用程序中运行./bin/webpack-dev-server时遇到问题我收到一个错误:

Failed to compile.

./app/javascript/packs/blob.js
Module build failed: SyntaxError: Unexpected token (5:1)

  3 | 
  4 | 
> 5 | <!DOCTYPE html>
    |  ^

我不确定是什么,但我认为应该在 webpack.config.js 中添加一些内容

纳德-a

您的 webpack 配置可能不正确,它正在尝试从 html 文件编译 JavaScript,您需要在 webpack 配置中指定一个入口 jsx 文件。我通常将所有 jsx 文件放入frontend项目根目录下文件夹中,并在根目录下使用以下 webpack.config.js 文件

const path = require('path');

module.exports = {
  context: __dirname,
  entry: './frontend/ROOT FILE NAME.jsx',
  output: {
    path: path.resolve(__dirname, 'app', 'assets', 'javascripts'),
    filename: 'bundle.      },
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        query: {
          presets: ['@babel/env', '@babel/react',],
          plugins: ['@babel/plugin-proposal-class-properties']
        }
      },
    }]
  },
  devtool: 'source-map',
  resolve: {
    extensions: [".js", ".jsx"]
  }
};

请注意,我添加了一些扩展的 Babel,您可能希望根据您使用的 JS 语法添加更多或删除一些扩展。

请参阅此处了解如何设置根文件

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在rails应用程序中的tailwind css中导入font-awesome

编辑:如何在React应用程序中导入MP3文件

如何在Rails应用程序中检测文件类型?

如何使用 Google 应用程序脚本在 Google 表格中导入带有 xml 响应的 txt 文件?

Ruby on Rails 4:如何在Rails Web应用程序中包含Javascript文件?

Rails 5:如何在应用程序模板脚本中添加文件夹和文件

如何在C#应用程序中导入JsonConvert?

如何在我的应用程序中导入linkedin sdk?

我如何在可可应用程序xcode中导入和导出本地化文件,以便其他人可以翻译它?

在Android应用程序中导入文本文件?

在NodeJS应用程序中导入文件的问题`

在应用程序中导入本地库和文件

使用TypeScript在节点应用程序中导入JSON文件

无法在反应应用程序中导入多个 CSS 文件

如何在没有注释的Gemfile等文件中创建Rails应用程序?

使用Rails,如何在应用程序的特定页面上执行javascript文件?

如何在 Rails 应用程序中配置虚拟文件夹?

如何在我的 Ruby on Rails 应用程序中读取 JS 文件?

如何转换XML文件以在Rails应用程序中使用?

如何在React应用程序中从公用文件夹导入文件?

在rails中导入excel文件时如何在模型中传递参考ID

如何从 Zip 文件导入 Apex 应用程序

如何在Rails应用程序中添加带有类的新文件夹?

如何在Rails 5.xx应用程序中以Zip格式从S3下载多个文件?

如何在Blazor Server应用程序中导航到文件夹的默认页面(.razor)?

如何在控制台应用程序中导入 VisualBasic.MyServices?

如何在我的Aurelia应用程序中导入软件包

如何在React Typescript应用程序中导入react-admin?

如何在Webpack构建的应用程序中导入不在npm注册表上的库?