cra: 一个报错的问题修复/react-activity-calendar/react-scripts4.0.3
babel-loader 一些模块需要经过编译
报错截图
./node_modules/react-activity-calendar/build/index.js 327:56
Module parse failed: Unexpected token (327:56)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| }
|
> const year = dateFns.getYear(dateFns.parseISO(data[0]?.date));
| const weeks = groupByWeeks(data, weekStart);
| const labels = Object.assign({}, DEFAULT_LABELS, labelsProp);
原理
将有出问题的模块，添加到
babel的include列表里
module.exports = function(webpackEnv) {
// ...其他配置...
module: {
rules: [
{
// ...其他规则...
loader: require.resolve('babel-loader'),
options: {
// ...其他选项...
include: [
// 添加需要包含的包的路径
path.resolve(__dirname, 'node_modules/example-package'),
],
},
},
// ...其他规则...
],
},
// ...其他配置...
};react-scripts 源码
可以在这里添加
include里，利用craco来完成
module.exports = {
// ... other options
webpack: {
configure: (webpackConfig, { env, paths }) => {
const { rules } = webpackConfig.module;
const babelLoader = rules.find((rule) => rule.oneOf);
const babelLoaderConfig = babelLoader.oneOf.find(
(item) => item.options && item.options.presets
);
babelLoaderConfig.include = [paths.appSrc, paths.appNodeModules + '/react-activity-calendar'];
return webpackConfig;
},
},
};实际的代码如下
由此可以看出：react-scripts: 在开发模式/prod 模式，babel 的配置并不相同
module.exports = {
// ... other options
webpack: {
configure: (webpackConfig, { env, paths }) => {
const { rules } = webpackConfig.module;
const babelLoader = rules.find((rule) => rule.oneOf);
const babelLoaderConfig = babelLoader.oneOf.find(
(item) => item.options && item.options.presets
);
babelLoaderConfig.include = [
paths.appSrc,
env === 'development' ? paths.appNodeModules + '/react-activity-calendar' : null,
].filter(Boolean);
return webpackConfig;
},
},
};