yotoman455 commented 6 months ago

Hello,

Anybody can help me? I'm just learning Symfony and I'm facing a problem, which is difficult for me to find out what exactly is wrong.

I have installed via terminal:

symfony new app --webapp
composer req encore
npm install
npm build

Error on Terminal:

Module build failed: Module not found: "./assets/bootstrap.js" contains a reference to the file "@symfony/stimulus-bundle". This file can not be found, please check it for typos or update it if the file got moved.

screentshot

Error on Browser

screentshot2

assets/bootstrap.js

import { startStimulusApp } from '@symfony/stimulus-bundle';
const app = startStimulusApp();

importmap.php

<?php
return [
    'app' => [
        'path' => './assets/app.js',
        'entrypoint' => true,
    ],
    '@hotwired/stimulus' => [
        'version' => '3.2.2',
    ],
    '@symfony/stimulus-bundle' => [
        'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
    ],
    '@hotwired/turbo' => [
        'version' => '7.3.0',
    ],
];

package.json

{
    "devDependencies": {
        "@babel/core": "^7.17.0",
        "@babel/preset-env": "^7.16.0",
        "@symfony/webpack-encore": "^4.0.0",
        "core-js": "^3.23.0",
        "regenerator-runtime": "^0.13.9",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-notifier": "^1.15.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

composer.json

{
    "type": "project",
    "license": "proprietary",
    "minimum-stability": "stable",
    "prefer-stable": true,
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "doctrine/doctrine-bundle": "^2.11",
        "doctrine/doctrine-migrations-bundle": "^3.3",
        "doctrine/orm": "^2.17",
        "phpdocumentor/reflection-docblock": "^5.3",
        "phpstan/phpdoc-parser": "^1.24",
        "symfony/apache-pack": "^1.0",
        "symfony/asset": "7.0.*",
        "symfony/asset-mapper": "7.0.*",
        "symfony/console": "7.0.*",
        "symfony/doctrine-messenger": "7.0.*",
        "symfony/dotenv": "7.0.*",
        "symfony/expression-language": "7.0.*",
        "symfony/flex": "^2",
        "symfony/form": "7.0.*",
        "symfony/framework-bundle": "7.0.*",
        "symfony/http-client": "7.0.*",
        "symfony/intl": "7.0.*",
        "symfony/mailer": "7.0.*",
        "symfony/mime": "7.0.*",
        "symfony/monolog-bundle": "^3.0",
        "symfony/notifier": "7.0.*",
        "symfony/process": "7.0.*",
        "symfony/property-access": "7.0.*",
        "symfony/property-info": "7.0.*",
        "symfony/runtime": "7.0.*",
        "symfony/security-bundle": "7.0.*",
        "symfony/serializer": "7.0.*",
        "symfony/stimulus-bundle": "^2.13",
        "symfony/string": "7.0.*",
        "symfony/translation": "7.0.*",
        "symfony/twig-bundle": "7.0.*",
        "symfony/ux-turbo": "^2.13",
        "symfony/validator": "7.0.*",
        "symfony/web-link": "7.0.*",
        "symfony/webpack-encore-bundle": "^2.1",
        "symfony/yaml": "7.0.*",
        "twig/extra-bundle": "^2.12|^3.0",
        "twig/twig": "^2.12|^3.0"
    },
    "config": {
        "allow-plugins": {
            "php-http/discovery": true,
            "symfony/flex": true,
            "symfony/runtime": true
        },
        "sort-packages": true
    },
    "autoload": {
        "psr-4": {
            "App\\": "src/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "App\\Tests\\": "tests/"
        }
    },
    "replace": {
        "symfony/polyfill-ctype": "*",
        "symfony/polyfill-iconv": "*",
        "symfony/polyfill-php72": "*",
        "symfony/polyfill-php73": "*",
        "symfony/polyfill-php74": "*",
        "symfony/polyfill-php80": "*",
        "symfony/polyfill-php81": "*",
        "symfony/polyfill-php82": "*"
    },
    "scripts": {
        "auto-scripts": {
            "cache:clear": "symfony-cmd",
            "assets:install %PUBLIC_DIR%": "symfony-cmd",
            "importmap:install": "symfony-cmd"
        },
        "post-install-cmd": [
            "@auto-scripts"
        ],
        "post-update-cmd": [
            "@auto-scripts"
        ]
    },
    "conflict": {
        "symfony/symfony": "*"
    },
    "extra": {
        "symfony": {
            "allow-contrib": true,
            "require": "7.0.*"
        }
    },
    "require-dev": {
        "phpunit/phpunit": "^9.5",
        "symfony/browser-kit": "7.0.*",
        "symfony/css-selector": "7.0.*",
        "symfony/debug-bundle": "7.0.*",
        "symfony/maker-bundle": "^1.0",
        "symfony/phpunit-bridge": "^7.0",
        "symfony/stopwatch": "7.0.*",
        "symfony/web-profiler-bundle": "7.0.*"
    }
}

anybody knows what am I doing wrong?

would appriciate if anybody could help me solve it

Yoann-D commented 6 months ago

Hello @yotoman455 ,

I have the same problem as you.

Did you find the solution?

yotoman455 commented 6 months ago

Hi Yoann,

Yes found a solution. webpack-encore and symfony/asset-mapper can't work together. You must use webpack-encore or symfony/asset-mapper

I chose webpack-encore

What I did is

1. removed asset-mapper

composer remove symfony/asset-mapper

2. installed webpack-encore

composer require encore --dev

3. replaced all (asset-mapper code) in bootstrap.js to the following webpack-encore's

// assets/bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bridge';

// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.[jt]sx?$/
));

4. added to app.js

import './bootstrap.js'

5. npm run dev

npm install
npm run build
npm run dev

And it worked for me fine without any errors