Webpack v4

[rafbcampos]

• 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:

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

[jaredpalmer]

Looks legit. Let me try this out.

[jaredpalmer]

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]

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]

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]

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

[jaredpalmer]

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]

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

[jaredpalmer]

@alohawav I added extract-text-webpack@beta.0 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.

[rafbcampos]

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]

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

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