0

I am having trouble getting React components to work in my Twig templates in Symfony2, using RequireJS to initiate them. I was trying to get this one to work: https://github.com/rackt/react-autocomplete

First I installed it, locally, in parallel to where I have my css files for my templates:

npm install react-autocomplete

Then, some selected parts from my twig template:

<html>    
   <head>
       <script src="https://fb.me/react-0.13.1.js"></script>
       <script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js">    </script>
   </head>
<body>
    <div id="react_demo">
        <script type="text/jsx">
            require(["{{asset('/bundles/demobundle/js/node_modules/react-autocomplete')}}"], function (ReactAutocomplete) {
                          alert('react-autocomplete loaded');
                          });
         </script>
    </div>
</body>
</html>

And now, to the problem: it doesn't seem to find my React component - or doesn't understand that it is a React component I'm trying to load... for some background info I haven't done anything except for including the React and Require JS files, and install the component. Perhaps I've missed something?

Uncaught Error: Load timeout for modules: /bundles/demobundle/js/node_modules/react-autocomplete
joakimnorberg
  • 655
  • 3
  • 10
  • 16

1 Answers1

0

That one looks like a CommonJS module and while those can be loaded with RequireJS it needs some additional configuration.

While the packages can have the CommonJS directory layout, the modules themselves should be in a module format that RequireJS can understand. Exception to the rule: if you are using the r.js Node adapter, the modules can be in the traditional CommonJS module format. You can use the CommonJS converter tool if you need to convert traditional CommonJS modules into the async module format that RequireJS uses.

Also see http://requirejs.org/docs/commonjs.html and https://stackoverflow.com/a/16522990/1630906

Community
  • 1
  • 1
ekuusela
  • 5,034
  • 1
  • 25
  • 43
  • Thanks, i took this out of the Symfony context to at least take that out of the equation, so it's now more down to writing a requireJS config that can wrap the CommonJS thing. I managed to get the actual loading to work but now it's complaining about modules not being loaded. Made a new post here: http://stackoverflow.com/questions/29652716/module-exports-module-is-not-defined – joakimnorberg Apr 15 '15 at 14:17