CODEWITHSUNDEEP
javascriptecmascript-6browserifyes6-modules
Jesper
Jesper

Reputation: 7605

Can I mix a Browserify bundle/module scripts with <script src> included scripts?

I am working on a project that is adopting Browserify at a late stage.

We have many React components included manually, along with the their dependencies, as <script> tags where they are needed, including a handful of files including common React components. 

<!-- includes ComponentA and dependencies, including React -->
<script src="/js/browserify-bundle.js"></script>

<script src="/js/react.min.js"></script> <!-- React included here too -->
<script src="/js/react-dom.min.js"></script>
<!-- ...more dependencies... -->
<script src="/js/common-components.js"></script> 
<!-- ...more components/script includes... -->

I'm working on the first React component being written as an ES6 module, but due to our situation the module dependencies end up being loaded twice; first from the manual dependency given in the script tag and then from the Browserify bundle.

Removing the script tag including React breaks the common components, but leaving it in causes React duplication errors like this because there are two Reacts floating around there.

Does this mean that there's no way of temporarily bridging this gap by (for example) telling Browserify to use the manual React include? With this, we could start using Browserify piecemeal. Is it absolutely necessary to make all our components/scripts into ES6 modules and make everything use Browserify through and through to avoid this?

Upvotes: 0

Views: 501

Answers (1)

casr
casr

Reputation: 1226

Maybe you can use browserify-shim for your situation. It allows you to declare that a module is already available from the global scope.

In your package.json:

"browserify-shim": {
  "react": "global:React"
},
"browserify": {
  "transform": [ "browserify-shim" ]
}

Hopefully that will allow you to bridge the gap for now.

Upvotes: 1

Related Questions