Documentation for upgrading?

LouWii commented 5 years ago

Hi there

First, thanks for creating webpack-encore, it helps a lot!

I was using v0.20.1 until today, I've decided to upgrade since I had some issues with a third party package using the spread operator, and I wasn't able to configure Babel to take care of it properly.

Anyway, I've updated to webpack-encore 0.22.1 and it's now working perfectly.

However, I don't know if I updated it properly. I manually ran npm install --save @symfony/webpack-encore@^0.22 , npm install --save vue-loader@^15.0.11 and npm install --save sass-loader@^7.0.1 and it worked fine. But I'm not sure that's the right way. I looked at the documentation https://symfony.com/doc/current/frontend.html but there's nothing about updating/upgrading.

Thanks

Rebolon commented 5 years ago

Noe one to explain how to upgrade ?

Rebolon commented 5 years ago

I've started a migration of my demo app. The build is now ok, but my vuejs application that used karma is now failing... The browser open and close immediatly without really comprehensive message.

Command output

npm run test-karma

> sf-flex-encore-vuejs@0.0.1 test-karma php-sf-flex-webpack-encore-vuejs
> karma start assets/tests/units/karma.conf.js --single-run

(node:21784) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
i ｢wdm｣: wait until bundle finished: noop
 WARNING  Compiled with 5 warnings                                                                                                                                                                        16:48:50

 warning 

chunk ..\..\js\vuejs\tests\index~js/vuejs [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--1-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./assets/js/vuejs/components/Loader.vue?vue&type=sty
le&index=0&id=c1dff998&scoped=true&lang=css&
 * css ./node_modules/css-loader??ref--1-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./assets/js/vuejs/components/Movie.vue?vue&type=styl
e&index=0&id=b3c2dac2&scoped=true&lang=css&

 warning 

chunk ..\..\js\vuejs\tests\index~js/vuejs [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--1-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./assets/js/vuejs/components/Movies.vue?vue&type=sty
le&index=0&id=215f6264&scoped=true&lang=css&
 * css ./node_modules/css-loader??ref--1-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./assets/js/vuejs/components/Movie.vue?vue&type=styl
e&index=0&id=b3c2dac2&scoped=true&lang=css&

 warning 

OfflinePlugin: Cache pattern [*.json] did not match any assets

 warning 

OfflinePlugin: Cache pattern [*.css] did not match any assets

 warning 

OfflinePlugin: Cache pattern [img/*] did not match any assets

‼ ｢wdm｣:
i ｢wdm｣: Compiled with warnings.
06 03 2019 16:48:50.977:INFO [karma]: Karma v2.0.5 server started at http://0.0.0.0:9876/
06 03 2019 16:48:50.984:INFO [launcher]: Launching browser Chrome with unlimited concurrency
06 03 2019 16:48:51.362:INFO [launcher]: Starting browser Chrome
06 03 2019 16:48:55.296:INFO [Chrome 72.0.3626 (Windows 10 0.0.0)]: Connected on socket ttOqEUxRCQM4ULm4AAAA with id 77844889

Chrome 72.0.3626 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.019 secs / 0 secs)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sf-flex-encore-vuejs@0.0.1 test-karma: `karma start assets/tests/units/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sf-flex-encore-vuejs@0.0.1 test-karma script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /var/log/npm-cache/_logs/2019-03-06T15_48_55_718Z-debug.log

Here is my karma.conf.js

const Encore = require('@symfony/webpack-encore')
//const ManifestPlugin = require('webpack-manifest-plugin');

// Initialize Encore before requiring the .config file
Encore.configureRuntimeEnvironment('dev-server')

// Retrieve webpack config
const webpackConfig = require('../../../webpack.config.babel')

// Set writeToFileEmit option of the ManifestPlugin to false
/*for (const plugin of webpackConfig.plugins) {
    if ((plugin instanceof ManifestPlugin) && plugin.opts) {
        plugin.opts.writeToFileEmit = false
    }
}*/

// Remove entry property (handled by Karma)
//delete webpackConfig.entry

// Karma options
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],

        files: [
            '../../js/vuejs/tests/index.js'
        ],

        preprocessors: {
            '../../js/vuejs/tests/index.js': ['webpack']
        },

        browsers: ['Chrome'],

        webpack: webpackConfig,

        webpackMiddleware: {
            stats: 'errors-only',
            noInfo: true,
        },

        plugins: [
            require('karma-webpack'),
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-spec-reporter'),
            require('karma-junit-reporter'),
            require('karma-jasmine-html-reporter'),
        ],

        chromeLauncher: {
            exitOnResourceError: false
        },

        reporters: ['kjhtml', 'spec', 'junit'],

        junitReporter: {
            outputDir: '../../../var/report', // results will be saved as $outputDir/$browserName.xml
            outputFile: 'karma.xml', // if included, results will be saved as $outputDir/$browserName/$outputFile
            suite: '', // suite will become the package name attribute in xml testsuite element
            useBrowserName: false, // add browser name to report and classes names
            nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
            classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
            properties: {}, // key value pair of properties to add to the <properties> section of the report
            xmlVersion: 1 // use '1' if reporting to be per SonarQube 6.2 XML format
        },

        autoWatch: true,
    });
}

and the index.js used to list spec files:

const testsContext = require.context(".", true, /\.spec$/)
testsContext.keys().forEach(testsContext)

and the package.json deps section:

"dependencies": {
        "@api-platform/admin": "^0.6.2",
        "@rebolon/json-reviver": "0.0.7",
        "apollo-cache-inmemory": "^1.5.1",
        "apollo-client": "^2.5.1",
        "apollo-link": "^1.2.8",
        "apollo-link-error": "^1.1.7",
        "apollo-link-http": "^1.5.11",
        "axios": "^0.18.0",
        "devextreme": "^18.2.6",
        "devextreme-vue": "^18.2.6",
        "graphql": "^14.1.1",
        "graphql-tag": "^2.10.1",
        "offline-plugin": "^5.0.6",
        "prop-types": "^15.7.2",
        "quasar-extras": "^1.0.3",
        "quasar-framework": "^0.15.15",
        "react": "^16.8.3",
        "react-dom": "^16.8.3",
        "rxjs": "^6.4.0",
        "uglifyjs-webpack-plugin": "^2.1.2",
        "vue": "^2.6.8",
        "vue-apollo": "^3.0.0-beta.28",
        "vue-router": "^3.0.2",
        "vuelidate": "^0.7.4"
    },
    "devDependencies": {
        "@angular/cli": "^7.3.4",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@symfony/webpack-encore": "^0.24.0",
        "bootstrap": "^4.3.1",
        "create-react-app": "^1.5.2",
        "jasmine": "^3.3.1",
        "karma": "^2.0.5",
        "karma-chrome-launcher": "^2.2.0",
        "karma-jasmine": "^2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "karma-junit-reporter": "^1.2.0",
        "karma-spec-reporter": "0.0.32",
        "karma-webpack": "^3.0.5",
        "node-sass": "^4.11.0",
        "prettier": "^1.16.4",
        "rxjs-tslint": "^0.1.7",
        "sass-loader": "^7.1.0",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.2",
        "testcafe": "^15.1.317922",
        "testcafe-vue-selectors": "^3.0.1",
        "ts-loader": "^5.3.0",
        "vue-loader": "^15.7.0",
        "vue-template-compiler": "^2.6.8"
    },

Any idea ? Thanks

The source code is here: https://github.com/Rebolon/php-sf-flex-webpack-encore-vuejs/pull/116/files

Lyrkan commented 5 years ago

@Rebolon I think the original question was more about the usual things you have to do when you want to upgrade to a newer version of Encore (and doing npm install --save-dev @symfony/webpack-encore^x.xx or the yarn equivalent is probably the right answer).

For more specific things our changelog usually lists the BC breaks that we identified, but since you are free to do whatever you want with the generated config object it can't cover things such as changing values without calling Encore's API or passing the config to another tool like Karma. For that you'd have to read these tools' documentation to see if what you're doing is still valid.

Anyway, having a full project like that is really hard to debug but here are some remarks:

The browser open and close immediatly without really comprehensive message.

I think closing the browsers when the tests are done is the default behavior when using --single-run. In your case Karma doesn't seem to load any test (and displays ERROR because of an empty test suite).

Code splitting could be an issue with Karma... maybe try disabling it in your conf file:

delete webpackConfig.optimization.runtimeChunk;
delete webpackConfig.optimization.splitChunks;

You probably still want the delete webpackConfig.entry line since the only entry that should be processed is the one listed in the files property of your Karma config.
If it still doesn't work, try loading simpler tests firsts (that don't use external dependencies or .vue files)

Rebolon commented 5 years ago

thanks for tips @Lyrkan . I investigate but i don't find any clues except that webpack doesn't seem to build anything. So i will continue to search.

symfony / webpack-encore

Documentation for upgrading? #464