-
-
Notifications
You must be signed in to change notification settings - Fork 866
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
Webpack v4 #525
Webpack v4 #525
Conversation
rafbcampos
commented
Feb 28, 2018
- Adds Webpack v4
- Removes CommonsChunkPlugin, NamedModulesPlugin and NoEmitOnErrorsPlugin which were removed by the release 4.0.0 (https://github.com/webpack/webpack/releases)
- Set mode based on IS_DEV:
Looks legit. Let me try this out. |
I am not able to get this working. When I run ~/workspace/github/jaredpalmer/razzle-next/examples/basic on pr/525*
$ yarn start
yarn run v1.3.2
$ razzle start
/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/webpack/lib/Template.js:14
module.exports = class Template extends Tapable {
^
TypeError: Class extends value #<Object> is not a constructor or null
at Object.<anonymous> (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/webpack/lib/Template.js:14:41)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/webpack/lib/Module.js:12:18)
at Module._compile (module.js:635:30)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. |
Apparently, Webpack v4 doesn't like old loaders packages. I've updated eslint-loader and now I'm updating file-loader. I'll go through all the examples to see if anything else breaks. I am running yarn on examples / some_example and yarn start, basic ran without this error. I'll be back when I run the other examples. |
Of the 20 examples, 14 have passed. The ones that broke:
|
We'll have to wait on react-loadable and figure out vendor bundle |
We are also blocked because of webpack-contrib/extract-text-webpack-plugin#731 on the vendor bundle:
|
Ok. I'll wait for loader updates to try again. |
Adds thread-loader and extract-text-webpack-plugin beta.
@alohawav I added [email protected] and updated Uglify's placement. I also made some changes to related the new chunking. However, I think I should remove it looking back at it as it will break everyone's apps. |
I believe we should change from assets-webpack-plugin to webpack-manifest-plugin (ztoben/assets-webpack-plugin#83), due to the lack of updating. We can keep the file name though: "assets.json" in the plugin config. But we still have to wait, because they are still solving problems with the update (shellscape/webpack-manifest-plugin#128) Do you think is valid dynamically insert the chunks listed in assets.json? Maybe with this approach, we can prevent problems with different chunks in each project: /server.js const assets = require(process.env.RAZZLE_ASSETS_MANIFEST)
<body>
<div id="root">${markup}</div>
{Object.keys(assets).reduce((scripts, key) => {
return scripts + `<script src=“${assets[key]}" defer crossorigin></script>`
}, '')}
</body> |
@jaredpalmer All the examples are running, except for RX that needs correction of the es-lint rules, I've corrected those of Inferno, but I did not find a plugin for the RX. |
JS is not loading with vendor bundle example on the client. |
* (feat) Adds webpack v4, removes CommonsChunkPlugin and sets mode * (feat) Yarn locks * (feat) Removes NamedModulesPlugin and NoEmitOnErrorsPlugin * (feat) Upgrades eslint-loader and replaces setup for before (devServer) * (feat) Updates some loaders to work with webpack v4 * Add thread-loader, [email protected] Adds thread-loader and extract-text-webpack-plugin beta. * Remove automatic vendor bundling, add @todo * Remove lock * (fix) Fixes Inferno, JSXstyle, Reason, Typescript and WithVendor * Fix TS HMR * Bump to latest webpack
* Webpack v4 (#525) * (feat) Adds webpack v4, removes CommonsChunkPlugin and sets mode * (feat) Yarn locks * (feat) Removes NamedModulesPlugin and NoEmitOnErrorsPlugin * (feat) Upgrades eslint-loader and replaces setup for before (devServer) * (feat) Updates some loaders to work with webpack v4 * Add thread-loader, [email protected] Adds thread-loader and extract-text-webpack-plugin beta. * Remove automatic vendor bundling, add @todo * Remove lock * (fix) Fixes Inferno, JSXstyle, Reason, Typescript and WithVendor * Fix TS HMR * Bump to latest webpack * Update README.md * Move to Yarn Workspaces, fix tests * Remove unused scripts for bootstrap and clean * v2.0.0-alpha.1 * v2.0.0-alpha.2 * v2.0.0-alpha.3 * Drop extract-text for mini-css. Bump start-server (no more refreshes) * Update docs with new hot restart behavior * Make `rs` an h3 in docs * v2.0.0-alpha.4 * Update package descriptions * Bump mini-css-extract-plugin to 0.3.0 (#559) * Add Multistep true so webpack 4 HMR can work (#558) * Bump deps, fix TS example * v2.0.0-alpha.5 * Changed name of the about page component: Home -> About (#561) * chore(package): update lerna to version 2.9.1 (#560) * including polyfills in production build (#562) * Fix logic on polyfill inclusion * v2.0.0-alpha.6 * Fix boolean * v2.0.0-alpha.7 * s/your/you (#566) * Replace clientCompiler before serverCompiler (#569) * Update README.md (#564) Fixed links to Node Inspector docs * Add an example with Hyperapp (#549) * Setup Hyperapp example Enable HMR Don't touch the yarn lock Cleanup Keep naming convention Don't touch preact Reverse formatting on the preact example * Undo formatting something in the preact example Fix formatting Fix formatting Fix formatting Fix format * 2.0.0-alpha.7 * Bump hyperapp version * Add Koa usage example (#533) * Add Koa usage example * Extend Koa example documentation * Make app use default koa styles and logo * Correct Koa URL on doc * Add webpack bar (#563) * Remove yarn.lock from Koa example * Bump deps * v2.0.0-alpha.8 * add emitFile in url-loader options (#576) * Add elm-package post on circleci * Move elm install to dependencies.pre * Use npm to install elm globally * Install elm not elm-package. lol. * Bump deps * v2.0.0-y.0 * Update readme * v2.0.0-alpha.9 * Limiting HMR to App (#577) * #fix starting server code after compile assets (sync) (#575) * Use webpack-dev-server-speedy for perf boost! * v2.0.0-alpha.10 * Bump Webpack to 4.6.0 * v2.0.0-alpha.11 * Fix uglify options * v2.0.0-alpha.12 * Update ESLint (#588) * Upgrade typescript example (#589) * ♻️ Cleanup random keystrokes in Home component * ✨ Upgrade deps and TypeScript. Now supports the new fragment syntax<></> * 👨🏼🎨 Add myself to the contributers list * 📏 Prietier linting fixes * Update README.md * Update README.md * Better defaults for Typescript example (#593) * Better defaults for Typescript example After running into multiple bugs having to deal with whether typescript was precompiling the same way that the babel version was (some include: jest testing, repl loading, mjs support) I realized that the big issue is that razzle had figured out solutions for each env based on webpack, so instead of having the added complexity of not knowing if I had proper typescript parody, I figured just remove that layer and use typescript for the one thing I wanted: type checking. Happy to go into detail on those bugs, but I think the main point is this approach seems a better DX experiance out of the box, while offering more heavy solutions as comments. * Update razzle.config.js * Remove raf from examples (#601) * Remove raf from all examples * Add package-lock and yarn-lock to .gitignore in examples. * Change env stringify so it doesn't overwrite process.env (#611) * Razzle plugins + razzle-typescript-plugin (#605) * Add a plugin system * Add razzle-typescript-plugin * Change TypeScript example to use razzle-typescript-plugin * Small refactor to helpers * Add myself to contributors * Use fork-ts-checker-webpack-plugin instead of tslint-loader * Make useBabel false by default * Add esModuleInterop, remove console tslint rules * Improve README * Moved loaderFinder to razzle-dev-utils * Remove -- from circle.yml * Fix start test now that logger has changed * Fix shell output * Don't silence razzle build test * Teardown beforeAll * Remove 'use strict' from build fixtures
* v2 (#630) * Webpack v4 (#525) * (feat) Adds webpack v4, removes CommonsChunkPlugin and sets mode * (feat) Yarn locks * (feat) Removes NamedModulesPlugin and NoEmitOnErrorsPlugin * (feat) Upgrades eslint-loader and replaces setup for before (devServer) * (feat) Updates some loaders to work with webpack v4 * Add thread-loader, [email protected] Adds thread-loader and extract-text-webpack-plugin beta. * Remove automatic vendor bundling, add @todo * Remove lock * (fix) Fixes Inferno, JSXstyle, Reason, Typescript and WithVendor * Fix TS HMR * Bump to latest webpack * Update README.md * Move to Yarn Workspaces, fix tests * Remove unused scripts for bootstrap and clean * v2.0.0-alpha.1 * v2.0.0-alpha.2 * v2.0.0-alpha.3 * Drop extract-text for mini-css. Bump start-server (no more refreshes) * Update docs with new hot restart behavior * Make `rs` an h3 in docs * v2.0.0-alpha.4 * Update package descriptions * Bump mini-css-extract-plugin to 0.3.0 (#559) * Add Multistep true so webpack 4 HMR can work (#558) * Bump deps, fix TS example * v2.0.0-alpha.5 * Changed name of the about page component: Home -> About (#561) * chore(package): update lerna to version 2.9.1 (#560) * including polyfills in production build (#562) * Fix logic on polyfill inclusion * v2.0.0-alpha.6 * Fix boolean * v2.0.0-alpha.7 * s/your/you (#566) * Replace clientCompiler before serverCompiler (#569) * Update README.md (#564) Fixed links to Node Inspector docs * Add an example with Hyperapp (#549) * Setup Hyperapp example Enable HMR Don't touch the yarn lock Cleanup Keep naming convention Don't touch preact Reverse formatting on the preact example * Undo formatting something in the preact example Fix formatting Fix formatting Fix formatting Fix format * 2.0.0-alpha.7 * Bump hyperapp version * Add Koa usage example (#533) * Add Koa usage example * Extend Koa example documentation * Make app use default koa styles and logo * Correct Koa URL on doc * Add webpack bar (#563) * Remove yarn.lock from Koa example * Bump deps * v2.0.0-alpha.8 * add emitFile in url-loader options (#576) * Add elm-package post on circleci * Move elm install to dependencies.pre * Use npm to install elm globally * Install elm not elm-package. lol. * Bump deps * v2.0.0-y.0 * Update readme * v2.0.0-alpha.9 * Limiting HMR to App (#577) * #fix starting server code after compile assets (sync) (#575) * Use webpack-dev-server-speedy for perf boost! * v2.0.0-alpha.10 * Bump Webpack to 4.6.0 * v2.0.0-alpha.11 * Fix uglify options * v2.0.0-alpha.12 * Update ESLint (#588) * Upgrade typescript example (#589) * ♻️ Cleanup random keystrokes in Home component * ✨ Upgrade deps and TypeScript. Now supports the new fragment syntax<></> * 👨🏼🎨 Add myself to the contributers list * 📏 Prietier linting fixes * Update README.md * Update README.md * Better defaults for Typescript example (#593) * Better defaults for Typescript example After running into multiple bugs having to deal with whether typescript was precompiling the same way that the babel version was (some include: jest testing, repl loading, mjs support) I realized that the big issue is that razzle had figured out solutions for each env based on webpack, so instead of having the added complexity of not knowing if I had proper typescript parody, I figured just remove that layer and use typescript for the one thing I wanted: type checking. Happy to go into detail on those bugs, but I think the main point is this approach seems a better DX experiance out of the box, while offering more heavy solutions as comments. * Update razzle.config.js * Remove raf from examples (#601) * Remove raf from all examples * Add package-lock and yarn-lock to .gitignore in examples. * Change env stringify so it doesn't overwrite process.env (#611) * Razzle plugins + razzle-typescript-plugin (#605) * Add a plugin system * Add razzle-typescript-plugin * Change TypeScript example to use razzle-typescript-plugin * Small refactor to helpers * Add myself to contributors * Use fork-ts-checker-webpack-plugin instead of tslint-loader * Make useBabel false by default * Add esModuleInterop, remove console tslint rules * Improve README * Moved loaderFinder to razzle-dev-utils * Remove -- from circle.yml * Fix start test now that logger has changed * Fix shell output * Don't silence razzle build test * Teardown beforeAll * Remove 'use strict' from build fixtures * Update README for v2 * v2.0.0 * Fix #632. Pass webpack to config in build.js * v2.0.1 * 👨🏻💻 Include all contributors (#631) * Removing thread-loader (#634) * v2.0.2 * Include the crossorigin attribute link updated (#635) reason: It seems that the content is moved since to this new URL. * Adding server source map support (#516) * Bump deps * Boost perf of TS plugin during dev with suggested Outlook optimizations * v2.0.3 * Fix useBabel use option in razzzle-plugin-typescript (#639) * Add useEslint option to razzle-plugin-typescript (#640) Useful if you wish to use babel, without eslint * Update readme's * v2.0.4 * Upgrade razzle package - jest ^22.4.3 (#648) * Upgrade razzle package - jest ^22.4.3 * Revert version no change * Close #653. Use correct Snyk badges * Update babel-eslint to 8.x so that decorators will work using babel-plugin-transform-decorators-legacy. See: babel/babel-eslint#275 (#649) * Add carrot to babel-eslint * Remove consola (redundant) * v2.1.0 * Add WebpackConfigHelpers + Vue, Elm plugins (#655) * Add WebpackConfigHelpers + Vue, Elm plugins * Fix elm plugin * Add razzle-plugin-php * Add disclaimer about php plugin * More patches * fix elm plugin * Update elm * Add info about razzle-plugin-elm * Update docs * v2.1.1 * Fix package names * Fix 'server' typo (#658) * latest jest (#656) * Bump deps * Squat on more potential plugins * v2.2.0 * Bump babel-loader to remove incompatibility warning with Webpack 4. (#659) * Fix Elm example (#661) * preserve the full --inspect= flag as passed to yarn start (#660) * preserve the full --inspect= flag as passed to yarn start instead of treating it as a boolean * update --inspect docs & comments * added example razzle + react router 3 (#539) * added example razzle + react router 3 * Remove yarn.lock * Fix pkg.json * Add polka example (#520) * Add polka example Serves as a generic express middleware-compatible server example. (related to jaredpalmer/after.js#77) * Remove with-polka/setupTests.js * Remove yarn.lock * Adding testEnvironmentOptions to supportedKeys for Jest (#678) * fix koa hmr (#693) * Add pretty node errors (#691) * Ignore column from source map and only use pretty errors if file is read (#696) * Add documentation for CSS Modules (#694) * Erik Engi added to the contributors section (#700) * Update README.md * Introduce config.modifyBabelOptions (#702) I’ve found that the babel configuration is important to modify in my environment. Specifically in my env, I’d like to set `babelrc: false` so that the .babelrc file is ignored, and a custom babel configuration could be provided in the `razzle.config.js`. * add support for function as plugin (#704) * add mdx loader (#711) * Mdx improve (#712) * add peer dependency, ipdate install instruction * update readme * Fix .mjs issue with GraphQL 0.13.2 (#715) * Fix .mjs issue with GraphQL 0.13.2 graphql/graphql-js#1272 (comment) * Fix .mjs still referencing "require" aws-amplify/amplify-js#686 (comment) * remove package-lock.json * Make readme's match * v2.3.0 * Revert "v2.3.0" This reverts commit 361bb0c. * v2.4.0 * Fix production sourcemaps (#717) * Create stale.yml * Add loadable-components example (#598) * Update createJestConfig.js (#719) Add globals to the allowable jest config overrides * Use the correct port when PORT is not set (#723) * Add Now deployment example (#728) * Duplicated basic example * Renamed package name * Updated readme for Now * Added post Now build process hook * Tweaked README format and content * Add Heroku deployment example (#727) * Duplicated basic exmaple * Updated readme with Heroku instructions * Renamed package name * added Heroku post-build command in Procfile * Updated package.json: - added post pre-start hook to trigger build on Heroku - moved razzle to main deps for Heroku build process * Consistent reference to Heroku app name * Update README.md * Update package.json * Update README.md * Fix for '[HMR] You need to restart the application!' on server sided err * Mdx plugin improvements (#732) * resolving path to @mdx-js/tag, fix loader options * del peerDep, improve readme * add example * Change import to require * cleanup: remove .js extensions from require * React Loadable example: add css chunks (#746) * point people looking at CHANGELOG.md to the release notes page (#747) * Update css chunks: use [name] instead of [id] (#750) * Fix HMR : client was not working + mismatch between server/client (#749) * remove mention of extract text plugin from react native web example (#752) * Update examples to recover from HMR error (#763) * add CLIENT_PUBLIC_PATH env var for local dev environments that don't use localhost (e.g. VMs, Docker) (#761) * Set template package version back to 0.1.0 (#760) * CLIENT_PUBLIC_PATH default was being set in two places that computed different values. Remove the erroneous one. (#779) * Correct example name in curl (#772) * Feature/scss plugin (#786) * add scss plugin and fixes to makeLoaderFinder * add readme for scss plugin * fix test regex for including .css * remove jest forceExit * add contributors * refactor tests * add plugin options * edit readme for better options knowledge * change node-sass to node-sass-chokidar * Use npx (#783)