symfony / stimulus-bridge

Stimulus integration bridge for Symfony projects
https://symfony.com/ux
75 stars 15 forks source link

Your controllers.json file was not found #30

Closed Dannebicque closed 3 years ago

Dannebicque commented 3 years ago

Hello,

I used Symfony/ux-chartjs, for a few weeks, no problem. Today I updated my package.json, especially by switching to the latest version of webpack/again (1.0.5), Stymulus (2), and it no longer works :(

I have this error, when I run "yarn encore dev" Syntax Error: Error: Your controllers.json file was not found. Be sure to add a Webpack alias from "@symfony/stimulus-bridge/controllers.json" to your controllers.json file.

But, I have my controllers.json in assets/

{
  "controllers": {
    "@symfony/ux-chartjs": {
      "chart": {
        "enabled": true,
        "fetch": "eager",
        "webpackMode": "eager"
      }
    }
  },
  "entrypoints": []
}

And in Webpack

.enableStimulusBridge(
    './assets/controllers.json'
  )

I think i have the good configuration ?

Thanks for your help David

tgalopin commented 3 years ago

Hi! Did you update the stimulus-bridge to 2.0 as well?

Dannebicque commented 3 years ago

(I edit my message, I first, thinks that all is OK, but no, always the same error message)

Yes, everything was up to date. I Think.

Here my package.json

{
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.13.1",
    "@symfony/stimulus-bridge": "^2.0.0",
    "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets",
    "@symfony/webpack-encore": "^1.0.0",
    "bootstrap": "^4.5.0",
    "bootstrap-select": "^1.13.18",
    "core-js": "^3.0.0",
    "css-loader": "^5.0.1",
    "datatables.net": "^1.10.21",
    "file-loader": "^6.2.0",
    "jquery": "^3.5.1",
    "node-sass": "^4.14.1",
    "perfect-scrollbar": "^1.5.0",
    "quill": "1.3.6",
    "regenerator-runtime": "^0.13.2",
    "sass-loader": "^9.0.3",
    "stimulus": "^2.0.0",
    "sweetalert2": "^9.17.0",
    "ts-loader": "^8.0.15",
    "typescript": "^4.0.2",
    "vue": "^2.5",
    "vue-loader": "^15",
    "vue-template-compiler": "^2.6.12",
    "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"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-preset-es2015": "^6.24.1",
    "html-loader": "^1.3.2",
    "popper.js": "^1.16.1"
  },
  "version": "1.0.3"
}

And here, my webpack.config.js


var Encore = require('@symfony/webpack-encore')
var 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 sub-directory deploy

  /*
   * ENTRY CONFIG
   *
   * Add 1 entry for each "page" of your app
   * (including one that's included on every page - e.g. "app")
   *
   * 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.
   */
  .addEntry('app', './assets/app.js')
  .addEntry('covid', './assets/js/pages/covid.js')
  .addEntry('sadmCovid', './assets/js/pages/sadmCovid.js')
  .addEntry('agenda', './assets/js/pages/agenda.js')
  .addEntry('datatable', './assets/js/datatable.js')
  .addEntry('quill', './assets/js/quill.js')
  .addEntry('trombinoscope', './assets/js/pages/trombinoscope.js')
 //... other entry...

  //VueJs
  //.enableVueLoader()
  .enableStimulusBridge('./assets/controllers.json')

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

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

  /*
   * FEATURE CONFIG
   *
   * Enable & configure other features below. For a full
   * list of features, see:
   * https://symfony.com/doc/current/frontend.html#adding-more-features
   */
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  // enables hashed filenames (e.g. app.abc123.css)
  .enableVersioning(Encore.isProduction())

  // enables @babel/preset-env polyfills
  .configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage'
    config.corejs = 3
  })

  // enables Sass/SCSS support
  .enableSassLoader()

// uncomment if you're having problems with a jQuery plugin
  .autoProvidejQuery()
  .configureBabel(function (babelConfig) {
    // add additional presets
    //babelConfig.presets.push('@babel/preset-es2015');

    // no plugins are added by default, but you can add some
    //babelConfig.plugins.push('styled-jsx/babel');
  }, {})
  //.disableImagesLoader()
  .addRule({
    test: /\.(svg|png|jpg|jpeg|gif|ico)/,
    exclude: /node_modules\/quill\/assets\/icons\/(.*)\.svg$/,
    use: [{
      loader: 'file-loader',
      options: {
        filename: 'images/[name].[hash:8].[ext]',
        publicPath: '/build/'
      }
    }]
  })
  .addLoader(
    {
      test: /\.svg$/,
      use: [{
        loader: 'html-loader',
        options: {
          minimize: true
        }
      }]
    }
  )
  .addLoader({
    test: /\.ts$/,
    use: [{
      loader: 'ts-loader',
      options: {
        compilerOptions: {
          declaration: false,
          target: 'es5',
          module: 'commonjs'
        },
        transpileOnly: true
      }
    }]
  })

config = Encore.getWebpackConfig()

config.resolve.alias = {
  'parchment': path.resolve(__dirname, 'node_modules/parchment/src/parchment.ts'),
  'quill$': path.resolve(__dirname, 'node_modules/quill/quill.js')
}
config.resolve.extensions = ['.js', '.ts', '.svg']

module.exports = config

I try to reinstall all the elements (Stimulus, Symfony UX, ChartJs, update all the dependencies), but always the same message.

Dannebicque commented 3 years ago

Hello,

I try, again to reinstall all the package, but always the same error. I use Webpack 5, maybe it is the problem ? If I comment the line in se Symfony/stimulus-bridge which show the message,

  // if ('undefined' !== typeof config['placeholder']) {
  //   throw new Error('Your controllers.json file was not found. Be sure to add a Webpack alias from "@symfony/stimulus-bridge/controllers.json" to *your* controllers.json file.');
  // }
  //
  // if ('undefined' === typeof config['controllers']) {
  //   throw new Error('Your Stimulus configuration file (assets/controllers.json) lacks a "controllers" key.');
  // }

the compilation works, necessarily, but I have no charts in my page :( I really do not understand the message, because I have the file, and if I test the condition, I have "true" as an answer for config['placeholder'], because it takes the value of the initial controllers.json in the package ? not mine?

If I put my controllers.json directly inside the nodes_modules (to test...) All works fine. I don't know if theses informations can help...

Thanks.

mdriessen commented 3 years ago

Hi! I've had the same problem and compared your config with mine. It turns out the alias is overwritten by setting it with config.resolve.alias = {....}. Instead you need to call Encore.addAliases({}) for adding your parchment and quill alias instead of overwriting the array.

tgalopin commented 3 years ago

Ah indeed, the bridge now uses an alias that you shouldn't override (I didn't notice it in your config initially).

Dannebicque commented 3 years ago

Hi @mdriessen et @tgalopin

Many thanks, it works fine now ! I would never have found this mistake. Many thanks !!

I Close this issue.