Comments (9)
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.
Hi, can you please provide vite
or webpack
config, or maybe link to repo with minimal example that represents this problem?
from bbob.
Good. Thanks!
from bbob.
@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.
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.
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.
Usages in examples assumes that you have babel/swc/typescript transpiler configured
from bbob.
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.
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)
- Warning: Component: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. HOT 3
- Lost content if there is missing close tag in middle HOT 1
- color tag in HTML5 preset HOT 1
- onlyAllowTags doesn't support case insensitive tags HOT 3
- escape does not seem to work inside of attributes
- Sanitize `file:` protocol in escapeHTML
- Flawed getUniqAttr Parsing May Corrupt HTML Output HOT 3
- Misleading name/behavior for `escapeHTML`: Should denote "use for attribute values" HOT 1
- Parser has Issues with Blanks and Quotes in Unique Attributes HOT 2
- RangeError: Maximum call stack size exceeded - Document Workaround? HOT 1
- TagNode: Subtle Difference between content = null and content = [] causes <img></img> instead of <img/>
- Vue3 Warn. default slot HOT 1
- Parser is unaware of system-dependent newlines
- Error after upgrading to latest version in React: presetHTML5.extend is not a function HOT 4
- Screen reader reads React rendered content as if there's no space between the words. HOT 1
- Screen reader reads React rendered content as if there's no space between the words.
- ContextFreeTags are not case insensitive HOT 1
- Invalid path to TypeScript types in package.json (4.0.1) HOT 3
- Can this be used in reverse? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bbob.