I am making a Github pages site with SvelteKit and Tailwind CSS as a learning project.
I am using Adaptor static to render the site for hosting on github pages so everything ends up getting Server side pre rendered.
Error:
[postcss] Cannot read properties of undefined (reading '5')
21:35:57 [vite-plugin-svelte] ssr compile in progress ...
TypeError: Cannot read properties of undefined (reading '5')
at Parser.parentheses (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:859:65)
at Parser.parse (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1062:14)
at Parser.loop (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1043:12)
at new Parser (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:164:10)
at Processor._root (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:53:18)
at Processor._runSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:100:21)
at Processor.astSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:145:17)
at finalizeSelector (D:\Repositories\myrepo\node_modules\tailwindcss\lib\util\formatVariantSelector.js:125:59)
at D:\Repositories\myrepo\node_modules\tailwindcss\lib\lib\generateRules.js:732:81
at D:\Repositories\myrepo\node_modules\postcss\lib\container.js:96:18
TypeError: Cannot read properties of undefined (reading '5')
at Parser.parentheses (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:859:65)
at Parser.parse (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1062:14)
at Parser.loop (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1043:12)
at new Parser (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:164:10)
at Processor._root (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:53:18)
at Processor._runSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:100:21)
at Processor.astSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:145:17)
at finalizeSelector (D:\Repositories\myrepo\node_modules\tailwindcss\lib\util\formatVariantSelector.js:125:59)
at D:\Repositories\myrepo\node_modules\tailwindcss\lib\lib\generateRules.js:732:81
at D:\Repositories\myrepo\node_modules\postcss\lib\container.js:96:18
Error: Not found: /favicon.ico
at resolve (/node_modules/#sveltejs/kit/src/runtime/server/respond.js:395:13)
at resolve (/node_modules/#sveltejs/kit/src/runtime/server/respond.js:236:5)
at Object.#options.hooks.handle (/#fs/D:/Repositories/myrepo/node_modules/#sveltejs/kit/src/runtime/server/index.js:41:55)
at Module.respond (/node_modules/#sveltejs/kit/src/runtime/server/respond.js:233:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
TypeError: Cannot read properties of undefined (reading '5')
at Parser.parentheses (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:859:65)
at Parser.parse (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1062:14)
at Parser.loop (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1043:12)
at new Parser (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:164:10)
at Processor._root (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:53:18)
at Processor._runSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:100:21)
at Processor.astSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:145:17)
at finalizeSelector (D:\Repositories\myrepo\node_modules\tailwindcss\lib\util\formatVariantSelector.js:125:59)
at D:\Repositories\myrepo\node_modules\tailwindcss\lib\lib\generateRules.js:732:81
at D:\Repositories\myrepo\node_modules\postcss\lib\container.js:96:18
I have a Svelte component that has a named tailwind group so that i can do some conditional highlighting.
The basics of the component are like this:
<script>
export let id;
export let title;
const setting= `group/${id}`
</script>
<div class="{setting}">
<div
class="{`group-hover/${id}:bg-blue-500`}"
>
{title}
</div>
<slot/>
</div>
This works in this REPL that uses tailwind strangely! is this issue just to do with SSR?
https://svelteboard.com/repl
When i made this component I had inline declarations of the class with a prenamed group/name like this:
<div class="group/name">
<div
class="group-hover/name:bg-blue"
>
{title}
</div>
<slot/>
</div>
that worked fine (but highlighted all instances of the component on hover.)
but when i changed to the newer implementation it breaks with the above error & even when i roll back to a previous check in the error persists.
Am i implementing something wrong,
my tailwind config is unmodified from the svelte + tailwind setup, and svelte config has vitePreprocess and adapterstatic only.
I Tried updating dependencies to latest versions
downgrading postcss to 8.2 (suggested by another question)
reverting to previous revision, (does fix eventually but still cant implement this feature)
According to docs you cannot define dynamic CSS like group-hover/${id}:bg-blue-500 (Read here). All classes should be defined during build time.
You don't need to use nested groups if there is only one group in the component. Take a look at this REPL.
(If this is not the effect you're looking for please add a REPL with a minimum reproducible example)
#notnavindu's answer is correct
I think you can also refer to this
Related
I want to use <docs> blocks in my *.vue files to add documentation to components.
These blocks are correctly interpreted by vue-docgen-cli, but file compilation fails because vite is reading inside the block. For example, compilation of this SFC file fails with error: Uncaught SyntaxError: Unexpected identifier 'is':
<docs>
This is my component.
</docs>
<script setup lang="ts">
. . .
</script>
Is there a way to make vite ignore <docs> blocks? There is vite-plugin-vuedoc that seems useful, but the package does not install.
Thanks for your help!
mario
Environment
vue 3.2.45
vite 4.0.0
Windows 11
node 18.12.1
You will probably need to use a plugin for that.
Vite plugins are compatible with rollup plugin structure, so you may be able to use the rollup-plugin-re plugin to remove the desired content using a regexp. You could also write your own plugin that does exactly what you need.
Found a way. In vite.config.ts add the following code (from https://github.com/vitejs/vite/discussions/9301#discussioncomment-3224059):
const vueDocsPlugin = {
name: 'vue-docs',
transform(_code: unknown, id: string) {
if(!/vue&type=docs/.test(id)) return
return `export default ''`
}
}
Then in the plugins array add vueDocsPlugin.
I am having big problems with Storybook at the moment with respect to modules loading correctly.
I can't really provide a self contained example, because the problems seem so erractic and hard to predict.
Basically storybook is being run and it is trying to import files, however something is going wrong in this step. I am guessing there is some error in one of the dependencies down the line, or that there is a circular dependency somewhere.
I am getting this error in all kinds of places :
ReferenceError: Cannot access 'SOMETHING' before initialization
Basically my storybook file looks something like this :
storiesOf('storybook test', module)
.addDecorator(withKnobs)
.add('a story ', () => {
return (
<div>
<Provider store={store}>
<HashRouter pathname={"asdf"}>
<CSVImportFlow
step={"edit"}
entitySchemas={{}}
/>
</HashRouter>
</Provider>
</div>
)
})
And these Reference Errors appear based on something being imported.
In my case, I was using propTypes instead of PropTypes, small p was an issue.
You know, I spend more time just trying to get things set up to work with Angular than I do actually developing with Angular. There must be an easier way... :(
Currently, I am using the aspnetcore-spa template, creating a project with the command "dotnet new angular" - this is version 1.0.3, which adds Angular 4.1.2 to the npm dependencies. This works great to get a project running quickly. But now I want to add PrimeNG to take advantage of their form controls. I have been struggling with this all day, and would love it if anyone could provide some assistance.
Here is what I have done in my current effort (the latest of many, starting fresh each time):
1) Added to the package.json file: "primeng": "4.1.0-rc.2"
2) Added 'primeng/primeng' to the webpack.config.vendor.js file's vendor collection.
3) Added the following to my test module (which is in turn referenced in app.module.shared.ts so I can route to it via my RouterModule):
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
And in the html for the module, in an attempt to use the file uploader control, I have (from their site - https://www.primefaces.org/primeng/#/fileupload):
<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>
4) ran "webpack --config webpack.config.vendor.js" from a command prompt at the root of the project folder, which completed with no errors.
Then I hit F5 to run the project, and I got this error:
Exception: Call to Node module failed with error: Error: Template parse errors:
'p-fileUpload' is not a known element:
1. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. (" type="button" (click)="onclick()" class="ui-button-info" label="Click Me">Click Me</button>-->
So, in an effort to comply, I added a reference to the ngprime module to the app.module.shared.ts file, like this (I don't really know how I should reference the module...):
import { FileUploadModule } from 'primeng/primeng';
But got the same exact error.
What am I missing???
Any help would be most appreciated.
I finally have this working, using the asp-prerender-module to get server-side rendering, and not having to rely on the asp-ng2-prerender-module (see my last comment). The trick, I found, was to reference the FileUploaderModule in the app.module.shared.ts file like this:
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
rather than like this:
import { FileUploadModule } from 'primeng/primeng';
The reason this matters is that the latter method of referencing will load all other components as well (see explanation here: https://www.primefaces.org/primeng/#/setup), and SOME of the PrimeNG components can not be rendered on the server due to DOM-related references (things like "window", which do not exist on the server). See the discussion here for more on this: https://github.com/primefaces/primeng/issues/1341
This change, combined with the other steps listed in my answer and, of course, actually referencing the directive in app.module (thank you #pankaj !) made everything work correctly at last. Only took me about 7 hours to figure it out. :(
Environment: Plone 5.0.6, OpenLayers 3.11.0
I want using sample codes at https://github.com/GaborFarkas/mastering_openlayers3/archive/v1.1.zip to work within my Plone instance. You can see the custom package code at https://github.com/l34marr/my.map/tree/world-capitals that tries to read a GeoJSON file and display features on the VectorLayer.
At first I run into the following errors:
Uncaught ReferenceError: ol is not defined
Uncaught Error: Mismatched anonymous define() module: function () { ...
By guessing, a workaround seems fix the above issue: changing the order of two lines in main_template.pt as follows:
<metal:javascriptslot define-slot="javascript_head_slot" />
<div tal:replace="structure provider:plone.scripts" />
This way, the errors are gone and everything seems working as expected. See the screenshot for reference.
Question: What causes the error? What's the recommended hints to debug and fix the issue?
Some modules just seem to be invisible to Flow. For example I have react-native-overlay installed via npm into my node_modules directory but I get a whole bunch of errors like this from Flow:
[js/components/DatePickerOverlay.js:18
18: let Overlay = require('react-native-overlay');
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ react-native-overlay. Required module not found
This module doesn't have types so it would be fine if I could just get Flow to ignore it entirely.
Here's my .flowconfig (based on React Native's one):
https://gist.github.com/almost/20c6caf6d18d0e5c689f
As you can see I'm on flow 0.20.1 and I have module.system=haste (as required by React Native)
I tried adding a //$FlowIgnore comment to the import lines but then Flow complains about an unneeded ignore comment! I also tried creating a react-native-flow.js.flow file with a dummy export which seemed to work at first but then after a flow restart stopped working.
Any ideas for how to either help Flow find this module or make it ignore the import line completely?
Looks like you're ignoring it here: https://gist.github.com/almost/20c6caf6d18d0e5c689f#file-flowconfig-L42-L50
If you don't mind manually typing it up, add a react-native-overlay.js to your interfaces and type up a couple signatures.
This is happening because the library doesn't exist in flow-typed.
A simple fix could be creating the following entry in the .flowconfig file:
[ignore]
<PROJECT_ROOT>/libdefs.js
[libs]
./libdefs.js
If using flowtype < 0.60.0 add in libdefs.js
// #flow
declare module "react-native-overlay" {
declare var exports: any;
}
Or if using flowtype > 0.60.0
declare module 'react-native-overlay' {
declare module.exports: any;
}
Note: any is an unsafe type so you can always take advantage of improve the definition of the library
Hope that helps,