Razzle with Bit.dev

[sebay00]

Description

❓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

Specifications

• Bit version: 14.7.6
• Node version:v10.19.0
• npm / yarn version: 1.22.0
• Platform:Mac
• Bit compiler (include version): bit.envs/bundlers/webpack@4.0.1

Context and additional information

I'm just trying to add my Button on my project from the Bit lib i created. But can't do it.

[JoshK2]

Hi, as we discussed on Slack, I do now a POC with Razzle to see what happens with a simple component. I'm checking what we can do with the razzle-preset https://www.npmjs.com/package/babel-preset-razzle

[sebay00]

No news on this ?

[JoshK2]

Hi @sebay00 , 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]

@sebay00 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.

[JoshK2]

This issue is solved so I close it.