javascript - 怎么解决这种无法识别jsx文件类型的错误。

Question

Answer 1

亲测，JSX语法没有问题，明显是webpack.config配置写的有问题，我贴下我的，给你参考下

首先文件导入部分：

resolve: {
    extensions: ['', '.js','.jsx']
  },

然后是module loader部分：

    {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
    },

最后package.json里面要有：

"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",

Answer 2

你检查检查webpack.config.js文件把，配置的不对，找个能运行的，看看loaders那部分怎么配置的。

Answer 3

有.babelrc文件么，安babel-loader，babel-core，
如果都有node_modules删了重安

或者换个mac试试

Answer 4

这个错呢，必然是loader没有正确的配置咯，应该不是.babelrc相关，应为如果loader配置正确的话，不会提示无法识别文件类型的无法识别的错误。

尝试看看webpack.config.js下的loaders属性，比如：

loaders: [{
      test: /\.js[x]?$/, loaders: ['babel']]

这就代表用babel这个loader来加载.js或者.jsx文件类型，之后只需要在.babelrc中配置babel即可，如果是你这样子的话，.babelrc这么写：

{ "presets": ["es2015"，"react"] }

就足够了。

另外推荐你个工具，叫tooling，我用着感觉还挺好的，这个工具就是解决这种重复配置的问题的。

Answer 5

You may need an appropriate loader to handle this file type ...

你要在 webpack.config 里配置一个 loader 去解析 .jsx 的文件，例如 babel 都可以。

Answer 6

< AppCompoent / > 的原因?

<AppCompoent />?

Answer 7

这个和支不支持jsx没关系了，jsx语法错误，无法编译