本机模块解析失败答案

【问题标题】：Module parse failed in native本机模块解析失败
【发布时间】：2018-06-01 20:20:00
【问题描述】：

我想在网页上看到我的应用，我该怎么办？我跟着这个链接 https://github.com/simonqian/react-helloworld 但我没有得到答案？所以请提供一些链接来解决这个问题

在我使用 npm start 启动 npm 后，我遇到了这种类型的错误？如何解决？

这是我的 web.config.js 文件。我的配置文件会在根目录下

'use strict';

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: 'E:/react/webnative/main.js',

  output: {
    // path: 'E:/',
    filename: 'index.js',
  },

  devServer: {
    inline: false,
    port: 7777,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: ['pug-loader?self'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        //exclude:/(node_modules|bower_components)/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          cacheDirectory: true,
          presets: ['es2015', 'react'],
        },
      },
    ],
  },
  plugins: [new UglifyJSPlugin()],
};

【问题讨论】：

您的 app.jsx 文件必须是 .jsx 吗？该错误清楚地表明它无法读取该文件类型
尝试import App from ./App并用js更改jsx
从'react'导入反应；从 'react-dom' 导入 ReactDOM；这是我的 main.js 文件从 './App.jsx' 导入应用程序； ReactDOM.render(, document.getElementById('app') );
这是我的 App.jsx 从 'react' 导入 React；类 App 扩展 React.Component { render() { return (
hello world!!!
); } } 导出默认应用；
如果您想使用 .jsx 文件扩展名，请在下面查看我的回答。如果你不这样做，将该文件另存为 .js 并在 main 中更改它

标签： reactjs react-native webpack react-native-web

【解决方案1】：

你的 webpack 配置应该看起来像这样来读取 .jsx 文件：

module.exports = {
  entry: './app/assets/frontend/myFile.jsx',
  output: {
    path: __dirname + '/app/assets/javascripts',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
   loaders: [{
     test: /\.jsx?$/,
     loader: 'babel',
     exclude: /node_modules/,
     query: {
       cacheDirectory: true,
       presets: ['react', 'es2015']
     }
   }]
 }
}

或者只是不使用 jsx。希望这会有所帮助！

【讨论】：

'使用严格'; module.exports = { entry: 'E:/react/webnative/main.js', output: { filename: 'index.js' }, devServer: { inline : false, port: 7777 }, resolve :{ extensions : [ '.js','.jsx'] }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { cacheDirectory : true,预设：["es2015", "react"] } } ] },
@Jeyasri.R 这是什么？你在这里告诉我什么？有点背景会很可爱
抱歉延迟响应。我想在 Web 浏览器上运行我的本机应用程序，那我该怎么办？我关注了这个链接github.com/simonqian/react-helloworld
@Jeyasri.R 正如我在回答中提到的，您的 webpack.config.js 文件是错误的。通过查看该 github 页面，您需要在 webpack.config.js 文件中添加：resolve: { extensions: ['', '.js', '.jsx'] }
是的，我添加了仍然显示错误。我参考了更多链接，但我无法解决问题@ShaneG