Installer Tinymce avec NPM

Peu être une piste : dans ta conf webpack, au niveau de ton test tu as :

test: /\.tinymce$/

Le $ à la fin indique que pour que le test match, il faut que le fichier à charger termine par ".tinymce", or dans tes imports concernant tintmce, tous ne finissent pas par ".tinymce".

Essaye donc ce pattern :

test: /tinymce/

Tout ce qui contient "tinymce"

Bonjour,
J'ai toujours la même erreur que le teste échoue. Est-ce qu'il y a une autre moyen ou je doit aller à la vielle version charger les source et les mettre directement dans mon dossier racine de mon projets qui est le répectoire "/public/"?

Peux tu nous coller l'entiereté de ton webpack.config.js ?
Merci

Voici la configuration de mon fichier webpack.config. Elle un peut diférent d'une configuration par défaut de Webpack, car j'utilise le framework Laravel qui utilise webpack en arrière-plan pour construir les fichier js et css de mon application web :

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/assets/js/app.js', 'public/js')
    .js('resources/assets/js/backend.js','public/js')
    .js('resources/assets/js/editor.js','public/js')
    .sass('resources/assets/sass/backend.scss', 'public/css')
   .sass('resources/assets/sass/app.scss', 'public/css');

mix.webpackConfig({
    output: {
        publicPath: '/'
    },
    rules: [
        {
            test: '/tinymce/',
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        'name': '[path][name].[ext]',
                        'context': 'node_modules/tinymce!tinymce/skins'
                    }
                }
            ]
        }
    ],
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default'],
            Util: "exports-loader?Util!bootstrap/js/dist/util",
            Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
            Modal: "exports-loader?Modal!bootstrap/js/dist/modal"
        })
    ]
});

De ce que je comprend, WebPack teste les loaders dans l'ordre où ils ont été déclaré et dès qu'un test match, le loader est utilisé.

Je me demande si la conf faite via MIX ne rajoute pas des régles avant qui, du coups, sont prioritaire sur ta règle à toi.

As tu essayé de charger TinyMce sur un projet vierge, sans Laravel, pour tester ?

Non pas vraiment. Je vais essayer sur un projet vierge pour voir

J'ai essayer sur un projet vierge de laravel et j'ai toujours cette règle qui échoue toujours.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'rules'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           rules: ...
         }
       })
     ]

Salut,

Tu as jeté un oeil sur le repo github, dans les issues ? :)

L'erreur me parait explicite "that does not match the API schema."
En gros, la config que tu envois à Webpack n'est pas dans un format valide.

Ensuite il dit "configuration has an unknown property 'rules'"
En gros, "rules" ça ne lui dit rien.

Et en effet, "rules" doit être un enfant de "module"

{
    output: {
        publicPath: '/'
    },
    module : {
        rules: [
        {
            test: '/tinymce/',
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        'name': '[path][name].[ext]',
                        'context': 'node_modules/tinymce!tinymce/skins'
                    }
                }
            ]
        }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default'],
            Util: "exports-loader?Util!bootstrap/js/dist/util",
            Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
            Modal: "exports-loader?Modal!bootstrap/js/dist/modal"
        })
    ]
}

Essai ça, et dis nous ce que ça donne cette fois ;)