Laravel по-русски

Terentiy +2

Сообщений: 12

Не могу подключить TW Elements к Laravel 8

Здравствуйте!

Пытаюсь подключить TW Elements к Laravel 8. Всё делаю строго по документации. Чтобы не думалось, даже начал пустой проект.

Но в результате не подгружаются JS скрипты необходимые для работы TW Elements.

Что у меня получилось:

Файл postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Файл tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./node_modules/tw-elements/dist/js/**/*.js"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [require("tw-elements/dist/plugin.cjs")]
}

Файл webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Файл resources/css/app.css

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");
@tailwind base;

@layer base {
  html {
    @apply text-[#4f4f4f];
  }
  html.dark {
    @apply text-neutral-50;
    @apply bg-neutral-800;
  }
}

@tailwind components;
@tailwind utilities;

Файл resources/js/app.js

require('./bootstrap');
import 'tw-elements';
import { Tooltip, initTE } from "tw-elements";
initTE({ Tooltip });

Работа команды npm run dev проходит гладко, ошибок нет. Бандлы создаются.

Но при попытке открыть страницу в консоли JS я вижу следующие ошибки:

app.js:24157 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at De (app.js:24157:37)
    at ./node_modules/tw-elements/dist/js/tw-elements.es.min.js (app.js:24163:20)
    at __webpack_require__ (app.js:35758:42)
    at ./resources/js/app.js (app.js:2065:69)
    at __webpack_require__ (app.js:35758:42)
    at app.js:36032:64
    at __webpack_require__.O (app.js:35795:23)
    at app.js:36034:53
    at app.js:36036:12

И вот тут у меня затык.

Буду признателен за помощь.

Crast1969

Сообщений: 2

Re: Не могу подключить TW Elements к Laravel 8

Create new project. ...
Run the development server. ...
Install Tailwind CSS. ...
Add the paths to all of your template files in your tailwind. ...
Add the @tailwind directives for each of Tailwind's layers to your app. ...
Make sure your compiled CSS and JS are included in the head in welcome. ...
Install TW Elements.

Crast1969

Сообщений: 2

Re: Не могу подключить TW Elements к Laravel 8

Create new project. …
Run the development server. …
Install Tailwind CSS. …
Add the paths to all of your template files in your tailwind. …
Add the @tailwind directives for each of Tailwind’s layers to your app. …
Make sure your compiled CSS and JS are included in the head in welcome. …
Install TW Elements.
[URL=https://mybalancenow.fun/]My Balance Now[/URL]