Failed to resolve entry for package "vite-imagetools"

[hopkins385]

Hi, after upgrading to v5.0.3 I get in a Laravel project the following error:

✘ [ERROR] Failed to resolve entry for package "vite-imagetools". 
The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "vite-imagetools" package [plugin externalize-deps]

    node_modules/esbuild/lib/main.js:1360:27:
      1360 │         let result = await callback({

  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1279:20:
      1279 │       let promise = setup({

  The plugin "externalize-deps" was triggered by this import

    vite.config.js:8:27:
      8 │ import { imagetools } from 'vite-imagetools';

Node: v19.9.0
OS: Mac M1, Ventura 13.3.1 (a)

[Ben McCann]

Can you share a repository with a reproduction for this issue?

[Alvaro Carvajal]

Same here. I tried using very old version (4.0.7) and it worked fine. However on newer versions I am getting the same problem.

[Saboor]

Me too, 4.0.19 works fine, but when upgrading i get that error. here's a repo https://github.com/saboooor/Nether-Depths-Website

[Ben McCann]

Does it work if you rename vite.config.ts to vite.config.mts? I'm guessing your config is getting compiled to CJS and that's the issue.

[hopkins385]

If I rename the vite.config.js to vite.config.mts then I get the error

error when starting dev server:
TypeError: laravel is not a function

if I rename the vite.config.js to vite.config.ts then I get the warning:

Property 'replaceAll' does not exist on type 'string'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2021' or later.ts(2550)

for the following code which was introduced to resolve imagetools urls while running vite-dev

  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.ts'],
      refresh: true,
      transformOnServe: (code, url) =>
        code.replaceAll('/@imagetools', url + '/@imagetools'),
    }),

my tsconfig.json (relevant parts I guess):

    "compilerOptions": {
      "jsx": "preserve",
      "target": "ESNext",
      "module": "ESNext",
      "moduleResolution": "Node",
      "skipLibCheck": true,
      "strict": true,
      "allowJs": true,
      "noEmit": true,
      "resolveJsonModule": true,

Hint: I rolled back to imagetools 4.0.19 and didn't check if changing the vite.config.js to vite.config.ts would solve the issue.

In addition, I don't like the idea to change the vite config because this can cause unwanted side effects (as we can see).

I'm wondering why it was previously working, but after latest updates not.

[Saboor]

changing vite.config.ts to vite.config.mts works for qwik :D

[Ben McCann]

@hopkins385 the .mts extension would only be for TypeScript users. For JS users, please rename your file to vite.config.mjs and convert it to ESM. Alternatively, add "type": "module" to your package.json retain the .js extension and convert all your files from CJS to ESM

[hopkins385]

Oh, ok, I tried changing the file extension to mjs but then I get the same error

error when starting dev server:
TypeError: laravel is not a function

[Ben McCann]

I'm afraid I don't have any more suggestions based off what's been shared so far. If you can provide a project that reproduces the error I can take a look at it

[Rock Dog]

Same issue.
node: v19.8.1
"vite": "^4.3.5"
"vite-imagetools": "^5.0.3"
"solid-js": "^1.7.5"

◈ Setting up local development server
◈ Starting Netlify Dev with SolidJS

✘ [ERROR] Failed to resolve entry for package "vite-imagetools". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "vite-imagetools" package [plugin externalize-deps]

    node_modules/.pnpm/esbuild@0.17.18/node_modules/esbuild/lib/main.js:1360:27:
        1360 │         let result = await callback({
             ╵                            ^

    This error came from the "onResolve" callback registered here:

        node_modules/.pnpm/esbuild@0.17.18/node_modules/esbuild/lib/main.js:1279:20:
            1279 │       let promise = setup({
                 ╵                     ^

    The plugin "externalize-deps" was triggered by this import

        vite.config.ts:2:27:
            2 │ import { imagetools } from 'vite-imagetools'
              ╵                            ~~~~~~~~~~~~~~~~~
```

[Ben McCann]

@RyanPrentiss I can't tell what's wrong from what you've shared. You should follow the .mjs/.mts advice above or provide a full reproduction if that doesn't work

[sealer3]

@benmccann This issue is affecting otterscan. You can build with npm run build and it fails to build after changing the version of vite-imagetools to 5.0.3 in package.json.

Edit: Build is successful after changing vite.config.ts to vite.config.mts as suggested earlier here. But I still wonder why this fix is required.

[hopkins385]

Can you help me to understand why we should change the file-extension to .mts for just one package while all other packages are running fine without this modification?

[Ben McCann]

Edit: Build is successful after changing vite.config.ts to vite.config.mts as suggested earlier here.

Glad you got it working. I should clarify that approach is really just a temporary hack. You'd be much better off adding "type": "module" to your package.json and then converting your postcss and tailwind configs to use modern ESM syntax instead of module.exports

But I still wonder why this fix is required

It's because your project is building into the legacy CJS format and vite-imagetools 5.x is only available as an ESM module. You should migrate away from the legacy format by adding "type": "module" to your package.json

Can you help me to understand why we should change the file-extension to .mts for just one package while all other packages are running fine without this modification?

import is the JS standard way of doing package imports. require is something the Node team made up themselves before import was available. It's a terrible mess that the ecosystem is in by having to support both. The sooner everyone is using import and require is completely dead, the better off we'll all be. Projects need to start migrating by adding "type": "module" to their package.json. There are tons of other libraries that will require the same from you (e.g. basically the entire Svelte ecosystem only supports ESM). This is just the first library you happened to encounter requiring it in your particular project, but it's the way everything is going and you'll be forced to migrate sooner or later.

[Ben McCann]

I've released a new version which uses an updated package.json to provide a somewhat clearer error message. Unfortunately this error message still isn't great, but as it comes from Node.js there's not that much else we can do about it.

failed to load config from vite.config.ts
error during build:
Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules/vite-imagetools/dist/index.js from otterscan/vite.config.ts not supported.
Instead change the require of index.js in otterscan/vite.config.ts to a dynamic import() which is available in all CommonJS modules.