Type error using Symfony 7

[smaniren]

Hi everyone

I'm using symfony 7 with encore.

i dont know what i'm doing wrong here. i always get the following error in my Dev-Tools-Console:
Uncaught TypeError: Failed to resolve module specifier "@symfony/stimulus-bridge". Relative references must start with either "/", "./", or "../".

this is my webpack config:

const Encore = require("@symfony/webpack-encore");

const path = require("path");

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || "dev");
}

Encore
  // directory where compiled assets will be stored
  .setOutputPath("public/build/")
  // public path used by the web server to access the output path
  .setPublicPath("/build")
  // only needed for CDN's or subdirectory deploy
  //.setManifestKeyPrefix('build/')

  /*
   * ENTRY CONFIG
   *
   * Each entry will result in one JavaScript file (e.g. app.js)
   * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
   */

  // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
  .splitEntryChunks()

  // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
  .enableStimulusBridge("./assets/controllers.json")

  // will require an extra script tag for runtime.js
  // but, you probably want this, unless you're building a single-page app
  .enableSingleRuntimeChunk()


  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  // enables hashed filenames (e.g. app.abc123.css)
  .enableVersioning(Encore.isProduction())

  // enables and configure @babel/preset-env polyfills
  .configureBabelPresetEnv((config) => {
    config.useBuiltIns = "usage";
    config.corejs = "3.23";
  })

  // enables Sass/SCSS support
  //.enableSassLoader()

  // uncomment if you use TypeScript
  .addEntry("app", "./assets/main.ts")

  .enableTypeScriptLoader()

  .enablePostCssLoader()

  .configureDevServerOptions((options) => {
    options.allowedHosts = "all"; // allows connections from any host
    (options.headers = {
      "Access-Control-Allow-Origin": "*", // allow any origin
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization",
    }),
      (options.liveReload = true);
    options.static = {
      watch: false,
    };
    options.watchFiles = {
      paths: ["src/**/*.php", "templates/**/*"],
    };
  });
module.exports = Encore.getWebpackConfig();

my assets/controllers.json file:

{
  "controllers": {},
  "entrypoints": []
}

main.ts:

/*
 * Welcome to your app's main JavaScript file!
 *
 * This file will be included onto the page via the importmap() Twig function,
 * which should already be in your base.html.twig.
 */
import "./styles/app.css";
import "./bootstrap.ts";
import "./ts/dataTables.ts";

import { startStimulusApp } from "@symfony/stimulus-bridge";

export const app = startStimulusApp(
  require.context(
    "../node_modules/@symfony/stimulus-bridge/lazy-controller-loader!./controllers",
    true,
    /\.(j|t)sx?$/
  )
);

I cannot get rid of the error. Has anyone had this issue as well?

Thanks for your help!

[tgalopin]

Hello @smaniren !

Could you share you package.json file? It seems the @symfony/stimulus-bridge node module isn't installed on your project.

[smaniren]

Hi @tgalopin!

here's my package.json:

{
  "devDependencies": {
    "@babel/core": "^7.17.0",
    "@babel/preset-env": "^7.16.0",
    "@symfony/webpack-encore": "^4.0.0",
    "@tailwindcss/forms": "^0.5.6",
    "@types/hotwired__turbo": "^8.0.1",
    "autoprefixer": "^10.4.16",
    "core-js": "^3.23.0",
    "dat.gui": "^0.7.9",
    "dotenv": "^16.3.1",
    "postcss": "^8.4.31",
    "postcss-loader": "^7.3.3",
    "regenerator-runtime": "^0.13.9",
    "tailwindcss": "^3.3.3",
    "ts-loader": "^9.5.1",
    "typescript": "^5.6.2",
    "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",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  },
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo": "^8.0.12",
    "@symfony/stimulus-bridge": "^3.2.2",
    "axios": "^1.7.7",
    "datatables.net-dt": "^2.1.6",
    "datatables.net-rowreorder-dt": "^1.5.0",
    "gsap": "^3.12.2",
    "marked": "^10.0.0",
    "three": "^0.158.0",
    "threejs-object-controls": "^1.2.8"
  }
}

[smaniren]

I just fixed it somehow, but i'm not sure how. I just deleted my public/assets folder and rebuilt it. now the error is gone