Feb 27, 2023

Level 6

[vite]: Rollup failed to resolve import "tinymce/plugins/paste" from "resources/js/app.js".

I seem to not be able to load JS modules like I used to with Laravel , Vite, Vue using Jetstream I get

[vite]: Rollup failed to resolve import "tinymce/plugins/paste" from "/Users/me/code/site.com/resources/js/app.js".

added imports to resources/js/app.js using

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// Default icons are required for TinyMCE 5.3 or above
import 'tinymce/icons/default';

// A theme is also required
import 'tinymce/themes/silver';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
...
// Initialize the app
tinymce.init({
  selector: '#tiny',
  plugins: ['paste', 'link','searchreplace', 'visualblocks', 'insertdatetime', 'advlist', 'autolink', 'lists','image', 'charmap', 'print', 'preview', 'anchor', 'table', 'help', 'wordcount', 'media', 'code', 'fullsceen']
});
...

current Vite config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

But it uses the default alias and it should be loaded from node modules like a normal module that is located there. How do I do that?

LaryAI

3 years ago

Level 58

Ah, the age-old problem of trying to get TinyMCE to play nice with Vite. I feel your pain!

My advice is to try using the resolve option in your Vite config. It should look something like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            'tinymce/plugins/paste': 'node_modules/tinymce/plugins/paste'
        }
    }
});

Good luck!

rhand

3 years ago

Level 6

Using

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path'

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '~': path.join(__dirname, '/node_modules/'),
        }
    },
    build: {
        chunkSizeWarningLimit: 1600,
    },
});

and imports like import '~/tinymce/plugins/link';

now and things build just fine. But now the plugins seem to load in the browser using paths like http://localhost:81/dashboard/articles/1//plugins/advlist%20autolink%20lists%20link%20image%20charmap%20print%20preview%20anchor/plugin.js hitting 404s

rhand

3 years ago

Level 6

Actually the paths to plugins seem to load well without additional allas. Just got confused by the 404s. And I imported some non existing plugins. So somehow the plugins are imported but not added properly. That is why I see

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (plugin.js, line 0)
[Error] Failed to load plugin: advlist lists link image anchor media wordcount from url plugins/advlist lists link image anchor media wordcount/plugin.js
	Wy (app-2954e6ba.js:138:4485)
	cH (app-2954e6ba.js:138:4593)
	(anonymous function) (app-2954e6ba.js:151:6077)
	promiseReactionJob
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (model.js, line 0)
[Error] Failed to load model: dom from url models/dom/model.js
	Wy (app-2954e6ba.js:138:4485)
	Lp (app-2954e6ba.js:138:4813)
	(anonymous function) (app-2954e6ba.js:151:5657)
	promiseReactionJob

rhand

3 years ago

Best Answer

Level 6

I arranged plugins for use in TinyMCE better now based on https://www.tiny.cloud/blog/fixing-plugin-errors/ and had this issue.

failed to load model: dom from url models/dom/model.js

which I solved with added

...
import 'tinymce/models/dom';
...

to app.js. Many changes to TinyMCE 6. Now I only need to deal with

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (skin.min.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (content.min.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (content.css, line 0)

and somehow load these postCSS with tailwind.config.js and or app.css

Do have

/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.css';

// these are missing on loading - not clear why yet.
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/ui/oxide/content.css';
import 'tinymce/skins/ui/oxide/content.min.css';

in app.js but the last three are not loaded.

rhand

3 years ago

Level 6

@webrobert Any idea how I can load the TInyMCE skin/content CSS to resources/app.css in a Laravel / Inertia / Vue / Vite / Tailwind CSS app like this one? Do have TinymCE loading now but keep having these 404s on the page where CSS is being loaded the wrong way. Perhaps I need to add it to resources/css/app.css instead of resources/js/app.js:

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// Default icons are required for TinyMCE 5.3 or above
import 'tinymce/icons/default';

/* Required TinyMCE components */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.css';

// these are missing on loading - not clear why yet. But added here it did not help
// import 'tinymce/skins/ui/oxide/skin.min.css';
// import 'tinymce/skins/ui/oxide/content.css';
// import 'tinymce/skins/ui/oxide/content.min.css';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/image';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/media';

/* content UI CSS is required */
import contentUiSkinCss from 'tinymce/skins/ui/oxide/skin.css';
import contentUiCss from 'tinymce/skins/ui/oxide/content.css';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import contentCss from 'tinymce/skins/content/default/content.css';

// Initialize the app
`tinymce.init({
  selector: '#tiny',
  plugins: [
    'link', 'lists','image', 'anchor', 'wordcount', 'media'
    ],
});`

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

Now with things added to app.css I still get these 404 complaints

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (skin.min.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (content.min.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (content.css, line 0)

referring to links like http://localhost:81/dashboard/articles/1//skins/ui/oxide/skin.min.css

Some resources I used

https://www.tiny.cloud/docs/tinymce/6/rollup-es6-npm/ https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor

rhand

3 years ago

Level 6

Using this code in the component loading the tinyMCE editor I no longer get errors:

...
<div class="bg-white p-4 overflow-hidden shadow-xl sm:rounded-lg">
    <editor
    
    :init="{
        content_css: false, 
        skin: false,
        height: 500,
        menubar: false,
        plugins: [
            'link', 'lists','image', 'anchor', 'wordcount', 'media'
            ],
        toolbar:
        'undo redo | formatselect | bold italic backcolor | \
        alignleft aligncenter alignright alignjustify | \
        bullist numlist outdent indent | removeformat'
    }"
    />
...

with :init="{content_css: false, skin: false}" solved the issue. Solution found at https://stackoverflow.com/questions/68951483/tinymce-err-aborted-404-not-found-skins-vue

And I can use content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(), plus the imports

/* content UI CSS is required */
import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.css';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import contentCss from 'tinymce/skins/content/default/content.css';

to load the skin and content CSS if need be.

1 like

Behram Khattak

2 years ago

Level 1

@rhand I faced this issue in my recent project where I imported javascript DataTables in an app.js file and I faced this issue on the server. Still, I solved this issue by running (npm install && npm run build) on the server, which reinstalled and rebuilt my dependencies and solved this bug.

1 like

Please or to participate in this conversation.