Razzle with Bit.dev

[sebay00]

❓Question

Hello everyone,

I'm trying to associate my component lib (on Bit.dev) with razzle, but I just can't make it work.

yarn run v1.22.0
$ razzle start
 WAIT  Compiling...


✔ Client
  Compiled successfully in 2.91s

✔ Server
  Compiled successfully in 327.59ms

undefined:1
;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA;;;;;;;;AAQA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,eAAD,EAAqB;AACzC,MAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA;;AAAA,QAChBC,OADgB,QAChBA,OADgB;AAAA,QAEhBC,MAFgB,QAEhBA,MAFgB;AAAA,QAGhBC,OAHgB,QAGhBA,OAHgB;AAAA,QAIhBC,KAJgB,QAIhBA,KAJgB;AAAA,QAKhBC,KALgB,QAKhBA,KALgB;AAAA,QAMhBC,IANgB,QAMhBA,IANgB;AAAA,QAOhBC,SAPgB,QAOhBA,SAPgB;AAAA,QAQhBC,gBARgB,QAQhBA,gBARgB;AAAA,QASbC,UATa;;AAAA,wBAWhB,gCAAC,eAAD,eACMA,UADN;AAEE,MAAA,UAAU,EAAE,sEACNR,OADM,GACMA,OADN,yCAECC,MAFD,GAEYA,MAFZ,0CAGEC,OAHF,GAGcA,OAHd,wCAIAC,KAJA,GAIUA,KAJV,wCAKAC,KALA,GAKUA,KALV,yCAMKG,gBANL,gCAOVF,IAPU,qCAQVC,SARU;AAFd,OAXgB;AAAA,GAAlB;;AA0BAP,EAAAA,SAAS,CAACU,SAAV,GAAsB;AACpBL,IAAAA,KAAK,EAAEM,sBAAUC,KAAV,CAAgBC,iBAAhB,CADa;AAEpBT,IAAAA,KAAK,EAAEO,sBAAUC,KAAV,CAAgBE,iBAAhB,CAFa;AAGpBR,IAAAA,IAAI,EAAEK,sBAAUI,IAHI;AAIpBR,IAAAA,SAAS,EAAEI,sBAAUI,IAJD;AAKpBd,IAAAA,OAAO,EAAEU,sBAAUC,KAAV,CAAgBI,kBAAhB,CALW;AAMpBd,IAAAA,MAAM,EAAES,sBAAUC,KAAV,CAAgBK,kBAAhB,CANY;AAOpBd,IAAAA,OAAO,EAAEQ,sBAAUC,KAAV,CAAgBK,kBAAhB,CAPW;AAQpBT,IAAAA,gBAAgB,EAAEG,sBAAUI;AARR,GAAtB;AAWAf,EAAAA,SAAS,CAACkB,YAAV,GAAyB;AACvBb,IAAAA,KAAK,EAAEc,SADgB;AAEvBf,IAAAA,KAAK,EAAEe,SAFgB;AAGvBb,IAAAA,IAAI,EAAE,KAHiB;AAIvBC,IAAAA,SAAS,EAAE,KAJY;AAKvBN,IAAAA,OAAO,EAAEkB,SALc;AAMvBjB,IAAAA,MAAM,EAAEiB,SANe;AAOvBhB,IAAAA,OAAO,EAAEgB,SAPc;AAQvBX,IAAAA,gBAAgB,EAAE;AARK,GAAzB;AAWA,SAAOR,SAAP;AACD,CAlDD;;eAoDeF,a
^

SyntaxError: Unexpected token ; in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.parseSourceMapInput (/Users/sebayou/Projects/sandy/services/test-razzle/node_modules/source-map/lib/util.js:433:15)
    at new SourceMapConsumer (/Users/sebayou/Projects/sandy/services/test-razzle/node_modules/source-map/lib/source-map-consumer.js:17:22)
    at mapSourcePosition (/Users/sebayou/Projects/sandy/services/test-razzle/node_modules/source-map-support/source-map-support.js:200:14)
    at wrapCallSite (/Users/sebayou/Projects/sandy/services/test-razzle/node_modules/source-map-support/source-map-support.js:377:20)
    at prepareStackTrace (/Users/sebayou/Projects/sandy/services/test-razzle/node_modules/source-map-support/source-map-support.js:426:39)
    at Function.Error.prepareStackTrace (/Users/sebayou/Projects/sandy/services/test-razzle/node_modules/razzle-dev-utils/prettyNodeErrors.js:37:34)
    at maybeOverridePrepareStackTrace (internal/errors.js:86:29)
    at prepareStackTrace (internal/errors.js:65:5)
    at process.emit (/Users/sebayou/Projects/sandy/services/test-razzle/node_modules/source-map-support/source-map-support.js:487:52)

I think that I have a problem with my bundler not liking the import like:

import React from "react";
import Button from "@bit/my-repo.button"; // If i comment this line, that works like a charm

class Home extends React.Component {
  render() {
    return (
      <Button variant="secondary" size="lg" margin="right-xs">
        Button example
      </Button>
    );
  }
}

export default Home;

Does someone make it work ? And explain me how plz

[JoshK2]

Hi, I found the root cause of this problem.
It’s because the React compiler of Bit has in .babelrc the flag sourceMaps set to true, so it’s generating source maps file and causing this issue.
I can think about two solutions:
The first is to find a way in Razzle config to exclude files typed *.js.map.
The second solution (I tried it and it works) is to fork the compiler and export a new one to your account in bit.dev.

[JoshK2]

No needs to fork the compiler!
Just add the following configuration to your razzle.config.js file:

const nodeExternals = require('webpack-node-externals')

module.exports = {
  modify: (config, { target, dev }) => {
    config.externals =
      target === 'node'
        ? [
            nodeExternals({
              whitelist: [
                dev ? 'webpack/hot/poll?300' : null,
                /\.(eot|woff|woff2|ttf|otf)$/,
                /\.(svg|png|jpg|jpeg|gif|ico)$/,
                /\.(mp4|mp3|ogg|swf|webp)$/,
                /\.(css|scss|sass|sss|less)$/,
                /^@bit\/(.*)/,
              ].filter(Boolean),
            }),
          ]
        : []
    return config
  },
}

This is a simple example based on the Razzle repo.
I tested it on a few components, and it works.
I think the issue can be closed.

[stevepepple]

This was a big help to me. Thanks!