问题描述
我遇到了 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。