Я только что запустил приложение ruby с реакцией, чтобы добавить некоторые тесты компонентов. С генерируемой конфигурацией basi c babel-loader вызывает у меня проблемы, так как сообщает об этой ошибке:
ERROR in ./app/javascript/components/HelloWorld.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ***/app/javascript/components/HelloWorld.js: Unexpected token (8:6)
6 | console.log('hello word');
7 | return (
> 8 | <p>
| ^
9 | Greeting: {this.props.greeting}
Я попытался установить все в своем пакете. json, чтобы проверить, в этом была проблема, так как rails не добавила его только мне, но кажется, что он все равно не работает
babel.config. js
module.exports = api => {
const validEnv = ['development', 'test', 'production'];
const currentEnv = api.env();
const isDevelopmentEnv = api.env('development');
const isProductionEnv = api.env('production');
const isTestEnv = api.env('test');
if (!validEnv.includes(currentEnv)) {
throw new Error(
`${'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: '}${JSON.stringify(currentEnv)}.`
);
}
return {
presets: [
isTestEnv && [
'@babel/preset-env',
{
corejs: '3',
targets: {
esmodules: true,
node: 'current',
},
modules: 'commonjs',
useBuiltIns: 'entry',
},
'@babel/preset-react',
],
(isProductionEnv || isDevelopmentEnv) && [
'@babel/preset-env',
{
corejs: '3',
targets: {
esmodules: true,
node: 'current',
},
modules: 'commonjs',
forceAllTransforms: true,
useBuiltIns: 'entry',
exclude: ['transform-typeof-symbol'],
},
'@babel/preset-react',
],
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'@babel/transform-arrow-functions',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-destructuring',
'@babel/plugin-transform-modules-commonjs',
[
'@babel/plugin-proposal-class-properties',
{
loose: true,
},
],
['@babel/plugin-proposal-decorators', { legacy: true }],
[
'@babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true,
},
],
[
'@babel/plugin-transform-runtime',
{
corejs: '3',
helpers: false,
regenerator: true,
},
],
[
'@babel/plugin-transform-regenerator',
{
async: false,
},
],
// [('babel-plugin-styled-components', { ssr: true, displayName: true })],
isTestEnv && 'babel-plugin-dynamic-import-node',
].filter(Boolean),
};
};
Обновление
Я уже нашел ошибку. Я неправильно указал @ babel / preset-env-реакции:
presets: [
isTestEnv && [
'@babel/preset-env',
{
corejs: '3',
targets: {
esmodules: true,
node: 'current',
},
modules: 'commonjs',
useBuiltIns: 'entry',
},
],
(isProductionEnv || isDevelopmentEnv) && [
'@babel/preset-env',
{
corejs: '3',
targets: {
esmodules: true,
node: 'current',
},
modules: 'commonjs',
forceAllTransforms: true,
useBuiltIns: 'entry',
exclude: ['transform-typeof-symbol'],
},
],
'@babel/preset-react',
].filter(Boolean),