search

single-spa / standalone-single-spa-webpack-plugin

A webpack plugin for running microfrontends in standalone mode.
MIT License
42 stars 8 forks source link

Cannot find 'src' of undefined in `modifyScripts` #13

Closed andreashouben closed 3 years ago

andreashouben commented 3 years ago

Hi there, we've setup our single-spa module without using the vue-cli-plugin-single-spa. I wanted to change that and installed the plugin afterwards. I was hoping to get rid of some configurations.

Now when I try to start my development server I get a

TypeError: Cannot read property 'src' of undefined

  - standalone-single-spa.js:92 StandaloneSingleSpaPlugin.modifyScripts
    [my-module]/[standalone-single-spa-webpack-plugin]/lib/standalone-single-spa.js:92:69

  - standalone-single-spa.js:84 
    [my-module]/[standalone-single-spa-webpack-plugin]/lib/standalone-single-spa.js:84:18

In the line where the error appears, the mainscript has no "attributes" property:

let mainScriptSrc = (publicPath || "/") + mainScript.attributes.src;

I have the html-webpack-plugin installed in version 4.5.2. It doesn't matter though, if I pass it into the the configuration of the single-spa-webpack-plugin or not :/

I'm not quite sure what the plugin wants to achive at this place, but it might be a good idea to make this part of the code a little bit more resilient by checking if the mainScript Object has the attributes property and providing a fallback or at least a helpful error message.

joeldenning commented 3 years ago

Hi @andreashouben, this sounds like either a bug in the standalone plugin or a problem with your webpack configuration. I agree that the standalone plugin should at the very least provide a better error message if the config is wrong, or should just work if this is caused by a bug in the standalone plugin.

Could you provide a demonstration repo that shows the problem?

andreashouben commented 3 years ago

Unfortunately I am not allowed to share the code but I'll try to recreate the problem. I'll provide a demo once I can reproduce the bug.

andreashouben commented 3 years ago

I managed to recreate the bug.

I set up a repository with the same versions we use in our project at this commit.

The following commit simply installs the vue-cli-plugin-single-spa via vue add single-spa. I reverted the changes made to the main.js because it already worked fine. If you run npm run serve on this version you'll (hopefully) get the error.

The node version I used is v14.15.1

Oh, and it may well be that we made a mistake in our webpack configuration. Nonetheless an error that tells us what we did wrong would be nice :-)

Thank you for your work. ❤️

joeldenning commented 3 years ago

Thanks for the demonstration. The root cause of the error is that standalone-single-spa-webpack-plugin is being applied twice - once in your vue.config.js and once inside of vue-cli-plugin-single-spa. When using vue-cli-plugin-single-spa, the standalone plugin is automatically added so you don't need to add it again inside of the vue.config.js.

I've created #14 which will improve error messages for this, and related errors. I've confirmed that it results in the following output in your demo repo:

 ERROR  Failed to compile with 1 error                                                                                                                                                               12:04:10 PM

  Error: standalone-single-spa-webpack-plugin: You have two separate instances of standalone-single-spa-webpack-plugin in your webpack config. If using webpack-config-single-spa or vue-cli-plugin-single-spa,   you do not need to manually add the standalone plugin since it's already added by those projects.

  - standalone-single-spa.js:92 StandaloneSingleSpaPlugin.modifyScripts
    [single-spa-bug-demo]/[standalone-single-spa-webpack-plugin]/lib/standalone-single-spa.js:92:13

  - standalone-single-spa.js:84 
    [single-spa-bug-demo]/[standalone-single-spa-webpack-plugin]/lib/standalone-single-spa.js:84:18

  - new Promise

  - Hook.js:154 AsyncSeriesWaterfallHook.lazyCompileHook
    [single-spa-bug-demo]/[tapable]/lib/Hook.js:154:20

  - index.js:202 
    [single-spa-bug-demo]/[html-webpack-plugin]/index.js:202:87
andreashouben commented 3 years ago

Wow. Very good explanation of the issue. Thank you very much for your help.

andreashouben commented 3 years ago

I guess you will close the issue once the merge request is merged.

joeldenning commented 3 years ago

The improved error messaging is merged and published in https://github.com/single-spa/standalone-single-spa-webpack-plugin/releases/tag/v2.0.2