I have same problem

Closing as it’s a dependency issue explained in https://github.com/vitejs/vite/issues/2670#issuecomment-905495115. Thanks for the deep dive @fatso83!

@xubaobao19940428 @sugar0828 I don’t think those issues are related to this. If you have reproduction, please open an issue/discussion for it.

+1 antd-mobile 里依赖了一个 commonjs 包 “indexof”，antd-mobile 还有别的问题：esm 和 commonjs 的 require 混用，这个没办法解决

Uncaught TypeError: Failed to resolve module specifier "indexof". Relative references must start with either "/", "./", or "../".

单独安装 npm install indexof 可以解决这个问题，亲测可用

I solve the problem by:

npm install indexof

This was my problem because I was controlling the CDN path of the packaged files through an environment variable and my environment variable was incorrect @bluwy

OK, so I have figured this one out after a deep dive. This issue should just be closed, as the issue can be fixed by upgrading the right dependencies. @anncwb was right in this regard, but finding out what is the hard part. Read on to understand why.

In the following code, I have used the reproduction case given by @Jackson-p. This works just as well as my case and my own project, as it is caused by the exact same dependency.

mkdir example-app; cd example-app; npm init -y; npm install antd-mobile;

I tried to find out what had imported indexof by grepping all package.json files:

find node_modules -name package.json | xargs grep indexof
$ find node_modules -name package.json | xargs grep indexof
node_modules/component-indexof/package.json:  "name": "component-indexof",
node_modules/component-indexof/package.json:      "indexof/index.js": "index.js"
node_modules/component-indexof/package.json:    "url": "https://github.com/component/indexof.git"
node_modules/component-classes/package.json:    "component-indexof": "0.0.3"
node_modules/component-classes/package.json:    "indexof": "component-indexof"

So, if you inspect the output and know how package.json is structured, you will notice that only one of these lines come from the dependencies section (following the “<name>”: “<version>” pattern). That is the line from the package file of component-classes which has a dependency on component-indexof. As could be seen here:

$ npm ls component-indexof
test@1.0.0 /private/tmp/test
└─┬ antd-mobile@2.3.4
  └─┬ rc-collapse@1.9.3
    └─┬ css-animation@1.6.1
      └─┬ component-classes@1.2.6
        └── component-indexof@0.0.3

So, somewhat surprisingly, no package here actually has declared any dependency on a package called exactly indexof! This threw me off for a while, but the component-classes did mention indexof in some other field, the browser field (also in the grep report above):

$ jq .browser node_modules/component-classes/package.json
{
  "indexof": "component-indexof"
}

Usually, the browser field indicates to bundlers what the entry point should be when targetting browsers, and that is usually a local file with a relative path, not a package name, as here, so I got a bit curious. Manually removing the field did nothing, so I checked out the source code and it turns out this was added in this commit: https://github.com/component/classes/commit/d9954893d44eb89a69349c13253603c3454d82ec

If you inspect the diff, you see it also contained this little snippet:

try {
  var index = require('indexof');
} catch (err) {
  var index = require('component-indexof');
}

And that’s it! We have an undeclared dependency on indexof. It’s not in package.json, but Rollup (which is used by Vite) does see it and tells us about it.

So there are three different solutions here

1. use patch-package and manually replace the five lines with just var index = require('component-indexof');
2. install the extra package, even though it’s not needed: npm install indexof
3. Just upgrade the package which pulls these ancient (2014!) dependencies in. For antd’s case, this would mean upgrading rc-collapse, but I see they are already working on alpha 5.0.0, so that has already happened 😃

Related: rollup/rollup#2096 rollup/rollup-plugin-babel#201

I have the same confusion