Sveltekit + Windows = ERR_REQUIRE_ESM

jacob-8 commented 3 years ago

Using this library with SvelteKit 1.0.0-next.115 on Windows gives the following error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\quick-i18n-throwaway-demo-main\node_modules\svelte-intl-precompile\index.js
require() of ES modules is not supported.
require() of C:\quick-i18n-throwaway-demo-main\node_modules\svelte-intl-precompile\index.js from C:\quick-i18n-throwaway-demo-main\node_modules\vite\dist\node\chunks\dep-bc228bbb.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\quick-i18n-throwaway-demo-main\node_modules\svelte-intl-precompile\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (C:\quick-i18n-throwaway-demo-main\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:68707:17)
    at ssrImport (C:\quick-i18n-throwaway-demo-main\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:68660:20)
    at eval (C:\quick-i18n-throwaway-demo-main\src\routes\index.svelte:7:31)
    at instantiateModule (C:\quick-i18n-throwaway-demo-main\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:68693:166)

You can see the error on a Windows machine and using your repo: https://github.com/cibernox/quick-i18n-throwaway-demo - but oddly the error isn't thrown on a remote Gitpod environment which is Linux I'm assuming - and you must be devving on a Mac is why you never came across this error? I'm so confused why Windows would spin this up as it seems yet another classic ESM-Vite challenging bug.

cibernox commented 3 years ago

I do indeed develop in a mac and I didn't notice this. I think that this bug is not related to this package in particular, as there's nothing special about. It might be a bug in vite.

Just to give some random ideas, are you on a recent enough version of node.js? That's the only other thing that comes to mind.

yaeszlo commented 3 years ago

I have the same problem. Windows10 and NodeJS version 16.2.0

jacob-8 commented 3 years ago

are you on a recent enough version of node.js?

I'm on the latest LTS version, 14.17.1

TheRealThor commented 3 years ago

I have the exact same error using macOS Catalina, node 16.3.0. It doesn't look like a OS related error.

cibernox commented 3 years ago

@TheRealThor can you reproduce it in https://github.com/cibernox/quick-i18n-throwaway-demo ? On what version of this library and of sveltekit are you?

TheRealThor commented 3 years ago

@cibernox I use SvelteKit 1.0.0-next.115 and 0.3.2 of the library.

I followed the installation guide here on GitHub. I just changed the library from devDependency to normal dependency. The error disappeared but now it throws:

> Cannot find package '/Users/thor/Dev/www/AF/node_modules/precompile-intl-runtime/' imported from /Users/thor/Dev/www/AF/node_modules/svelte-intl-precompile/index.js Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/thor/Dev/www/AF/node_modules/precompile-intl-runtime/' imported from /Users/thor/Dev/www/AF/node_modules/svelte-intl-precompile/index.js

I wonder why that dependency was not installed as it mentioned in the libraries package.json.

TheRealThor commented 3 years ago

I think this is a SvelteKit bug.

After doing an "rm -rf node_modules", deleting the package-lock.json and reinstalled all modules, the svelte-intl-precompile was indeed installed. However the error changed to:

`

Using @sveltejs/adapter-node Cannot find package '/Users/thor/Dev/www/AF/node_modules/precompile-intl-runtime/' imported from /Users/thor/Dev/www/AF/.svelte-kit/output/server/app.js Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/thor/Dev/www/AF/node_modules/precompile-intl-runtime/' imported from /Users/thor/Dev/www/AF/.svelte-kit/output/server/app.js at new NodeError (node:internal/errors:363:5) at legacyMainResolve (node:internal/modules/esm/resolve:256:9) at packageResolve (node:internal/modules/esm/resolve:691:14) at moduleResolve (node:internal/modules/esm/resolve:739:18) at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:853:11) at Loader.resolve (node:internal/modules/esm/loader:89:40) at Loader.getModuleJob (node:internal/modules/esm/loader:242:28) at ModuleWrap. (node:internal/modules/esm/module_job:73:40) at link (node:internal/modules/esm/module_job:72:36)

`

Looks like the modules entry point cannot be resolved.

TheRealThor commented 3 years ago

Ok, its works now. The reason the library was not found was in package.json the file in the entry

"types": "dist/index.d.ts"

did not exist. I changed it to "types": "dist/modules/index.d.ts",

Now it was recognised and works.

jacob-8 commented 3 years ago

Ok, its works now. The reason the library was not found was in package.json the file in the entry "types": "dist/index.d.ts" did not exist. I changed it to "types": "dist/modules/index.d.ts",

@TheRealThor You're talking about this line, I'm assuming? https://www.runpkg.com/?precompile-intl-runtime@0.4.3/package.json#17

cibernox commented 3 years ago

Does this seem like it would fix your issue? https://github.com/cibernox/precompile-intl-runtime/pull/9/files

TheRealThor commented 3 years ago

Hello @cibernox , yes I talked about this line because the referenced file did not exists. I guess that was the reason the TS compiler did not recognise the library and when I changed it, the compiler recognised it. Hence, it seems this correct to change this line.

cibernox commented 3 years ago

Published a new version of this package right now. Please y'all, remove your package-lock.json and try reinstalling all dependencies to check if it works now.

vish01 commented 3 years ago

@cibernox I just tried removing my package-lock.json, node_modules folder and did npm install with latest version of precompile-intl-runtime. Still facing the same issue mentioned by others above. Screenshot attached. Versions: SvelteKit: @next node: 14.17.1 npm: 7.13.0

cibernox commented 3 years ago

I'll have to get a virtual machine because I have no clue why it would work on mac/linux but not on windows.

vish01 commented 3 years ago

@cibernox I was able to find a workaround to this, if I change index.js files inside the packages to index.cjs, it works. So this could be something related to Common JS module imports. Can you publish an update or rather a branch making that change so we can test, if it works, you can publish it. Screenshots below for all the steps that resolves this issue: MicrosoftTeams-image (11) MicrosoftTeams-image (12)

cibernox commented 3 years ago

@vish01 what throws me off is that it only fails in windows. That's odd and makes me think it's nothing in particular with this package but with node.js or vite itself

vish01 commented 3 years ago

@cibernox If it was Vite or node.js, this wouldn't be an issue with only Windows, I guess. Also, I was trying to export those modules in a different way when I saw this error: It says the module 'precompile-intl-runtime/dist/modules/index.js' is a CommonJS module. I think you'll have to convert this library from an export of commonJS module to a JS module or that supports both. I could be wrong though lol Also, something to look at: https://stackoverflow.com/questions/61549406/how-to-include-commonjs-module-in-es6-module-node-app

There's also possibility that node is trying to access commonjs folder while it should be looking under the module folder.

ydoc118 commented 3 years ago

@cibernox I've gotten it to work by using the full path to import
import { init, getLocaleFromNavigator, addMessages } from '../../node_modules/svelte-intl-precompile';

whereas import { init, getLocaleFromNavigator, addMessages } from 'svelte-intl-precompile'; throws the same error @vish01 is getting

vish01 commented 3 years ago

@cibernox Any updates on this? Were you able to get a virtual machine to test this out?

tobiaskohlbau commented 2 years ago

I would like to add some information I gathered. I'm not sure if my issue is directly related to this, but the error is quiet similar.

I've a setup with rollup and included svelte-intl-precompile in order to compile the translations beforehand. The issue on my specific use case was that during SSR svelte-intl-precompile gets loaded in esm mode, initialized by "type": "module" in the projects package.json. By the looks of it svelte-intl-precompile or to better name it precompile-intl-runtime is not able to run in esm mode without an external bundler.

There are two missing parts:

There exists no main entrypoint in the package.json of precompile-intl-runtime.
precompile-intln-runtime is not a valid es module as it does not have file endings in it's compiled module imports.

The second point is derived from the nodejs documentation which states:

Relative specifiers like './startup.js' or '../config.mjs'. They refer to a path relative to the location of the importing file. The file extension is always necessary for these.

The typescript compiler does not issue such output and therefore does not produce valid es modules. See microsoft/TypeScript/issues/42151 and microsoft/TypeScript/pull/42184. The recommended way is to ad the js extension already in the typescript files. Which is IMHO kind of confusing, but it works.

Maybe the svelte/vite/node handling on windows is minimal different on windows than on other OS and therefore produces this issues (only a wild guess). Could be that addressing the invalid esm module issues solves this issue as a side effect.

I've created a fork and applied the needed fixes, it's over here for reference.

yaeszlo commented 2 years ago

I've tried every possible solution posted here but sadly nothing worked for me. I also did include your fork @tobiaskohlbau in my dependencies but sadly this also leads to


require() of ES modules is not supported.
require() of G:\xxx\xxx-sveltekit\node_modules\svelte-intl-precompile\index.js from G:\xxx\xxx-sveltekit\node_modules\@sveltejs\kit\node_modules\vite\dist\node\chunks\dep-e9a16784.js is an ES module file as it is a .js file whose n
earest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from G:\xxx\xxx-sveltekit\node_modules\svelte-intl-precompile\package.json.```

tobiaskohlbau commented 2 years ago

@yaeszlo are you able to share the project or an minimal reproducer?

yaeszlo commented 2 years ago

sadly it's not possible at the moment, for now I can just show how I use that

package.json fragment

 "devDependencies": {
    "@sveltejs/adapter-static": "^1.0.0-next.11",
    "@sveltejs/kit": "1.0.0-next.110",
    "autoprefixer": "^10.2.5",
    "cssnano": "^5.0.1",
    "postcss": "^8.2.10",
    "postcss-load-config": "^3.0.1",
    "precompile-intl-runtime": "github:tobiaskohlbau/precompile-intl-runtime#47dcf767f0b496b663ae13ca87fcf9d9c75c82b3",
    "svelte-intl-precompile": "^0.3.3",
    "prettier": "~2.2.1",
    "prettier-plugin-svelte": "^2.2.0",
    "svelte": "^3.34.0",
    "svelte-preprocess": "^4.7.1",
    "tailwindcss": "^2.1.1",
    "vite-imagetools": "^3.6.7",
    "vite-plugin-svelte-svg": "^1.0.0"
  },

svelte.config.js


import precompileIntl from "svelte-intl-precompile/sveltekit-plugin.js"

const config = {
    preprocess: [
        preprocess({
            postcss: true
        })
    ],
    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        adapter: adapter({}),
        target: '#svelte',
        vite: defineConfig({
            plugins: [
                imagetools(),
                svelteSVG({}),
                precompileIntl('locales')
            ],
            resolve: {
                alias: {
                    $assets: path.resolve('./src/assets')
                }
            }
        })
    }
};

export default config;

Component.svelte

<script>
    import { t } from '../../node_modules/svelte-intl-precompile' //as suggested by one of the comments
<script>

                <div class="w-fit-content mx-auto sm:float-left py-16 lg:py-0 lg:float-right lg:pr-12 xl:pr-14 2xl:pr-16">
                    <h3 class="text-accent text-30 py-4">
                        {$t("title")} }
                    </h3>
                    <h1 class="text-50 text-primary font-bold">
                        {$t("description")} }
                    </h1>
                </div>

helloalbin commented 2 years ago

Running the sample app in Windows 10 is giving me the following error. Seems to be related to this issue.

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\temp\sample-app-svelte-intl-precompile\node_modules\svelte-intl-precompile\index.js from C:\temp\sample-app-svelte-intl-precompile\node_modules\vite\dist\node\chunks\dep-cc49d7be.js not supported. Instead change the require of index.js in C:\temp\sample-app-svelte-intl-precompile\node_modules\vite\dist\node\chunks\dep-cc49d7be.js to a dynamic import() which is available in all CommonJS modules. at nodeRequire (C:\temp\sample-app-svelte-intl-precompile\node_modules\vite\dist\node\chunks\dep-cc49d7be.js:72653:17) at ssrImport (C:\temp\sample-app-svelte-intl-precompile\node_modules\vite\dist\node\chunks\dep-cc49d7be.js:72606:20) at eval (C:\temp\sample-app-svelte-intl-precompile\src\routes\__layout.svelte:7:31) at instantiateModule (C:\temp\sample-app-svelte-intl-precompile\node_modules\vite\dist\node\chunks\dep-cc49d7be.js:72639:166)

SvelteKit version - SvelteKit v1.0.0-next.123 NPM Version - 7.20.3 Node Version - v16.6.2

v1ack commented 2 years ago

Faced the same issue Cannot find package 'C:\Users\Admin\project\node_modules\precompile-intl-runtime\' imported from C:\Users\Admin\project\node_modules\svelte-intl-precompile\index.js

My decision was to change imports from import { addMessages, init, t } from "svelte-intl-precompile" to import { addMessages, init, t } from "precompile-intl-runtime"

SvelteKit 1.0.0-next.162 Vite 2.5.3 Node 16.8.0

skrenes commented 2 years ago

The top of all my svelte files now show this error from eslint on the demo without any modifications:

The exact error is

Error in svelte.config.js
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /svelte.config.js
require() of ES modules is not supported.
require() of /svelte.config.js from /config/extensions/svelte.svelte-vscode-0.5.0/node_modules/cosmiconfig/dist/loaders.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename svelte.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /package.json.

Civile commented 2 years ago

I'm experiencing the same on Mac OS Catalina, with Node v14.15.0 and SvelteKit

skrenes commented 2 years ago

@civile I not longer have this issue. I think it was due to using old extensions provided Code Server. I think switching to the VSX Registry or using the Microsoft Store and then updating all of your extensions will resolve this for you.

cibernox commented 2 years ago

I also tried to reproduce it right now but I couldn't. I used node 16 on windows 10 virtualized in parallels, with this app: https://github.com/cibernox/svelte-sample-app-for-windows-testing

On that app I'm using precompile-intl-runtime v0.4.11, which is rather new, but the only changes from 0.4.10 is that I updated typescript to the latest version.

If anyone can share a repo where the issue can be reproduced I'll try to debug it on this VM, but so far I never encountered this.

cibernox commented 2 years ago

I believe that this is no longer an issue. I'll close it. Please reopen if anyone can provide a reproduction.

EskelCz commented 1 year ago

Ran into this issue on mac. Reverting to ^0.9.0 solved it.

cibernox / svelte-intl-precompile

Sveltekit + Windows = ERR_REQUIRE_ESM #10