"Module not found: Error: Can't resolve './locale'" warning when building with Ant Design components

[fasiha]

I'm sorry to risk opening a ticket here for this when I'm not 100% sure it's an issue with react-querybuilder 🙇 please feel free to close if this isn't your problem!

I'm encountering a warning

WARNING in ./node_modules/@react-querybuilder/antd/dist/index.es.js 1941:6-40
Module not found: Error: Can't resolve './locale' in '/home/afasih/Documents/my-app/node_modules/@react-querybuilder/antd/dist'

when building my react-querybuilder project, and as my CI (continuous integration) treats warnings as errors, I'm looking for how to fix this.

Reproduction steps

npx create-react-app my-app --template typescript
cd my-app
npm i --save react-querybuilder @react-querybuilder/antd @ant-design/icons antd

In App.tsx, replace the body with

import { antdControlElements } from "@react-querybuilder/antd";
import { QueryBuilder, RuleGroupType } from "react-querybuilder";
import "react-querybuilder/dist/query-builder.css";
import "antd/dist/antd.compact.css";

const fields = [
  { name: "firstName", label: "First Name" },
  { name: "lastName", label: "Last Name" },
];

const App = () => {
  const [query, setQuery] = useState<RuleGroupType>({
    combinator: "and",
    rules: [],
  });

  return (
    <QueryBuilder
      fields={fields}
      query={query}
      onQueryChange={(q) => setQuery(q)}
      controlElements={antdControlElements}
    />
  );
};

Then run npm run start

(This actually might produce some other warnings too, but the one I'm encountering in my application is the Module not found: Error: Can't resolve './locale'.)

Discussion

Searching the web shows that this surfaced in ~2020 due to an issue with Moment: cf.,

• Can't resolve './locale' in 'node_modules\moment\src\lib\locale' ant-design/ant-design#23823 and
• upstream Can't resolve './locale' moment/moment#5472

These appear to have been fixed upstream, but I noticed that react-querybuilder's Ant package uses Ant 4.17.3 from about six months ago (in package.json) and, I know it's a stretch but I wonder if the antd bundled with this package is somehow either installing an old Moment, or if there's some other explanation/workaround?

Thanks for your help!

[jakeboone02]

I'm inclined to think this is not an issue with RQB, since antd is actually a peer dependency and not a hard dependency. When you do

npm i --save react-querybuilder @react-querybuilder/antd @ant-design/icons antd

you get the latest version of all those packages. On top of that, even the antd entry in devDependencies for @react-querybuilder/antd uses a caret, so 4.17.3 is just the minimum version. The actual antd version currently used in development is 4.21.3 (see yarn.lock).

I tried to recreate your situation in this CodeSandbox, but it doesn't throw any errors.

[fasiha]

Thanks for checking @jakeboone02! So I want to emphasize that this is a warning and not an error (even though the body of the message claims it's an error)—our CI builds our app just fine but like many CI systems treats warnings as errors and my ops team would prefer to keep that level of strictness.

And you can actually verify the warning by downloading the CodeSandbox (screenshot included if helpful, I had to DuckDuckGo to find it :P), unzipping the zip, and running

npm i
npm run start

and seeing the following:

Compiled with warnings.

Module not found: Error: Can't resolve './locale' in '/home/afasih/Downloads/codesandbox-rbq/node_modules/@react-querybuilder/antd/dist'

<snip, unrelated issues with source maps for less files>

WARNING in ./node_modules/@react-querybuilder/antd/dist/index.es.js 1951:6-40
Module not found: Error: Can't resolve './locale' in '/home/afasih/Downloads/codesandbox-rbq/node_modules/@react-querybuilder/antd/dist'

I'm trying to see if CodeSandbox shows compiler warnings in the web app and failing :(

Again, it's totally conceivable that this is not a react-querybuilder problem! And indeed the yarn.lock has a very new version of Moment so that connection might be erroneous. Curious if you can think of any reasons for npm to complain like this? If not please feel free to close and I'll report back when I find a fix!

CodeSandbox download zip screenshot

Full compiler output for completeness

Compiled with warnings.

Module not found: Error: Can't resolve './locale' in '/home/afasih/Downloads/codesandbox-rbq/node_modules/@react-querybuilder/antd/dist'

Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported

Failed to parse source map: 'webpack://antd/./components/icon/style/index.less' URL is not supported

Failed to parse source map: 'webpack://antd/./components/locale-provider/style/index.less' URL is not supported

Failed to parse source map: 'webpack://antd/./components/time-picker/style/index.less' URL is not supported

Failed to parse source map from '/home/afasih/Downloads/codesandbox-rbq/node_modules/react-querybuilder/src/query-builder.scss' file: Error: ENOENT: no such file or directory, open '/home/afasih/Downloads/codesandbox-rbq/node_modules/react-querybuilder/src/query-builder.scss'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/@react-querybuilder/antd/dist/index.es.js 1951:6-40
Module not found: Error: Can't resolve './locale' in '/home/afasih/Downloads/codesandbox-rbq/node_modules/@react-querybuilder/antd/dist'

WARNING in ./node_modules/antd/dist/antd.compact.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.compact.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported

WARNING in ./node_modules/antd/dist/antd.compact.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.compact.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/icon/style/index.less' URL is not supported

WARNING in ./node_modules/antd/dist/antd.compact.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.compact.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/locale-provider/style/index.less' URL is not supported

WARNING in ./node_modules/antd/dist/antd.compact.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.compact.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/time-picker/style/index.less' URL is not supported

WARNING in ./node_modules/react-querybuilder/dist/query-builder.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/react-querybuilder/dist/query-builder.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/afasih/Downloads/codesandbox-rbq/node_modules/react-querybuilder/src/query-builder.scss' file: Error: ENOENT: no such file or directory, open '/home/afasih/Downloads/codesandbox-rbq/node_modules/react-querybuilder/src/query-builder.scss'

webpack compiled with 6 warnings

[fasiha]

Here's one solution: I noticed in

react-querybuilder/packages/antd/vite.config.js

Line 20 in 74409f7

external: ['react', 'react-querybuilder', 'antd', '@ant-design/icons'],

that you explicitly tell Rollup to treat certain imports as external so I thought to add moment to that:

diff --git a/packages/antd/vite.config.js b/packages/antd/vite.config.js
index 6cea4e6..aadeb99 100644
--- a/packages/antd/vite.config.js
+++ b/packages/antd/vite.config.js
@@ -17,7 +17,7 @@ export default defineConfig(({ mode, command }) => {
         formats: ['es', 'cjs'],
       },
       rollupOptions: {
-        external: ['react', 'react-querybuilder', 'antd', '@ant-design/icons'],
+        external: ['moment', 'react', 'react-querybuilder', 'antd', '@ant-design/icons'],
       },
       sourcemap: true,
     },

So one result is your dist files drop in size, since Moment is famously heavyweight:

• old:

dist/index.es.js   125.13 KiB / gzip: 29.07 KiB
dist/index.cjs.js   63.70 KiB / gzip: 21.06 KiB

• new:

dist/index.es.js   8.68 KiB / gzip: 2.46 KiB
dist/index.cjs.js   5.08 KiB / gzip: 2.09 KiB

The second result is, if I copy packages/antd/dist/*.js* (from my clone of react-querybuilder) to the downloaded CodeSandbox directory, overwriting those in codesandbox-rbq/node_modules/@react-querybuilder/antd/dist (where codesandbox-rbq is where I placed the contents of the zip file from CodeSandbox), the recipe in my previous comment works successfully—I just see some irrelevant warnings related to LESS/SCSS which are readily fixed, and more importantly, no warning about unable to import ./locale. 🥳!

What do you think? This is definitely outside my area of expertise but I think, given you're already telling Rollup that Ant and React etc. are external, it seeeeems reasonable to treat Moment as the same? Especially given that Ant is going to install Moment itself.

Hopefully it's ok to open a PR with this and see how tests fare?

[jakeboone02]

Thanks so much for the thorough investigation! See my comments on #354. I'm especially loving the 10x drop in weight!