Custom Babel config

[Juan David Castro]

I'm trying to use styled-jsx along with mdx-go, but I'm breaking the code trying to modify the babel plugins: https://github.com/zeit/styled-jsx#getting-started.

[Brent Jackson]

Currently the webpack babel-loader is set to babelrc: false to avoid unintentional conflicts. Have you tried with a custom webpack config? (Not sure if that would work right now, but it might)

[Juan David Castro]

My current solution is to copy and paste the necessary code from lib/config.js and modify as I need:

// webpack.config.js
const path = require('path');

const babel = {
  babelrc: false,
  presets: [
    [
      require.resolve('@babel/preset-env'),
      { modules: false }
    ],
    require.resolve('@babel/preset-react'),
  ],
  plugins: [
    require.resolve('@babel/plugin-proposal-class-properties'),
    require.resolve('@babel/plugin-proposal-export-default-from'),
    require.resolve('@babel/plugin-proposal-export-namespace-from'),
    require.resolve('@babel/plugin-transform-runtime'),
    require.resolve('@babel/plugin-syntax-dynamic-import'),
    require.resolve('styled-jsx/babel'), // this is all I need for styled-jsx
  ]
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: require.resolve('babel-loader'),
          options: babel
        }
      }
    ],
  },
  resolve: { // I tried babel-plugin-module-resolver but this way is easier
    alias: {
      'components': path.resolve('./src/components'),
      'utils': path.resolve('./src/utils'),
    },
  },
};

[Juan David Castro]

A better solution could be a mdx-go.config.js file with custom and "secure" configs. As well as Next.js with next.config.js: https://nextjs.org/docs#custom-configuration.

[Brent Jackson]

Thanks! I don't think mdx-go should have its own config – it would add to the API surface area and this is really a babel configuration issue. With the changes from babel 6 to 7, supporting custom babel configs for all use-cases is very tricky, but I'd consider allowing the babel-loader to pick up custom configs for v7 only. Would need to test this out and make sure it works first

[Brent Jackson]

I just tested out a custom babel.config.js locally with styled-jsx and it seemed to work with the latest version... I'm wondering if you've run into a bug somewhere, so it'd be helpful if you could test this out on your end.

In my babel.config.js I have:

module.exports = {
  plugins: [
    'styled-jsx/babel'
  ]
}

Running mdx-go@2.0.0-23 as a global install

[Brent Jackson]

Closing this out, but feel free to open a new issue if custom babel.config.js files aren't working