Failed building the solution when integrating with VueJS + Webpack

[shaylavi]

When trying to integrate this package with VueJS + Webpack, it fails bundling the package. The webpack config file has the following setup - plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }) ]

When I add another plugin, the build fails. After deep research I found that chaining of plugins is required to make it work with VueJS, but I couldn't manage to see how it's possible to chain it through webpack.config.js - there is no vue.config.js file.

Ideally, if possible, the plugin will not be required to added and webpack will pick it up automatically, like it does for any new NPM package installed, but installation of this webpack loader requires changes that webpack doesn't like.

For now we're staying with esri-loader, but I'm keen on switching to ESM when possible.

[andygup]

I'm keen on switching to ESM when possible.

@shaylavi are you referring to the @arcgis/core modules? Here's a sample without the arcgis-webpack-plugin: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-vue-cli.

Also note, the upcoming 4.19 release in early April doesn't require configuring and copying the assets by default. You can check out this next release by running npm i @arcgis/core@next.

[shaylavi]

Sorry I might not explaining myself right here. As I understand, @arcgis/core is the latest way to use ESM in Javascript. It works with all modern JS platforms, including VueJS.

If I use VueJS with webpack combined, I cannot use @arcgis/core because webpack fails to compress it, which is why there is arcgis-webpack-plugin right?

So if I install @arcgis/core, it fails adding it on the build process. if I install arcgis-webpack-plugin, it should give me @arcgis/core but it supports compilation with webpack, but again, it fails to be built because of the plugin dependancy I mentioned in the description above.

My scenario is not pure webpack, it's webpack + Vue, which is why it fails to be built

[odoe]

You don't need the plugin to use ESM. It's a convenience if you want the assets copied locally. You can test this with the next release of @arcgis/core and this will be the behavior at 4.19. In a case like the vue-cli, we do not recommend you use this plugin.

[shaylavi]

I tried. the build breaks. webpack is unable to process the library when building the solution

[shaylavi]

after setting up webpack, we run the compile command, which then iterates on each of the files to be compressed as part of the webpack. When it gets to the arcgis assets, instead of a having a filepath, there are numbers, which then breaks it -

` return through.obj(function(file, encoding, callback) { gutil.log('Processing through Webpack: ', file.path);

        config.entry = {};
        config.entry[file.path] = file.path;
        const stream = this;
        const fs = new MemoryFileSystem();
        const compiler = webpack(config);
        compiler.outputFileSystem = fs;

        compiler.run((err, stats) => {
            Object.keys(stats.compilation.assets).forEach((assetUrl) => {
                // iterate all files to be added into webpack - arcgis files are shown as numbers instead of a path!
                if (assetUrl === file.path) {
                    // Update the contents of the existing file
                    file.contents = fs.readFileSync(file.path);
                    stream.push(file);
                } else {
                    // Push an additional file, for example a source map
                    stream.push(new gutil.File({
                        cwd: targetDir,
                        base: sourceDir,
                        path: assetUrl,
                        contents: new Buffer(fs.readFileSync(assetUrl, 'utf8'))
                    }));
                }
            });
            callback();
        });`

I added a condition to skip the object if it's a number, which then lets the build complete successfully, but it won't include arcgis in it and the browser breaks -

[shaylavi]

Should I reopen this on the main repo of the library? or leave it here? I'd be so grateful for some guidance around this issue

[odoe]

Can you provide a sample project to repro this issue please.

[shaylavi]

it's part of a very large-scale project that combines drupal, vuejs, webpack and lining CI-CD pipeline which was all developed by a contracting company and no more support is provided from them, so unfortunately not. that snippet was my tracing for the source of the problem after understanding the failure when running the build process

[dasa]

the browser breaks

Which browser are you using? The parse error seems to be on the spread operator used in https://cdn.jsdelivr.net/npm/@arcgis/core@4.18.1/core/has.js

[shaylavi]

sorry for the delay. Using Chrome. It breaks only after trying to compile a build with this version. We are currently using the ESRI-loader which seems to be compiled fine and no issues occur. I'm just trying to push forward to use ESM but it seems to be impossible in this type of stack

[andygup]

@shaylavi Just a guess looking at your error, I think you'll need to configure webpack to transpile node_modules. @expo/webpack-config might be able to help with that. I've seen similar errors when babel wasn't configured properly. Hopefully that gets you pointed in the right direction.

[andygup]

Closing issue in preparation for repo archiving.