Require Outside Libraries

Hey JAVroegop

Nice tip, thanks for sharing it :)
Cheers!

Hey Daniel W.

Your approach of downloading the JS file and then importing it is the right way but I believe the library you're trying to use was written a way that's not compatible with Webpack. As an example, there are some old jQuery plugins that cannot be used with Webpack

Cheers!

Well, i eventually found out it was just a version matter. The version above 8 seems (Cause mine installed version "sweetalert2@8.2.4") to not be working properly. So i installed the exact same version as Ryan ("sweetalert2@7.12.0"), and it does.

You can also execute "yarn add sweetalert2@^7.11.0 --dev".

Thanks

Hey crgbe,

Thank you for getting back on this problem, it might be helpful for others.

Cheers!

Hey Michael,

Good question! Actually, all your Node dependencies are dev because nothing of them is publicly available, right? Because node_modules/ as also assets/ folders are behind the server document root, i.e. outside of public/ folder. What to expose is up to you, and you do this with Webpack Encore that moves all the *prod* assets into the public/build/ folder that is available for everyone. So, technically ALL your Node packages that you install with npm/yarn are for *dev* only. But really, it is not important at all, you can move them all to the "dependencies" section and nothing will change. Really, you need to care about "devDependencies" and "dependencies" if you write a Node JS server application.

I hope it clarify things for you.

Cheers!

Hey Bertin!

... not to ignore your question... but I might have a better solution for doing this. Encore already supports PostCss (just call enablePostCss) - I see you added this manually in your code, but this isn't necessary. PostCss (as I think you know) can be used to integrate with autoprefixer. In fact, if I remember correctly, when you call enablePostCss(), Encore will give you an error that you need to create a config file, and the config contents it suggests include the code needed to enable autoprefixer (you likely already have this config file). So basically, you add one line to webpack.config.js, add one config file, install a few packages (which Encore will tell you) and... that should be it!

Let me know if this helps!

Hey weaverryan
It works.
I just enabled enablePostCss() in webpack.config.js
When running yarn run encore dev --watch, i get the message package 'postcss-loader' missing.

After adding the package and run the comment again, it says: FIX create a postcss.config.js file.

I've created this file at the root

# at config, postcss.config.js 
module.exports = {
    plugins: {
        'autoprefixer': {},
    }
};

Now it works

And when i look in my compiled css
position: sticky; has now also position: -webkit-sticky; (created by autoPrefixer).

But i've some questions:

1. Now i need to add the postcss.config.js file to the root but is there a way to change the path, eq to /assets/configs/

I've seen some options on git, <a href="https://github.com/symfony/webpack-encore/pull/130&quot;&gt;webpack-encore pull 130</a>

But don't now how to use it within webpack.encore.js.
See my webpack.config.js below with an example but not working

var Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning()

    .createSharedEntry('js/common', ['jquery'])
    .addEntry('js/backend/backend', './assets/js/backend/backend.js')
    .addStyleEntry('css/backend/backend', ['./assets/scss/backend/backend.scss'])

    .addEntry('js/frontend/app', './assets/js/frontend/app.js')
    .addStyleEntry('css/frontend/app', ['./assets/scss/frontend/app.scss'])
    .addStyleEntry('css/frontend/login', './assets/scss/frontend/login.scss')

    .enableSassLoader()
    .enablePostCssLoader()

    .addPlugin(new CopyWebpackPlugin([
        // copies to {output}/static
        { from: './assets/static', to: 'img' }
    ]))
;

// example but not working
// Encore.enablePostCssLoader((options) => {
//     options.config = {
//         path: 'assets/config/'
//     };
// });

module.exports = Encore.getWebpackConfig();

Some other question, in the video about Copy image you mentioned that encore would have an copy feature in the future. Is this already being implemented?

Hey Bertin!

Woohoo! I'm so happy it's working! This is exactly the "workflow" I was hoping people would have to enable this feature :).

> 1. Now i need to add the postcss.config.js file to the root but is there a way to change the path, eq to /assets/configs/

Hmm. The commented-out config you have looks perfect. When you try this, do you get an error? Or does it just not see the file in the new location? If you completely move the file to the new location (and use that config), is there an error or does it just not work correctly? I'm not sure what's going wrong here.

> 2. Some other question, in the video about Copy image you mentioned that encore would have an copy feature in the future. Is this already being implemented?

Booo. No, not yet. Here's the PR: https://github.com/symfony/.... It's blocked due to some problems in an upstream library. I'm not sure if we'll be able to work around that, or if we'll just need to implement something ourself.

Cheers!