Code Monkey home page Code Monkey logo

Comments (9)

PeppeL-G avatar PeppeL-G commented on July 30, 2024 1

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 ^^

from bbob.

JiLiZART avatar JiLiZART commented on July 30, 2024

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

from bbob.

JiLiZART avatar JiLiZART commented on July 30, 2024

Good. Thanks!

from bbob.

JiLiZART avatar JiLiZART commented on July 30, 2024

@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

from bbob.

JiLiZART avatar JiLiZART commented on July 30, 2024

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

from bbob.

PeppeL-G avatar PeppeL-G commented on July 30, 2024

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?

from bbob.

JiLiZART avatar JiLiZART commented on July 30, 2024

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

from bbob.

PeppeL-G avatar PeppeL-G commented on July 30, 2024

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?

from bbob.

JiLiZART avatar JiLiZART commented on July 30, 2024

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.

from bbob.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.