我的 Babel-Loader 似乎无法处理 JSX

如何解决我的 Babel-Loader 似乎无法处理 JSX

我遇到了 babel-loader 似乎无法处理任何 JSX 代码的问题。虽然我熟悉网站的高端代码是如何工作的，但我没有设置环境，这就是我遇到这种情况的原因！

我正在尝试对 babel、webpack、neutrino 配置进行逆向工程，以便我可以在其他地方使用它，并且可以进行一些软件包更新。

运行后终端出错 npm run develop

ℹ ｢wds｣: Project is running at http://localhost:5000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/xxx/Documents/GitHub/React-Boilerplate
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣: Time: 6205ms


ERROR in ./src/index.js 7:16
Module parse Failed: Unexpected token (7:16)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import './globals/css/variables.css';
| import './globals/css/global.css';
> ReactDOM.render(<div>text in here</div>,document.getElementById('root'));
ℹ ｢wdm｣: Failed to compile.

所以只要 babel-loader 看到 JSX 代码，代码就会挂起。

package.json

{
  "name": "xxx","version": "0.0.0","description": "xxx","scripts": {
    "develop": "webpack-dev-server --mode development","build": "webpack --mode production","generate": "plop --plopfile ./generators/plopfile.js","clean": "rm -rf ./dist"
  },"author": "xxx","license": "xxx","private": true,"dependencies": {
    "@fortawesome/free-solid-svg-icons": "^5.12.1","@material-ui/core": "^4.9.13","@material-ui/icons": "^4.11.2","@tomorrow/bloom": "^0.1.2","draft-js": "^0.11.4","draftjs-to-html": "^0.9.1","eslint": "^5.16.0","html-to-draftjs": "^1.5.0","json-query": "^2.2.2","mobx": "^5.9.0","mobx-react": "^5.4.3","postcss": "^8.2.4","react": "^16.8.5","react-dom": "^16.8.5","react-draft-wysiwyg": "^1.14.4","react-hot-loader": "^4.8.0","react-promise-tracker": "^2.0.5","react-router-dom": "^4.3.1","react-select": "^2.4.2","react-spinners": "^0.8.3","shortid": "^2.2.15"
  },"devDependencies": {
    "@babel/core": "^7.12.10","@babel/plugin-proposal-class-properties": "^7.4.0","@babel/plugin-proposal-decorators": "^7.4.0","@babel/preset-env": "^7.12.11","@neutrinojs/react": "^9.0.0-rc.0","babel-core": "^6.0.20","babel-loader": "^8.2.2","babel-merge": "^2.0.1","babel-plugin-react-css-modules": "^5.2.3","babel-polyfill": "^6.0.16","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","babel-preset-stage-0": "^6.0.15","dotenv": "^7.0.0","neutrino": "^9.0.0-rc.0","plop": "^2.3.0","postcss-aspect-ratio": "^1.0.2","postcss-custom-media": "^7.0.7","postcss-flexbugs-fixes": "^4.1.0","postcss-lh": "^2.0.2","postcss-loader": "^3.0.0","postcss-nesting": "^7.0.0","postcss-preset-env": "^6.6.0","postcss-responsive-type": "^1.0.0","postcss-subgrid": "^0.2.1","prettier": "^1.16.4","stylelint": "^9.10.1","stylelint-config-recommended": "^2.1.0","webpack": "^4.46.0","webpack-cli": "^3.3.11","webpack-dev-server": "^3.11.1"
  }
}

webpack.config.js

const neutrino = require('neutrino');
module.exports = neutrino().webpack();

.neutrinorc.js

const { resolve } = require('path');
const babelMerge = require('babel-merge');
// require('dotenv').config();
const react = require('@neutrinojs/react');

module.exports = neutrino => {
  const { config } = neutrino;

  // Configure react preset
  neutrino.use(react,{
    html: {
      title: 'Boilerplate'
    },hot: true,devServer: {
      https: true,port: 3000
    },style: {
      loaders: ['postcss-loader']
    }
  });

  // Customize Babel
  config.module
    .rule('compile')
    .use('babel')
    .tap(options =>
      babelMerge(
        {
          plugins: [
            ['@babel/plugin-proposal-decorators',{ legacy: true }],['@babel/plugin-proposal-class-properties',{ loose: true }],[
              'babel-plugin-react-css-modules',{
                generateScopedname: '[path]--[local]',//--[hash:base64:5]'  // took this out as code wasn't working locally on PC,webpackHotModuleReloading: false,//can be true in dev if
                autoResolveMultipleImports: true
              }
            ]
          ]
        },options
      )
    );

  // Customize CSS modules
  config.module
    .rule('style-modules')
    .use('css-modules')
    .tap(options =>
      Object.assign(
        options,(options.localIdentName = '[path]--[local]') //--[hash:base64:5]'// took this out as code wasn't working locally on PC,)
    );

  // Set webpack options
  config.output.path(resolve('./public'));
};

我怀疑我需要向 babelMerge 函数添加一个新插件 - 非常感谢任何帮助！

哦，这里是 src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './containers/App';
import '@tomorrow/bloom/bloom.css';
import './globals/css/variables.css';
import './globals/css/global.css';

ReactDOM.render(<div>text in here</div>,document.getElementById('root'));

解决方法

@neutrinojs/style-loader 是 Neutrino 中间件，用于从模块加载和导入样式表。

我没有在您的开发依赖项列表中找到安装了 style-loader 中间件。你可以try it。