core is not a function

[RiggerJay]

I am getting following error and not sure how to fix

core is not a function
toHTML@http://localhost:3001/static/js/bundle.js:1070:52

Here is a bit from my package.json

"dependencies": {
"@bbob/core": "^3.0.2",
"@bbob/html": "^3.0.2",
"@bbob/preset-html5": "^3.0.2",
"react": "^18.2.0",

what I am importing

import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

How i am using it "roadEncounters.events" is a json array objects

            <ul>
                {roadEncounters.events.map(function (event) {
                    return (
                        <li key={event.roll}>
                            <h1>{event.name}</h1>
                            <p>{event.flavor}</p>
                            <hr />
                            <p>{bbobHTML(event.details, presetHTML5())}</p>
                        </li>
                    )
                })}
            </ul>

[JiLiZART]

Hi, can you please provide vite or webpack config, or maybe link to repo with minimal example that represents this problem?

[PeppeL-G]

I tried to use this library in my SvelteKit project now, and I get a very similar error for my code.

/src/routes/+page.svelte

<script>
	
	import bbobHTML from '@bbob/html'
	import presetHTML5 from '@bbob/preset-html5'
	
</script>

<div>
	{bbobHTML(`[i]Text[/i]`, presetHTML5())}
</div>

TypeError: __vite_ssr_import_2__.default is not a function
    at /Users/peter/projects/bbob-import-error/src/routes/+page.svelte:9:38
    at Object.$$render (/Users/peter/projects/bbob-import-error/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
    at Object.default (/Users/peter/projects/bbob-import-error/.svelte-kit/generated/root.svelte:45:41)
    at /Users/peter/projects/bbob-import-error/node_modules/@sveltejs/kit/src/runtime/components/layout.svelte:5:41
    at Object.$$render (/Users/peter/projects/bbob-import-error/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
    at /Users/peter/projects/bbob-import-error/.svelte-kit/generated/root.svelte:44:40
    at $$render (/Users/peter/projects/bbob-import-error/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
    at Object.render (/Users/peter/projects/bbob-import-error/node_modules/svelte/src/runtime/internal/ssr.js:164:17)
    at Module.render_response (/Users/peter/projects/bbob-import-error/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:171:29)
    at async Module.render_page (/Users/peter/projects/bbob-import-error/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:286:10)

I created a new fresh SvelteKit project and tried to use this library there, but still the same error. The project and reproducible instructions are available at https://github.com/PeppeL-G/bbob-import-error.

I tried to search for a solution and found a guy who had a similar problem with another library, and someone pointed out that the problem was that that library didn't had type set to module in the package.json file in the library. I'm not good at CommonJS VS EcmaScript when it comes to npm packages, so maybe it's not relevant, but thought I could mention it ^^

[JiLiZART]

Good. Thanks!

[JiLiZART]

@PeppeL-G
I checked https://github.com/PeppeL-G/bbob-import-error repo.
Currently @BBob don't support type: module
I think you can fix this problem if remove type: module support to commonjs

[JiLiZART]

You can use https://esm.sh/ to wrap this package and enable esm support, also tune vite config to support imports from https

[PeppeL-G]

Thanks for looking into this, @JiLiZART.

If I understand you correct, you are basically saying that the usage examples in the README file are wrong? Because they show that it should be used as an ECMAScript module?

[JiLiZART]

Usages in examples assumes that you have babel/swc/typescript transpiler configured

[PeppeL-G]

Gosh, this CommonJS modules VS ECMAScript modules drives me crazy xD

In an ECMAScript module executed by Node.js, I've noticed that the following works:

import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

console.log(`Hello`, bbobHTML.default(`[i]Text[/i]`, presetHTML5.default()))

This workaround in Node.js (with adding .default) is needed and works because @bbob/html and @bbob/preset-html5 have been transpiled from TypeScript to CommonJS modules, correct? And this works in the Node.js world because Node.js supports interoperability between CommonJS modules and ECMAScript modules? (though I'm surprised that I need to add .default, but maybe that's simply how it is)

But the same workaround does not work in web browsers, because web browsers don't have this interoperability, but only support ECMAScript modules?

SvelteKit, which in turn uses Vite, does support TypeScript, which @bbob/html and @bbob/preset-html5 are implemented in. Can I somehow import the TypeScript modules from @bbob/html and @bbob/preset-html5 in my own app, instead of importing the transpiled CommonJS modules?

[JiLiZART]

Deploying ESM versions of this packages not possible. Cause it requires type: module in package.json thats breaks all commonjs behaviors. So to solve support of ESM requires publish separate ESM package or break BC for this packages.

[stevefan1999-personal]

Deploying ESM versions of this packages not possible. Cause it requires type: module in package.json thats breaks all commonjs behaviors. So to solve support of ESM requires publish separate ESM package or break BC for this packages.

Can we just rename the ESM file output to .mjs instead of .js? And then add back the corresponding package.json entry, so we need to fix the es path import as well...

[JiLiZART]

It's currently not possible ship CommonJS and ESM at the same time.

[stevefan1999-personal]

It's currently not possible ship CommonJS and ESM at the same time.

You can, if you change the extension to .mjs extension, and CommonJS to .cjs extension and let node handle the rest.