New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Build fails out of the box due to a missing webpack-cli dev dependency and other missing webpack configs #389

Closed
SeanKilleen opened this Issue Dec 11, 2018 · 7 comments

Comments

Projects
None yet
4 participants
@SeanKilleen
Copy link

SeanKilleen commented Dec 11, 2018

Hi all,

I'll submit a PR for this but writing up the issue first.

Update: Leaving this issue here for a bit to percolate because locking webpack-dev-server to a specific version may be the better route to go anyway.

Symptoms

It appears that out of the box, the build for add-ins (in this case an Outlook add-in) now fails.

Once I resolved the missing webpack-cli project (see #390), I also see that webpack-dev-server is only compatible with webpack v4.x. So I update webpack v4.x to accommodate, at which point (understandably) the webpack config breaks due to some changes around the major version bump.

Causes

Webpack has split out the cli into a webpack-cli project, which needs to be added as an additional dev dependency.

Recreation

On Windows 10 | Node v10.14.1 | npm v6.4.1

  • npm install -g yo generator-office
  • yo office
  • Select Office add-in project using React framework
  • Entered name
  • Selected Outlook as the target app.
  • Generates an app in a sub-folder
  • run npm start

Expected behavior: See local site served

Actual behavior: See the below error:

> webpack-dev-server --inline --config config/webpack.dev.js --progress

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:582
    throw err;
    ^

Steps to fix (I think?)

  • (#389) Add webpack-cli dependency
  • Bump webpack to ^4.0.0
  • Fix Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead

Also, I think it may be possible to lock in webpack-dev-server to the last version that doesn't require webpack v4.x

SeanKilleen added a commit to SeanKilleen/generator-office that referenced this issue Dec 11, 2018

@SeanKilleen SeanKilleen changed the title Build fails out of the box due to a missing webpack-cli dev dependency Build fails out of the box due to a missing webpack-cli dev dependency and other missing webpack configs Dec 11, 2018

@akrantz

This comment has been minimized.

Copy link
Collaborator

akrantz commented Dec 11, 2018

I'm unclear to which webpack config this refers. Is this for a particular project template? I don't think it is for generator-office itself.

@SeanKilleen

This comment has been minimized.

Copy link

SeanKilleen commented Dec 11, 2018

Sorry — this was for a react framework based outlook plugin.

@richdizz

This comment has been minimized.

Copy link

richdizz commented Dec 11, 2018

It appears to me that the break was introduced in webpack-dev-server v3.0.0, everything works if you set the version to v2.11.1 (last release before v3). However, that introduces a high severity vulnerability. Not sure if that is really that critical given this is for local testing.

UPDATE: the dev server crashes when you try to serve up the view on node version >= v11. Guessing this might be related to the vulnerability in 2.11.1

@SeanKilleen

This comment has been minimized.

Copy link

SeanKilleen commented Dec 12, 2018

Given @richdizz's point, it sounds like the best way forward on this would be to bump to Webpack v4 and update things accordingly.

I may be willing to take a look at this in PR format if folks would be willing to offer some guidance along the way. Let me know if you're interested.

@TCourtneyOwen

This comment has been minimized.

Copy link
Collaborator

TCourtneyOwen commented Dec 12, 2018

Thanks for reporting this issue, @SeanKilleen. I am seeing the same behavior and will try and get a fix out today. It appears to be a problem with the React template in general, and not just specific Outlook.

TCourtneyOwen added a commit to TCourtneyOwen/generator-office that referenced this issue Dec 12, 2018

Build fails out of the box due to a missing webpack-cli dev dependenc…
…y and other missing webpack configs OfficeDev#389

- Updated webpack to v.4.21.1
- Updated other packages as neccessary to work with latest webpack
- Verified React template now builds, that "start" command now successfully starts webpack-dev-server and that the addin now works
@TCourtneyOwen

This comment has been minimized.

Copy link
Collaborator

TCourtneyOwen commented Dec 12, 2018

I just created a pull request for this at #391

andrewconnell added a commit to andrewconnell/TrainingContent that referenced this issue Dec 12, 2018

FY2019Q2 content refresh
- significant changes to Angular lab exercise
- known issues with the React sample... all documented and confirmed by MSFT here: OfficeDev/generator-office#389

The steps in the lab work, but users will run into issues until the generator is fixed
@TCourtneyOwen

This comment has been minimized.

Copy link
Collaborator

TCourtneyOwen commented Dec 13, 2018

This issue has been fixed and a new version of Yo Office (1.1.22) has been published out to NPM

davidchesnut added a commit to OfficeDev/TrainingContent that referenced this issue Dec 28, 2018

OfficeAddins - Module 5: FY2019Q2 Quarterly refresh (#567)
* FY2019Q2 content refresh

- significant changes to Angular lab exercise
- known issues with the React sample... all documented and confirmed by MSFT here: OfficeDev/generator-office#389

The steps in the lab work, but users will run into issues until the generator is fixed

* addressing reviewer feedback
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment