webcompat / webcompat-reporter-extensions

Browser extensions to help report site compatibilty issues.
26 stars 21 forks source link

Update webpack dependency to v4 #99

Closed laghee closed 6 years ago

laghee commented 6 years ago

I'll work on fixing this last dependency (partitioned from original Issue 95).

miketaylr commented 6 years ago

Thank you!

miketaylr commented 6 years ago

(setting the outreachy: contribution wanted label just so we can track that work in a single search, but @laghee is working on this)

laghee commented 6 years ago

@miketaylr So I think I've figured out what the issue is, but I'm not sure the best way to resolve it. For some reason, after I update webpack to v4, the intern tests create two nested dist folders instead of one. This doesn't seem to affect the dist-output test, but it causes the manifest tests to fail because (presumably) it can't find the file.

If I monkey with the path in the test-manifest.js file (adding a parent 'dist'), the tests all pass, although I still get a fatal error because (I think) the file-exists module's path info conflicts.

screenshot 2018-03-08 16 20 13

adamopenweb commented 6 years ago

@miketaylr is on PTO but will take a look later tonight.

miketaylr commented 6 years ago

For some reason, after I update webpack to v4, the intern tests create two nested dist folders instead of one.

Huh... interesting! Let me take a look.

miketaylr commented 6 years ago

@laghee

npm run build:firefox

> webcompat-reporter-addon@0.5.1 build:firefox /Users/mitaylor/dev/webcompat-reporter-extensions
> webpack --config firefox/webpack.config.js

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 install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webcompat-reporter-addon@0.5.1 build:firefox: `webpack --config firefox/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webcompat-reporter-addon@0.5.1 build:firefox 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!     /Users/mitaylor/.npm/_logs/2018-03-13T03_56_35_522Z-debug.log
mitaylor at omg-5 in ~/dev/webcompat-reporter-extensions on test/webpack/1*
🐓 npm install -D webpack-cli

ok, got that installed.

🐓 npm run build:firefox

> webcompat-reporter-addon@0.5.1 build:firefox /Users/mitaylor/dev/webcompat-reporter-extensions
> webpack --config firefox/webpack.config.js

Hash: 0b6b9f3c6bd237c9107d
Version: webpack 4.1.1
Time: 162ms
Built at: 3/12/2018 10:57:18 PM
                       Asset       Size  Chunks             Chunk Names
./dist/firefox/background.js   1.58 KiB       0  [emitted]  main
   ./dist/firefox/content.js  347 bytes          [emitted]  
./dist/firefox/manifest.json  799 bytes          [emitted]  
  ./dist/firefox/icon128.png   1.66 KiB          [emitted]  
   ./dist/firefox/icon32.png  906 bytes          [emitted]  
   ./dist/firefox/icon48.png   1.28 KiB          [emitted]  
   ./dist/firefox/icon64.png   1.78 KiB          [emitted]  
Entrypoint main = ./dist/firefox/background.js
   [0] ./firefox/addon.js + 1 modules 2.41 KiB {0} [built]
       | ./firefox/addon.js 350 bytes [built]
       | ./shared/base.js 2.07 KiB [built]

The following line surprises me a bit (but that's probably because I'm a webpack noob):

Entrypoint main = ./dist/firefox/background.js.

And yep, I see you're right, there's a nested dist directory:

🐓 ls dist/
dist

Looking at webpack.firefox.js:

module.exports = {
  entry: "./firefox/addon.js",
  output: {
    filename: "./dist/firefox/background.js"
  },

So yeah, something is goofy with the filepaths it would seem!

I just changed the to for the CopyWebpackPlugin section files to ../dist instead of ./dist and it seems like I made some progress:

screen shot 2018-03-12 at 11 06 45 pm

That might give you a hint how to fix it, or I see there's some debug options for the plugin that could help with path resolution: https://github.com/webpack-contrib/copy-webpack-plugin#options

Let me know if you get stuck! I'm on PTO until Thursday, but I'll log back online tomorrow night.

laghee commented 6 years ago

Got everything writing to the correct place now! I've tried poking around online to figure out why this was happening (particularly since it was only happening to me :stuck_out_tongue_winking_eye:, and you had updated copy-webpack-plugin from 4.3.1 to 4.5 as well), but haven't found anything so far.

miketaylr commented 6 years ago

@laghee fixed this , thanks!