Skip to content
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

Merged
merged 12 commits into from
Mar 21, 2018
Merged

Webpack v4 #525

merged 12 commits into from
Mar 21, 2018

Conversation

rafbcampos
Copy link

let config = {
    // Set webpack mode:
    mode: IS_DEV ? 'development' : 'production',
...
}

@jaredpalmer
Copy link
Owner

Looks legit. Let me try this out.

@jaredpalmer
Copy link
Owner

jaredpalmer commented Feb 28, 2018

I am not able to get this working. When I run yarn start on the basic example I get:

 ~/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.

@rafbcampos
Copy link
Author

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.

@rafbcampos
Copy link
Author

Of the 20 examples, 14 have passed.

The ones that broke:

  • Elm (still waiting for compatibility update): Webpack 4.0.0 Error elm-community/elm-webpack-loader#134

  • React loadable also has an open PR to migrate: Migrate to webpack@4 API jamiebuilds/react-loadable#110

  • The with-vendor-bundle example of splitChunks does not return the same way and I didn't find enough documentation to replicate the example.

  • Inferno and Rax have a problem with es-lint, maybe / * eslint-disable react-in-jsx-scope * / solve it.

  • In the jsxstyle example I got Error: Can not find module 'jsxstyle / lib / styleCache', I did not find the webpack loader for it, so I'm not sure if the error was brought by the update. I didn't find this module in the project's node_modules.

@jaredpalmer
Copy link
Owner

We'll have to wait on react-loadable and figure out vendor bundle

@jaredpalmer
Copy link
Owner

jaredpalmer commented Mar 2, 2018

We are also blocked because of webpack-contrib/extract-text-webpack-plugin#731 on the vendor bundle:

$ yarn build
yarn run v1.3.2
$ razzle build
Creating an optimized production build...
Compiling client...
/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/webpack/lib/Chunk.js:460
                throw new Error(
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/webpack/lib/Chunk.js:460:9)
    at /Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/webpack/lib/Compilation.js:881:27)
    at hooks.make.callAsync.err (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/webpack/lib/Compiler.js:464:17)
    at _done (eval at create (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
    at _err1 (eval at create (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:32:22)
    at _addModuleChain (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/webpack/lib/Compilation.js:749:12)
    at processModuleDependencies.err (/Users/jared/workspace/github/jaredpalmer/razzle-next/packages/razzle/node_modules/webpack/lib/Compilation.js:688:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.```

@rafbcampos
Copy link
Author

rafbcampos commented Mar 5, 2018

Ok. I'll wait for loader updates to try again.

Adds thread-loader and extract-text-webpack-plugin beta.
@jaredpalmer
Copy link
Owner

@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.

@jaredpalmer jaredpalmer requested review from jariz and jaredpalmer and removed request for jariz March 6, 2018 17:59
@rafbcampos
Copy link
Author

rafbcampos commented Mar 7, 2018

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>

@rafbcampos
Copy link
Author

rafbcampos commented Mar 21, 2018

@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.

@jaredpalmer
Copy link
Owner

JS is not loading with vendor bundle example on the client.

@jaredpalmer jaredpalmer changed the base branch from master to next March 21, 2018 18:50
@jaredpalmer jaredpalmer merged commit b5f809f into jaredpalmer:next Mar 21, 2018
@rafbcampos rafbcampos mentioned this pull request Mar 24, 2018
worudso pushed a commit to ownerclan/razzle that referenced this pull request May 2, 2018
* (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
jaredpalmer added a commit that referenced this pull request May 30, 2018
* 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
jaredpalmer pushed a commit that referenced this pull request Oct 30, 2018
* 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants