PrelineUI插件不起作用,导致一些使用JavaScript的组件无法正常工作。

huangapple go评论75阅读模式
英文:

PrelineUI plugin not working, causing a few components which uses JavaScript to not work

问题

I am currently using the latest @astrojs/tailwind integration. I also installed the PrelineUI nav component which works on JavaScript injected through the PrelineUI plugin. Now the main issue is the components which uses Preline JavaScript isnt working. Eg. the hamburger menu. I tried reading and implemented all the instructions give in the docs but still couldnt make the hamburger or any other component which uses Preline JavaScript to work.

Here is the original - header nav component
Here is a sample Codesandbox - Try clicking the hamburger menu or any of the dropdowns [Codesanbox link] (https://codesandbox.io/p/sandbox/gallant-wind-itec94?file=%2Ftailwind.config.cjs%3A10%2C38)

This is my tailwind.config.cjs file


/** @type {import('tailwindcss').Config} */

const preline = require('preline/plugin.js');

module.exports = {
	content: [
		'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
		'./public/**/*.astro',
		'node_modules/preline/dist/*.js',
	],
	theme: {
		extend: {},
	},

	plugins: [preline],
};

This is my package.json file

{
	"name": "funny-orbs-2023",
	"type": "module",
	"version": "0.0.1",
	"scripts": {
		"dev": "astro dev",
		"start": "astro dev",
		"build": "astro build",
		"preview": "astro preview",
		"astro": "astro"
	},
	"dependencies": {
		"@astrojs/tailwind": "^3.1.2",
		"@fontsource/inter": "^4.5.15",
		"@fontsource/inter-tight": "^4.5.2",
		"@preline/dropdown": "^1.3.0",
		"astro": "^2.4.5",
		"preline": "^1.8.0",
		"tailwindcss": "^3.3.2"
	}
}

Can somebody please help me what this issue is ?? I have been trying to figure this out for days now. Thanks in advance.

英文:

I am currently using the latest @astrojs/tailwind integration. I also installed the PrelineUI nav component which works on JavaScript injected through the PrelineUI plugin.
Now the main issue is the components which uses Preline JavaScript isnt working. Eg. the hamburger menu. I tried reading and implemented all the instructions give in the docs but still couldnt make the hamburger or any other component which uses Preline JavaScript to work.

Here is the original - header nav component
Here is a sample Codesandbox - Try clicking the hamburger menu or any of the dropdowns [Codesanbox link] (https://codesandbox.io/p/sandbox/gallant-wind-itec94?file=%2Ftailwind.config.cjs%3A10%2C38)

This is my tailwind.config.cjs file


/** @type {import('tailwindcss').Config} */

const preline = require('preline/plugin.js');

module.exports = {
	content: [
		'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
		'./public/**/*.astro',
		'node_modules/preline/dist/*.js',
	],
	theme: {
		extend: {},
	},

	plugins: [preline],
};

This is my package.json file

{
	"name": "funny-orbs-2023",
	"type": "module",
	"version": "0.0.1",
	"scripts": {
		"dev": "astro dev",
		"start": "astro dev",
		"build": "astro build",
		"preview": "astro preview",
		"astro": "astro"
	},
	"dependencies": {
		"@astrojs/tailwind": "^3.1.2",
		"@fontsource/inter": "^4.5.15",
		"@fontsource/inter-tight": "^4.5.2",
		"@preline/dropdown": "^1.3.0",
		"astro": "^2.4.5",
		"preline": "^1.8.0",
		"tailwindcss": "^3.3.2"
	}
}

Can somebody please help me what this issue is ?? I have been trying to figure this out for days now. Thanks in advance.

答案1

得分: 1

看起来Preline文档中的<script>标签是不正确的:

<script is:inline src="./assets/vendor/preline/dist/preline.js"></script>

这个标签不需要is:inline指令,文件路径也不存在。

<script>标签应该是这样的:

<script src="../../node_modules/preline/dist/preline.js"></script>

文档链接:

英文:

It looks like the <script> tag in the Preline docs is incorrect:

<script is:inline src="./assets/vendor/preline/dist/preline.js"></script>

The tag does not need a is:inline directive and the filepath does not exist.

The <script> tag should look like this:

<script src="../../node_modules/preline/dist/preline.js"></script>

Docs:

huangapple
  • 本文由 发表于 2023年5月24日 19:16:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/76322961.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定