How to make this work with cra app or with a .babelrc file?

[vivek12345]

My application is a cra app and the packagebind README mostly mentions around using it with a babel.config.js file.

But most of the CRA apps add the babel config which is not visible unless you eject. The solution to that is using something like react-app-rewired but from what I have seen that too relies on a .babelrc file.

Do we have an easy way to make this work with CRA apps and with apps which are using .babelrc instead of babel.config.js

[vivek12345]

So I got this to work with a .babelrc.js file and react-app-rewired.
I still see an error like the below

index.js: Unexpected token (17:9)
> 17 |   return <React.Fragment>{children}</React.Fragment>;

It seems like for some reason it is unable to identify the jsx syntax.

Any help here?

[s-yadav]

I guess when you are using .babelrc.js, it's ignoring the CRA default babel config. Can you try adding on @babel/preset-react on .babelrc.js?

[vivek12345]

Thanks @s-yadav for the quick response.
Actually my .babelrc.js file is like this

const packagebind = require('packagebind');

const babelConfig = {
  presets: [['@babel/preset-env'], ['@babel/preset-react']],
  plugins: [
    ['babel-plugin-styled-components'],
    ['@babel/plugin-proposal-class-properties'],
    [
      'module-resolver',
      {
        alias: {
          'dashboard-kit': '../dashboard-kit/src',
        },
      },
    ],
  ],
};

module.exports = packagebind(babelConfig);

Also over here I see you are reading from the root path
https://github.com/interviewstreet/packagebind/blob/master/src/index.js#L38

In my case my babelrc of dashboard-kit would be in the root and not inside src

[vivek12345]

src is where my components lie which have not gone through babel .

What I need is when I use any component from dashboard-kit I would want to see the components exported from inside of src which are es6, jsx code and babel to run on them like it does when we are developing something locally.

The above seems to be not happening

I hope I am able to explain my problem correctly

[vivek12345]

If I remove the src from ../dashboard-kit/src and just keep it ../dashboard-kit then it works but what I am getting is just the build folder with one index.js file

[s-yadav]

Thanks @s-yadav for the quick response.
Actually my .babelrc.js file is like this

const packagebind = require('packagebind');

const babelConfig = {
  presets: [['@babel/preset-env'], ['@babel/preset-react']],
  plugins: [
    ['babel-plugin-styled-components'],
    ['@babel/plugin-proposal-class-properties'],
    [
      'module-resolver',
      {
        alias: {
          'dashboard-kit': '../dashboard-kit/src',
        },
      },
    ],
  ],
};

module.exports = packagebind(babelConfig);

Also over here I see you are reading from the root path
https://github.com/interviewstreet/packagebind/blob/master/src/index.js#L38

In my case my babelrc of dashboard-kit would be in the root and not inside src

Your babel config looks correct.

findRepoRootPath method finds the root path for aliased repo recursively going up to the folder tree until it find package.json. It treats the path where package.json is defined as rootPath.

[vivek12345]

My bad I should have looked at the implementation of findRepoRootPath.
In that case I have no clue why does it still throw an unexpected token for a valid jsx

[s-yadav]

If I remove the src from ../dashboard-kit/src and just keep it ../dashboard-kit then it works but what I am getting is just the build folder with one index.js file

This works because it starts pointing to lib / dist files which are already transpiled.

It should work with source file as well. If your babel is configured properly.

[s-yadav]

Can we come over hangout now? It will be easier for me there to help. I feel its something to do with CRA, but I haven't tried it on CRA, so not sure about the exact problem

[vivek12345]

sure that would be really helpful if we can connect over hangouts

[s-yadav]

I was able to make it work on an ejected CRA app.

Removing the ModuleScopePlugin and include from webpack config worked.
See this commit

s-yadav/number-format-app@6b97d58

Ejected Repo:
https://github.com/s-yadav/number-format-app

[vivek12345]

@s-yadav Thanks for all your help in debugging this.
Since unfortunately I do not have the option of ejecting my CRA app, here is my solution to make it work with a non-ejected CRA 2.0 app.

npm install [email protected] // as react-scripts depends on this version

1. We need customize-cra and react-app-rewired to re-write our webpack config easily.
   Please read about them here customize-cra

yarn add customize-cra react-app-rewired --dev

2. Create a babel.config.js file as non-ejected CRA apps would need this.

const packagebind = require('packagebind');

const babelConfig = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: [
    ['@babel/plugin-proposal-class-properties'],
    [
      'module-resolver',
      {
        alias: {
          'dashboard-kit': '../dashboard_components/src',
        },
      },
    ],
  ],
};

module.exports = packagebind(babelConfig);

3. Finally in your config-overrides.js file put the following code:-

const { override, removeModuleScopePlugin, addWebpackModuleRule } = require('customize-cra');
module.exports = override(
  removeModuleScopePlugin(),
  addWebpackModuleRule({
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    exclude: /node_modules/,
    loader: require.resolve('babel-loader'),
    options: {
      babelrc: false,
      configFile: true,
      compact: false,
      cacheDirectory: true,
      cacheCompression: true,

      // If an error happens in a package, it's possible to be
      // because it was compiled. Thus, we don't want the browser
      // debugger to show the original code. Instead, the code
      // being evaluated would be much more helpful.
      sourceMaps: false,
    },
  })
);

Please let me know if I can send a PR to update the README with the changes mentioned above for a non ejected CRA app.

[s-yadav]

@vivek12345 Sorry I missed to see this earlier. Yes PR will be much appreciated.