Closed Jackson-p closed 2 years ago
Describe the bug
this is no error in dev mode but in production mode, when i was building, i got this message
although built sucessfully, but when i use http-server to visit the page, there are some error in console.
Uncaught TypeError: Failed to resolve module specifier "indexof". Relative references must start with either "/", "./", or "../".
Reproduction
1、use npm init @vitejs/app to generate project from 'react-ts' 2、just import sth from antd-mobile 3、npm run build 4、cd dist && httpserver ./
and there will be the message above in console
System Info
Output of
npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers
:System: OS: macOS 11.2.3 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 264.75 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 12.16.1 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Browsers: Chrome: 89.0.4389.90 Safari: 14.0.3 npmPackages: vite: ^2.1.0 => 2.1.2
Used package manager:
Logs
> Uncaught TypeError: Failed to resolve module specifier "indexof". Relative references must start with either "/", "./", or "../".
Before submitting the issue, please make sure you do the following
- [ ] Read the Contributing Guidelines.
- [ ] Read the docs.
- [ ] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [ ] Provide a description in this issue that describes the bug.
- [ ] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
- [ ] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
try to remove the external option
Describe the bug
this is no error in dev mode but in production mode, when i was building, i got this message although built sucessfully, but when i use http-server to visit the page, there are some error in console.
Uncaught TypeError: Failed to resolve module specifier "indexof". Relative references must start with either "/", "./", or "../".
Reproduction
1、use npm init @vitejs/app to generate project from 'react-ts' 2、just import sth from antd-mobile 3、npm run build 4、cd dist && httpserver ./ and there will be the message above in console
System Info
Output of
npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers
:System: OS: macOS 11.2.3 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 264.75 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 12.16.1 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Browsers: Chrome: 89.0.4389.90 Safari: 14.0.3 npmPackages: vite: ^2.1.0 => 2.1.2
Used package manager:
Logs
> Uncaught TypeError: Failed to resolve module specifier "indexof". Relative references must start with either "/", "./", or "../".
Before submitting the issue, please make sure you do the following
- [ ] Read the Contributing Guidelines.
- [ ] Read the docs.
- [ ] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [ ] Provide a description in this issue that describes the bug.
- [ ] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
- [ ] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
try to remove the external option
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { resolve } from 'path';
import vitePluginImport from 'vite-plugin-babel-import';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
reactRefresh(),
vitePluginImport([
{
libraryName: 'antd-mobile',
libraryDirectory: 'es',
style(name) {
console.log(`name`, name);
return `antd-mobile/lib/${name}/style/index.css`;
},
},
]),
],
resolve: {
alias: {
'~': resolve(__dirname),
'@': resolve(__dirname, './src'),
apis: resolve(__dirname, './src/apis'),
common: resolve(__dirname, './src/common'),
components: resolve(__dirname, './src/components'),
hooks: resolve(__dirname, './src/hooks'),
layouts: resolve(__dirname, './src/layouts'),
modules: resolve(__dirname, './src/modules'),
store: resolve(__dirname, './src/store'),
},
},
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
});
i did not use the external option
I have the same confusion
I think this should be caused by some dependencies used inside ant-mobile, you can try to configure in vite.config.ts
optimizeDeps:{
exclude:["ant-mobile"]
}
Or refer to this https://github.com/vueComponent/ant-design-vue/issues/3481
I think this should be caused by some dependencies used inside ant-mobile, you can try to configure in vite.config.ts
optimizeDeps:{ exclude:["ant-mobile"] }
it doesn't work 😔
I have same problem
Hello @Jackson-p. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!
i have the solution, just use antd es to solve this question. like
import Icon from 'antd-mobile/es/icon';
by default, it uses lib. or you can use vite-plugin-babel-import like this
vitePluginImport([
{
libraryName: 'antd-mobile',
libraryDirectory: 'es',
},
]),
to apply code from es instead of lib
+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 "../".
mark,遇到同样问题
I solve the problem by:
npm install indexof
+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
可以解决这个问题,亲测可用
+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
可以解决这个问题,亲测可用
成功了,但是其他问题 要不要推一下 antd-mobile 团队 统一下规范,项目很久没更新了
This is so weird. I suddenly got this error as well. Not having anything related to antd running, and the vite development server works fine without it. Doing npm install indexof
fixes it, but I don't see what has caused this change (I even checked out earlier commits, and they seem affected as well, even though I'm sure they worked). I do see the start of my bundle have a line that does just this (notice the last line):
var e, t, n = Object.defineProperty, a = Object.defineProperties, r = Object.getOwnPropertyDescriptors, s = Object.getOwnPropertySymbols, i = Object.prototype.hasOwnProperty, o = Object.prototype.propertyIsEnumerable, l = (e,t,a)=>t in e ? n(e, t, {
enumerable: !0,
configurable: !0,
writable: !0,
value: a
}) : e[t] = a, c = (e,t)=>{
for (var n in t || (t = {}))
i.call(t, n) && l(e, n, t[n]);
if (s)
for (var n of s(t))
o.call(t, n) && l(e, n, t[n]);
return e
}
, d = (e,t)=>a(e, r(t)), p = (e,t)=>{
var n = {};
for (var a in e)
i.call(e, a) && t.indexOf(a) < 0 && (n[a] = e[a]);
if (null != e && s)
for (var a of s(e))
t.indexOf(a) < 0 && o.call(e, a) && (n[a] = e[a]);
return n
}
, u = (e,t,n)=>(l(e, "symbol" != typeof t ? t + "" : t, n),
n);
import {d as m, c as h, A as g, $as y, n as f, a as E, w as b, R as C, b as v, r as I, l as w, e as S, f as T, t as k, U as x, E as _, i as F, g as A, h as N, j as D, v as B, k as R, m as O, o as P, p as M, I as L, q as H, s as U, u as V, x as$, y as q, M as j, T as W, B as z, z as G, C as Q, D as Y, F as X, G as Z, P as K, H as J, J as ee, K as te, L as ne, N as ae, O as re, Q as se, S as ie, V as oe, W as le, X as ce, Y as de, Z as pe, _ as ue, a0 as me, a1 as he, a2 as ge, a3 as ye, a4 as fe, a5 as Ee, a6 as be, a7 as Ce, a8 as ve, a9 as Ie, aa as we, ab as Se, ac as Te, ad as ke, ae as xe, af as _e, ag as Fe, ah as Ae, ai as Ne, aj as De, ak as Be, al as Re, am as Oe, an as Pe, ao as Me, ap as Le, aq as He, ar as Ue, as as Ve, at as $e, au as qe, av as je, aw as We, ax as ze, ay as Ge, az as Qe, aA as Ye, aB as Xe, aC as Ze, aD as Ke, aE as Je, aF as et, aG as tt, aH as nt, aI as at, aJ as rt, aK as st, aL as it, aM as ot, aN as lt, aO as ct, aP as dt, aQ as pt, aR as ut, aS as mt, aT as ht, aU as gt, aV as yt, aW as ft, aX as Et, aY as bt, aZ as Ct, a_ as vt, a$as It, b0 as wt, b1 as St, b2 as Tt, b3 as kt, b4 as xt, b5 as _t, b6 as Ft, b7 as At, b8 as Nt, b9 as Dt, ba as Bt, bb as Rt, bc as Ot, bd as Pt, be as Mt, bf as Lt, bg as Ht, bh as Ut, bi as Vt, bj as $t, bk as qt, bl as jt, bm as Wt, bn as zt, bo as Gt, bp as Qt, bq as Yt, br as Xt, bs as Zt, bt as Kt, bu as Jt, bv as en, bw as tn, bx as nn, by as an, bz as rn, bA as sn, bB as on, bC as ln, bD as cn, bE as dn, bF as pn, bG as un, bH as mn, bI as hn, bJ as gn, bK as yn, bL as fn, bM as En, bN as bn, bO as Cn, bP as vn, bQ as In, bR as wn, bS as Sn, bT as Tn, bU as kn, bV as xn, bW as _n, bX as Fn, bY as An, bZ as Nn, b_ as Dn, b$as Bn, c0 as Rn, c1 as On, c2 as Pn, c3 as Mn, c4 as Ln, c5 as Hn, c6 as Un, c7 as Vn, c8 as $n, c9 as qn, ca as jn, cb as Wn, cc as zn, cd as Gn, ce as Qn, cf as Yn, cg as Xn, ch as Zn, ci as Kn, cj as Jn, ck as ea, cl as ta, cm as na, cn as aa, co as ra, cp as sa, cq as ia, cr as oa, cs as la, ct as ca, cu as da, cv as pa, cw as ua, cx as ma, cy as ha, cz as ga, cA as ya, cB as fa, cC as Ea, cD as ba, cE as Ca, cF as va, cG as Ia, cH as wa, cI as Sa, cJ as Ta, cK as ka, cL as xa, cM as _a, cN as Fa, cO as Aa, cP as Na, cQ as Da, cR as Ba, cS as Ra} from "./vendor.69e40718.js";
import "indexof";
The thing causing it seems to be common-js
:
transforming (14164) ../../node_modules/rc-animate/es/Animate.js'indexof' is imported by indexof?commonjs-external, but could not be resolved – treating it as an external dependency
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 "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.
var index = require('component-indexof');
npm install indexof
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
Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
i use Vite + reactts+antd,npm run preview, and i modify the html, finally, i got: Uncaught TypeError: Failed to resolve module specifier "antd". Relative references must start with either "/", "./", or "../".
Related: https://github.com/ant-design/ant-design-mobile/issues/3813. Maybe upgrading antd-mobile
to latest fixes it?
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.
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
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
Describe the bug
this is no error in dev mode but in production mode, when i was building, i got this message
although built sucessfully, but when i use http-server to visit the page, there are some error in console.
Reproduction
1、use npm init @vitejs/app to generate project from 'react-ts' 2、just import sth from antd-mobile 3、npm run build 4、cd dist && httpserver ./
and there will be the message above in console
System Info
Output of
npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers
:Used package manager:
Logs
Before submitting the issue, please make sure you do the following