2

現在、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 命令が原因) がここに添付されています。

エラー 完全 完全な説明

解決策や追跡を教えてくれる皆さんに感謝します

心から

4

0 に答える 0