Webpack-encore: copyFiles() error after 1.0 upgrade

[mbabker]

I upgraded a project which uses FOSCKEditorBundle to use Encore 1.0, and for the most part the upgrade went pretty smoothly. Except for one issue with copying files.

We have a config that matches the documentation for using the bundle and Encore, and the process fails out while copying the editor files from node_modules to public/build. It only affects the plugins directory in that list of configs (commenting that one config out allows the build to succeed, minus all those files), and it looks like it has to do with the fact the various plugins have image files.

(node:29135) UnhandledPromiseRejectionWarning: TypeError: Expected a SourceNode, string, or an array of SourceNodes and strings. Got export default __webpack_public_path__ + "ckeditor/plugins/about/dialogs/hidpi/logo_ckeditor.png";
    at SourceNode_add [as add] (<project>/node_modules/webpack/node_modules/source-map/lib/source-node.js:184:11)
    at new SourceNode (<project>/node_modules/webpack/node_modules/source-map/lib/source-node.js:43:29)
    at RawSource.node (<project>/node_modules/webpack/node_modules/webpack-sources/lib/RawSource.js:49:10)
    at exports.getNode (<project>/node_modules/webpack/node_modules/webpack-sources/lib/helpers.js:54:17)
    at ReplaceSource.node (<project>/node_modules/webpack/node_modules/webpack-sources/lib/ReplaceSource.js:125:16)
    at <project>/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:105:54
    at Array.map (<anonymous>)
    at ConcatSource.node (<project>/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:104:19)
    at exports.getSourceAndMap (<project>/node_modules/webpack/node_modules/webpack-sources/lib/helpers.js:20:27)
    at ConcatSource.sourceAndMap (<project>/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:95:10)
    at CachedSource.sourceAndMap (<project>/node_modules/webpack/node_modules/webpack-sources/lib/CachedSource.js:158:35)
    at <project>/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:106:31
    at Array.map (<anonymous>)
    at ConcatSource.node (<project>/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:104:19)
    at exports.getSourceAndMap (<project>/node_modules/webpack/node_modules/webpack-sources/lib/helpers.js:20:27)
    at ConcatSource.sourceAndMap (<project>/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:95:10)

Even stranger is our full copyFiles() config actually does explicitly copy over a few image files, and that does work OK.

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

Encore
    .copyFiles([
        {from: './node_modules/ckeditor4/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
        {from: './node_modules/ckeditor4/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/lang', to: 'ckeditor/lang/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/skins', to: 'ckeditor/skins/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/vendor', to: 'ckeditor/vendor/[path][name].[ext]'},
        {from: './assets/images', to: (!Encore.isProduction() ? 'images/[path][name].[ext]' : 'images/[path][name].[hash:8].[ext]'), pattern: /\.(svg)$/},
        {from: './assets/images', to: (!Encore.isProduction() ? 'images/[path][name].[ext]' : 'images/[path][name].[hash:8].[ext]'), pattern: /loading\.gif$/},
    ])

[weaverryan]

I'll have to check into this - but it sounds legitimate. Webpack 5 (and Encore 1.0) uses the new "Asset Modules", which basically means: there are some differences in how images are handled. But yes, this behavior is odd - why the images would copy correctly in one spot but not another...

[kniziol]

Same problem here. Details below.

package.json

{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0",
        "@symfony/stimulus-bridge": "^1.1.0",
        "@symfony/webpack-encore": "^1.0.0",
        "core-js": "^3.0.0",
        "file-loader": "^6.0.0",
        "regenerator-runtime": "^0.13.2",
        "sass": "^1.32.5",
        "sass-loader": "^10.0.0",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.6.0"
    },
    // ...
    "dependencies": {
        "ckeditor": "^4.12.1",
        // ...
    }
}

webpack.config.js

    .copyFiles([
        // ...
        {from: './node_modules/ckeditor/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
        {from: './node_modules/ckeditor/skins', to: 'ckeditor/skins/[path][name].[ext]'}
    ])

Running encore dev

$ yarn run encore dev
yarn run v1.22.5
Running webpack ...

/var/www/application/node_modules/source-map/lib/source-node.js:184
    throw new TypeError(
    ^

TypeError: Expected a SourceNode, string, or an array of SourceNodes and strings. Got export default __webpack_public_path__ + "ckeditor/plugins/about/dialogs/hidpi/logo_ckeditor.png";
    at SourceNode_add [as add] (/var/www/application/node_modules/source-map/lib/source-node.js:184:11)
    at new SourceNode (/var/www/application/node_modules/source-map/lib/source-node.js:43:29)
    at RawSource.node (/var/www/application/node_modules/webpack/node_modules/webpack-sources/lib/RawSource.js:49:10)
    at exports.getNode (/var/www/application/node_modules/webpack/node_modules/webpack-sources/lib/helpers.js:54:17)
    at ReplaceSource.node (/var/www/application/node_modules/webpack/node_modules/webpack-sources/lib/ReplaceSource.js:125:16)
    at /var/www/application/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:105:54
    at Array.map (<anonymous>)
    at ConcatSource.node (/var/www/application/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:104:19)
    at exports.getSourceAndMap (/var/www/application/node_modules/webpack/node_modules/webpack-sources/lib/helpers.js:20:27)
    at ConcatSource.sourceAndMap (/var/www/application/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:95:10)
error Command failed with exit code 1.

The error TypeError: Expected a SourceNode, string, or an array of SourceNodes and strings. Got export default __webpack_public_path__ + "ckeditor/plugins/about/dialogs/hidpi/logo_ckeditor.png"; occurs when those 2 lines are enabled in copyFiles(). Otherwise - everything works fine.

It appeared after upgrade symfony/webpack-encore-bundle recipe and replacement of:

"devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-react": "^7.0.0",
    "@symfony/webpack-encore": "^0.27.0",
    "core-js": "^3.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.0.1",
    "webpack-notifier": "^1.6.0"
},

with:

"devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "@symfony/stimulus-bridge": "^1.1.0",
    "@symfony/webpack-encore": "^1.0.0",
    "core-js": "^3.0.0",
    "file-loader": "^6.0.0",
    "regenerator-runtime": "^0.13.2",
    "sass": "^1.32.5",
    "sass-loader": "^10.0.0",
    "stimulus": "^2.0.0",
    "webpack-notifier": "^1.6.0"
},

in package.json.

I was trying different solutions, like change:

    .copyFiles([
        // ...
        {from: './node_modules/ckeditor/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
        {from: './node_modules/ckeditor/skins', to: 'ckeditor/skins/[path][name].[ext]'}
    ])

to:

    .copyFiles([
        // ...
        {
            from: './node_modules/ckeditor/',
            to: 'ckeditor/[path][name].[ext]',
            includeSubdirectories: true
        },
    ])

but it doesn’t solve the problem.

What’s the reason? Is there any workaround?

[weaverryan]

Unfortunately, I have no idea what could be causing this yet :/

[kniziol]

Workaround

If you’re using Symfony-based application and FOSCKEditorBundle:

1. Remove all ./node_modules/ckeditor/ paths from .copyFiles() in webpack.config.js
2. Run bin/console ckeditor:install command to install CKEditor
3. Run bin/console assets:install command to install assets (and CKEditor) in public directory

[Gemorroj]

workaraund for me (see https://webpack.js.org/plugins/copy-webpack-plugin/)

yarn add copy-webpack-plugin

webpack.config.js:

const CopyPlugin = require('copy-webpack-plugin');

...

    /*.copyFiles({
        from: './assets/resources/',
        to: 'resources/[path][name].[ext]',
    })*/
    .addPlugin(
        new CopyPlugin({
            patterns: [{
                from: './assets/resources/',
                to: 'resources/[path][name].[ext]',
            }],
        })
    )

[Lyrkan]

Hey there,

As Ryan said that bug is caused by some kind of conflict between how Encore.copyFiles() works and the new asset/resource module type used for images/fonts imports.

Could someone confirm that the following fix works ?

$ yarn remove @symfony/webpack-encore
$ yarn add git://github.com/lyrkan/webpack-encore.git#fix-copy-files-asset-resource

Note that if you are using configureLoaderRule('images', ...) or configureLoaderRule('fonts', ...) this introduces a small breaking change.

[mpiot]

Hi @Lyrkan, I've just test your branch and it works well for me.

[kniziol]

@Lyrkan Works fine. It solves the problem.