Error with "import Path from '@mojojs/path'"

[john-]

I know this is not a Mojolicous error but if someone can help that would be great. I am still learning how to do a proper build of a Vue 3 application (or anything non-trivial in Javascript for that matter).

I am working through get thing Vue 3 build process to generate files for my full Mojolicious application.

npm versions are below.

I am hacking through things but get the following error when I trying to run a build:

user@571d64a4f03a:/node-toolchain$ npm run build
> test_toolchain_container@0.0.0 build
> run-p type-check build-only
> test_toolchain_container@0.0.0 type-check
> vue-tsc --noEmit

> test_toolchain_container@0.0.0 build-only
> vite build

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

[stack trace snipped]

If I change "import Path from @mojojs/path to import('@mojojs/path') then it runs without error but Path is not available:

failed to load config from /node-toolchain/vite.config.ts
error during build:
ReferenceError: Path is not defined
  at Object.<anonymous> (/node-toolchain/vite.config.ts:53:12)
  at Module._compile (node:internal/modules/cjs/loader:1275:14)
  at _require.extensions.<computed> [as .js] (file:///node-toolchain/node_modules/vite/dist/node/chunks/dep-79892de8.js:63986:24)

[snip]

vite.config.ts (has changed many times but hopefully gives the idea):

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

//import('@mojojs/path')
import Path from '@mojojs/path'

//const isDev = process.env.MOJO_MODE === 'development';
const isDev = true
const the_path = 'dist_test'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  },
},
rollupOptions: {
  output: {
    //entryFileNames: isDev ? '[name].development.[ext]' : '[name].[hash].[ext]',
    dir: the_path,
    //dir: Path.currentFile().sibling('public', 'assets').toString(),
    format: 'iife'
  },
},
})

npm version
{
test_toolchain_container: '0.0.0',
npm: '9.5.1',
node: '19.8.1',
acorn: '8.8.2',
ada: '1.0.4',
ares: '1.19.0',
brotli: '1.0.9',
cldr: '42.0',
icu: '72.1',
llhttp: '8.1.0',
modules: '111',
napi: '8',
nghttp2: '1.52.0',
nghttp3: '0.7.0',
ngtcp2: '0.8.1',
openssl: '3.0.8+quic',
simdutf: '3.2.2',
tz: '2022g',
undici: '5.21.0',
unicode: '15.0',
uv: '1.44.2',
uvwasi: '0.0.16',
v8: '10.8.168.25-node.12',
zlib: '1.2.13'
}

[kraih]

You need to read up on ESM vs CJS. All the mojo.js stuff is ESM only.

[john-]

Thanks. I will do that.

[kraih]

It's a bit of a messy subject because of how the Node.js maintainers decided to handle the CJS to ESM transition. Hopefully in a few years we've all forgotten about CJS and ESM will just work everywhere.