How to transpile specific package in node_modules using craco

39 views Asked by At

I have a React app created using create-react-app. I want to use esnext version of vis-timeline library. As docs says, this version is untranspiled and I need to transpile it manually.

The following is my craco config.

const path = require("path");

module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
  webpack: {
    configure(webpackConfig) {
      webpackConfig.module.rules.push({
        test: /\.(js|ts)$/,
        include: [
          path.resolve(__dirname, "src"),
          /node_modules\/vis-timeline\/esnext/,
        ],
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: ["@babel/plugin-transform-optional-chaining"],
          },
        },
      });

      return webpackConfig;
    },
  },
};

When I run development server with craco start command, I receive this error:

enter image description here

And a lot of errors in the browser console:

enter image description here

It looks like I broke the transpilation process completely. How can I transpile a specific node_modules from craco.config.js?

Package versions:

  • "@craco/craco": "^6.2.0"
  • "typescript": "^4.1.2"
  • "react": "^17.0.2".
0

There are 0 answers