Unable to make it work with antd and typescript

[abenhamdine]

Hello,

Thx for this plugin. Unfortunately, I didn't manage to make it work with typscript.

Here is my craco config :

const CracoAntDesignPlugin = require('craco-antd')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const WebpackBar = require('webpackbar')

module.exports = {
    webpack: {
        plugins: [
            new BundleAnalyzerPlugin(),
            new WebpackBar({ profile: true }),
        ],
    },
    plugins: [{ plugin: CracoAntDesignPlugin }],
}

If I run yarn run start :

Failed to compile.

./src/index.tsx
Module not found: Can't resolve 'resources/main.less' in '/home/arhia/Documents/projects/payroll-app-next/client/src'

My previous config with react-app-rewired was :

const { injectBabelPlugin } = require('react-app-rewired')
const rewireLess = require('react-app-rewire-less')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const rewireTsJest = require('react-app-rewire-ts-jest')
const WebpackBar = require('webpackbar')

module.exports = {
    webpack: function (config, env) {

        const path = require('path')
        // For import with absolute path
        config.resolve.modules = [path.resolve('src')].concat(config.resolve.modules)

        config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config)  // change importing css to less

        const options = {
            javascriptEnabled: true,
            // We use modifyVars option of less-loader here, you can see a orange button rendered on the page after reboot start server.
            modifyVars: {
                "@primary-color": "#f48b31",
                "@font-size-base": "16px",
                "@font-family": "Nunito",
                "@layout-header-background": "#fff",
                "@layout-trigger-color": "#565558",
                "@layout-trigger-background": "#fff"
            },
        }
        config = rewireLess.withLoaderOptions(options)(config, env)

        /*
        === webpack plugins ===
        Note : we prefer to add new webpack plugins here by ourselves as following, rather than using third-party helpers like rewire-some-plugin-XXX
        because they add an unecessary abstraction only to add a plugin in config.plugins array
        */
        config.plugins = (config.plugins || []).concat([
            new BundleAnalyzerPlugin(),
            new WebpackBar({
                profile: true,
            })
        ])

        return config

    },
    jest: function (config) {

        // placeholder
        const configTsJest = {}
        config = rewireTsJest(config, configTsJest)
        config = {
            ...config,
            reporters: [
                "default",
                ["./node_modules/jest-html-reporter", {
                    pageTitle: "Payroll-app-next: Tests suite",
                    outputPath: "tests/report/index.html",
                    includeFailureMsg: true,
                    dateFormat: "dd/mm/yyyy HH:MM",
                    sort: 'status'
                }]
            ],
            collectCoverage: true,
            collectCoverageFrom: [
                "src/**/*.{ts,tsx}"
            ],
            coveragePathIgnorePatterns: [
                "src/state/state.d.ts"
            ],
            coverageReporters: [
                "html",
                "json"
            ]
        }

        return config
    }
}

Have you any idea to resolve this issue ?

[abenhamdine]

Ok my bad, it was due to an absolute import in one of my files :

import '/resources/main.less'

which was handled by config-override but not by my craco config with these lines :

const path = require('path')
config.resolve.modules = [path.resolve('src')].concat(config.resolve.modules)

If I modify it to a relative import it works.

[ndbroadbent]

Hi, sorry you ran into that issue! Here's how you can do the same thing with craco:

const CracoAntDesignPlugin = require('craco-antd');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const WebpackBar = require('webpackbar');
const path = require('path');

module.exports = {
  webpack: {
    plugins: [new BundleAnalyzerPlugin(), new WebpackBar({ profile: true })],
    configure: config => {
      config.resolve.modules = [path.resolve('src')].concat(config.resolve.modules);
      return config;
    },
  },
  plugins: [{ plugin: CracoAntDesignPlugin }],
};

I just tried that out and it sets up the same resolve.modules in your webpack config. Hope that helps!

[ndbroadbent]

Also I just realized that you can continue using react-app-rewire-ts-jest, because it only operates on the webpack config object. So here's your complete config, rewritten for craco:

const CracoAntDesignPlugin = require('craco-antd');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const WebpackBar = require('webpackbar');
const rewireTsJest = require('react-app-rewire-ts-jest');
const path = require('path');

module.exports = {
  webpack: {
    plugins: [new BundleAnalyzerPlugin(), new WebpackBar({ profile: true })],
    configure: config => {
      config.resolve.modules = [path.resolve('src')].concat(config.resolve.modules);
      return config;
    },
  },
  jest: {
    configure: config => {
      // placeholder
      const configTsJest = {};
      config = rewireTsJest(config, configTsJest);
      return {
        ...config,
        reporters: [
          'default',
          [
            './node_modules/jest-html-reporter',
            {
              pageTitle: 'Payroll-app-next: Tests suite',
              outputPath: 'tests/report/index.html',
              includeFailureMsg: true,
              dateFormat: 'dd/mm/yyyy HH:MM',
              sort: 'status',
            },
          ],
        ],
        collectCoverage: true,
        collectCoverageFrom: ['src/**/*.{ts,tsx}'],
        coveragePathIgnorePatterns: ['src/state/state.d.ts'],
        coverageReporters: ['html', 'json'],
      };
    },
  },
  plugins: [{ plugin: CracoAntDesignPlugin }],
};

I haven't tested the jest part, but let me know if that works!