現在、reactJs + Symfony 4.3 + WebPack スタックで問題が発生しています。「ReferenceError: window is not defined」というエラーが表示されます 以下は、package.jon、composer.json、webpack Config、コントローラー symfony のコードです。
これが私のComposer.Jsonです
{
"type": "project",
"license": "proprietary",
"require": {
"php": "^7.1.3",
"ext-ctype": "*",
"ext-iconv": "*",
"limenius/react-bundle": "^3.0",
"sensio/framework-extra-bundle": "^5.1",
"symfony/asset": "4.3.*",
"symfony/console": "4.3.*",
"symfony/dotenv": "4.3.*",
"symfony/expression-language": "4.3.*",
"symfony/flex": "^1.1",
"symfony/form": "4.3.*",
"symfony/framework-bundle": "4.3.*",
"symfony/http-client": "4.3.*",
"symfony/intl": "4.3.*",
"symfony/monolog-bundle": "^3.1",
"symfony/orm-pack": "*",
"symfony/process": "4.3.*",
"symfony/security-bundle": "4.3.*",
"symfony/serializer-pack": "*",
"symfony/swiftmailer-bundle": "^3.1",
"symfony/translation": "4.3.*",
"symfony/twig-bundle": "4.3.*",
"symfony/validator": "4.3.*",
"symfony/web-link": "4.3.*",
"symfony/webpack-encore-bundle": "^1.6",
"symfony/yaml": "4.3.*"
},
"require-dev": {
"symfony/debug-pack": "*",
"symfony/maker-bundle": "^1.0",
"symfony/profiler-pack": "*",
"symfony/test-pack": "*",
"symfony/web-server-bundle": "4.3.*"
},
"config": {
"preferred-install": {
"*": "dist"
},
"sort-packages": true
},
"autoload": {
"psr-4": {
"App\\": "src/"
}
},
"autoload-dev": {
"psr-4": {
"App\\Tests\\": "tests/"
}
},
"replace": {
"paragonie/random_compat": "2.*",
"symfony/polyfill-ctype": "*",
"symfony/polyfill-iconv": "*",
"symfony/polyfill-php71": "*",
"symfony/polyfill-php70": "*",
"symfony/polyfill-php56": "*"
},
"scripts": {
"auto-scripts": {
"cache:clear": "symfony-cmd",
"assets:install %PUBLIC_DIR%": "symfony-cmd"
},
"post-install-cmd": [
"@auto-scripts"
],
"post-update-cmd": [
"@auto-scripts"
]
},
"conflict": {
"symfony/symfony": "*"
},
"extra": {
"symfony": {
"allow-contrib": false,
"require": "4.3.*"
}
}
}
これが私のPackage.Jsonです
{
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"@symfony/webpack-encore": "^0.27.0",
"babel-eslint": "^10.0.2",
"core-js": "^3.0.0",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress",
"webpack-serverside": "encore dev --config webpack.config.serverside.js --watch"
},
"dependencies": {
"global": "^4.4.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-on-rails": "^11.3.0",
"react-router-dom": "^5.0.1"
}
}
これが私のwebpack.config.jsです
var Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.copyFiles({
from: './assets/images',
})
.addEntry('app', './assets/js/app.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})
.enableReactPreset()
;
module.exports = Encore.getWebpackConfig();
私のテンプレート小枝
{% extends 'base.html.twig' %}
{% block body %}
<div id="root"><div>
{# {{ react_component('Entry', {'props': {'data': '', 'data2': ''} }) }} #}
{{ react_component('KatikaChallengeMobileApp', {'props': {} }) }}
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="{{ asset('build/js/app.js') }}"></script>
{% endblock %}
発生したエラー (react_component 命令が原因) がここに添付されています。
解決策や追跡を教えてくれる皆さんに感謝します
心から