React on Rails - environment.toWebpackConfig не является функцией

Я использую гем response_on_rails, чтобы добавить интерфейс реакции к нашему существующему бэкэнду rails. У меня много проблем с настройкой и работой. Потребовался целый день, чтобы заставить гем работать должным образом, потому что он работал некорректно из коробки ... Наконец-то я получил свой сервер Rails для правильного запуска (через мастера), но он выдает ошибку, когда загружает веб-пакет, с ошибка: environment.toWebpackConfig is not a function

Я искал по всему Google, чтобы решить эту проблему, но ни одна из статей, которые я прочитал, не помогло. Кто-нибудь знает, что я делаю не так?

Полная трассировка:

16:25:11 client.1 | /Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/cli.js:244
16:25:11 client.1 |                             throw err;
16:25:11 client.1 |                             ^
16:25:11 client.1 |
16:25:11 client.1 | TypeError: environment.toWebpackConfig is not a function
16:25:11 client.1 |     at Object.<anonymous> (/Users/elliot/ft_wilderness_patrol/server/current/config/webpack/development.js:5:30)
16:25:11 client.1 |     at Module._compile (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
16:25:11 client.1 |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
16:25:11 client.1 |     at Module.load (internal/modules/cjs/loader.js:599:32)
16:25:11 client.1 |     at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
16:25:11 client.1 |     at Function.Module._load (internal/modules/cjs/loader.js:530:3)
16:25:11 client.1 |     at Module.require (internal/modules/cjs/loader.js:637:17)
16:25:11 client.1 |     at require (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
16:25:11 client.1 |     at WEBPACK_OPTIONS (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/convert-argv.js:133:13)
16:25:11 client.1 |     at requireConfig (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/convert-argv.js:135:6)
16:25:11 client.1 |     at /Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/convert-argv.js:142:17
16:25:11 client.1 |     at Array.forEach (<anonymous>)
16:25:11 client.1 |     at module.exports (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/convert-argv.js:140:15)
16:25:11 client.1 |     at yargs.parse (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/cli.js:241:39)
16:25:11 client.1 |     at Object.parse (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/node_modules/yargs/yargs.js:563:18)
16:25:11 client.1 |     at /Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/cli.js:219:8
16:25:11 client.1 |     at Object.<anonymous> (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/cli.js:538:3)
16:25:11 client.1 |     at Module._compile (internal/modules/cjs/loader.js:689:30)
16:25:11 client.1 |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
16:25:11 client.1 |     at Module.load (internal/modules/cjs/loader.js:599:32)
16:25:11 client.1 |     at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
16:25:11 client.1 |     at Function.Module._load (internal/modules/cjs/loader.js:530:3)
16:25:11 client.1 |     at Module.require (internal/modules/cjs/loader.js:637:17)
16:25:11 client.1 |     at require (internal/modules/cjs/helpers.js:20:18)
16:25:11 client.1 |     at Object.<anonymous> (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack/bin/webpack.js:155:2)
16:25:11 client.1 |     at Module._compile (internal/modules/cjs/loader.js:689:30)
16:25:11 client.1 |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
16:25:11 client.1 |     at Module.load (internal/modules/cjs/loader.js:599:32)
16:25:11 client.1 |     at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
16:25:11 client.1 |     at Function.Module._load (internal/modules/cjs/loader.js:530:3)
16:25:11 client.1 | exited with code 1
16:25:11 system   | sending SIGTERM to all processes
16:25:11 web.1    | - Gracefully stopping, waiting for requests to finish
16:25:11 web.1    | === puma shutdown: 2018-10-25 16:25:11 -0700 ===
16:25:11 web.1    | - Goodbye!
16:25:11 web.1    | Exiting
16:25:11 web.1    | terminated by SIGTERM

Файл, вызывающий ошибку:

// development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig () Другой файл, который, как мне кажется, может понадобиться для решения этой проблемы:

// environment.js
const { environment } = require('@rails/webpacker')


environment.config.set('resolve.extensions', ['.jsx'])

environment.loaders.append('jsx', {
    test: /\.jsx$/,
    use: 'babel-preset-react'
  })

module.exports = {
    environment,
}

Первоначально, когда я впервые заставил сервер Rails работать с гемом response_on_rails, он выдавал ошибку unexpected token <div>, которая была связана с тем, что по умолчанию он не включает расширение jsx в оператор импорта стартового 'hello world' страница, и при этом не разрешает расширение в файле конфигурации веб-пакера, что я сделал сам, и я предполагаю, что, возможно, я сделал это неправильно?

В моем исследовании у меня сложилось впечатление, что babel нужен для использования расширения jsx? Это верно? Я заметил в разделе вопросов @ rails / webpacker, что они отметили, что set устарел в пользу append / prepend, однако, если я попытаюсь использовать любой из них для разрешения расширения, это приведет к ошибке в строке resolve.extensions, говоря, что environment.prepend является не функция. Мне кажется, что я правильно разрешаю расширение, но, может быть, не хватает чего-то еще, необходимого для использования расширения jsx?

Любой вклад приветствуется, спасибо!

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
1 086
1

Ответы 1

Видимо, это из-за фигурных скобок в заявлении об экспорте lol. После этого у меня все еще были проблемы, но потом я понял, что проблемы были от Foreman, и если я запустил webpack-dev-server и rails server отдельно, это сработало бы как шарм.

Другие вопросы по теме