Neutrino 9 beta/release candidate feedback

[edmorley]

Hi!

We've just published a beta release of Neutrino 9 and are keen to have people trying it out/giving feedback. Notable changes:

• now using webpack 4, Babel 7, ESLint 6, and latest versions of test runners.
• significant performance improvements (see here).
• switched from using webpack/ESLint/test runner's APIs to using their native CLIs - which fixes a number of bugs, and means that the full set of CLI features are available for each, not just what we've emulated via the API.
• the neutrino --inspect feature now produces a fully-working webpack config, for easier debugging.

Full changelogs:

• v8.3.0 -> v9.0.0-beta.0
• v9.0.0-beta.0 -> v9.0.0-beta.1
• v9.0.0-beta.1 -> v9.0.0-rc.0
• v9.0.0-rc.0 -> v9.0.0-rc.1
• v9.0.0-rc.1 -> v9.0.0-rc.2
• v9.0.0-rc.2 -> v9.0.0-rc.3
• v9.0.0-rc.3 -> v9.0.0-rc.4
• v9.0.0-rc.4 -> v9.0.0-rc.5
• v9.0.0-rc.5 -> v9.0.0

The docs for the new version can be found here: ~https://master.neutrinojs.org~ https://neutrinojs.org/

Note that during the beta phase, you'll need to explicitly install the @next version of any Neutrino monorepo packages when following the docs, otherwise you will install the latest stable (v8.3.0) packages instead.

For example, to use v9's create-project, run:

# NPM
npx @neutrinojs/create-project@next <directory-name>

# Yarn
# (There's a bug with `yarn create` and using a version number, so we run the commands
#  manually. Make sure the directory returned by `yarn global bin` is on `PATH` first.)
yarn global add @neutrinojs/create-project@next
create-project <directory-name>

Or to upgrade an existing project, modify the neutrino and @neutrinojs/* entries in your package.json to use version ~^9.0.0-rc.5~ ^9.0.0 and then see: ~https://master.neutrinojs.org/migration-guide/~ https://neutrinojs.org/migration-guide/

If you find any bugs (including things in the migration guide/docs that aren't clear enough) please comment here or file issues, so we can sort out any rough edges :-)

Many thanks!

[edmorley]

To give an example for the performance improvements - I created a project using Neutrino's create-project with both Neutrino 8 and Neutrino 9, that used @neutrinojs/airbnb + @neutrino/react + @neutrino/jest and timed various workflows:

Command	Neutrino 8	Neutrino 9 beta
yarn build	Cold: 12.8s Warm: 12.4s	Cold: 7.0s Warm: 4.2s
yarn start	Cold: 8.0s Warm: 7.4s	Cold: 6.2s Warm: 5.4s
yarn test	Cold: 4.8s Warm: 4.4s	Cold: 3.8s Warm: 3.0s
yarn lint	Cold: 5.3s Warm: 5.3s	Cold: 2.5s Warm: 2.0s

(yarn start was timed by forcing a process.exit() after the "compilation complete" message)

The speedup is even greater on projects that are larger than the create-project "hello world" (for some projects I've seen 5-10x warm build time improvements!).

Please do let us know how much of a difference upgrading makes! :-)

[Shyiy]

After upgrading to 9 beta from 8 and doing various minor adjustments following the migration guide, everything seems to work nicely by me except one thing.

I was using the webpack-pwa-manifest plugin to generate and inject a PWA manifest in the html. I verified that the plugin is supposed to be updated for Webpack v4.

I add the plugin to the end of the use config option in .neutrinorc.js on production with the following entry:

neutrino =>
    neutrino.config.plugin("webpack-pwa-manifest").use(require.resolve("webpack-pwa-manifest"), [
      {
        name: "appTitle",
        short_name: "appShortName",
        description: "appDescription",
        [... rest of the plugin config]
      }
    ])

The plugin is correctly picked up and executed, generating all its files and manifest in the build folder, it however fails to inject its contents in the index.html file. I've investigated a bit and by running neutrino --inspect --mode production it looks like the PWA manifest plugin is correctly loaded after the needed html-webpack-plugin plugin. When adding some debugging statements to the PWA manifest plugin it seems however that the necessary webpack compilation hook that is supposed to be provided by html-webpack-plugin, htmlWebpackPluginBeforeHtmlProcessing, is not present. Actually none of the hooks advertised in the HtmlWebpackPlugin docs seem to be present.

Is this a possible bug introduced by the current neutrino v9 beta? Note that the same config/code worked correctly before.

[edmorley]

Hi! Thank you for trying out the beta.

For Neutrino 9, we've updated html-webpack-plugin to 4.x since 3.x has issues with webpack 4 (particularly when using multiple entrypoints): https://github.com/neutrinojs/neutrino/blob/7e5e3abb0bed6fca5f87679ff0a0ec0d276581d1/packages/html-template/package.json#L26

The 4.x release of html-webpack-plugin adjusted the hook names, so plugins that use them will need to be updated. The reason those new hook names don't appear in the html-webpack-plugin readme, is that the new changes haven't yet been merged to master, and are currently only on the webpack-4 branch / PR: https://github.com/jantimon/html-webpack-plugin/tree/webpack-4 https://github.com/jantimon/html-webpack-plugin/pull/953

Perhaps it might be worth filing an issue over at https://github.com/arthurbergmz/webpack-pwa-manifest to see if they can add support even before the final html-webpack-plugin@4.0.0 release? :-)

[Shyiy]

You're absolutely right, thanks for the in depth answer, I got confused by the master/beta README of the newly used plugin.

Nothing left for me to nag about then, it all works nicely :)

Only a small typo that I noticed in the migration guide:

The minimum supported Node.js version is 8.10. Node.js 9 is no longer supported #792. (should be 6)

[mattmcdonald-uk]

I'm struggling to get styles working in a development build.

In production everything works as expected after following the migration guide, but for development builds I'm getting errors for standard CSS (even the simplest CSS file generates this error):

ModuleParseError: Module parse failed: Unexpected character
You may need an appropriate loader to handle this file type.

I believe this may be due to css-extract-text-plugin being used for development?

I've not added any extra config options for style-loader, it's just included at 9.0.0-beta.0.

[edmorley]

@mattmcdonald-uk hi! Does the output from yarn neutrino --inspect --mode development shed any light? (If upgrading from Neutrino 8.3.0, I'd also compare it with the output from running yarn neutrino start --inspect-new before the upgrade).

@Shyiy - great! Thank you for trying it out and the feedback. Re the docs Node.js version, that part is definitely unclear, it should probably say "Node.js 6 and 9 are no longer supported".

[mattmcdonald-uk]

@edmorley If I turn extract off it works fine, with extract on it doesn't.

The different this makes to the development config output is removing this:

 /* neutrino.config.module.rule('style').use('extract') */
{
    loader: '/app/node_modules/mini-css-extract-plugin/dist/loader.js'
},

[edmorley]

Ah so extract isn't supposed to be enabled in development builds. What is the mode set to in the inspect output? Is --mode development being passed to webpack-dev-server? (or to webpack, if not using the dev server)

[mattmcdonald-uk]

It's being started with webpack-dev-server --mode development

[edmorley]

Ah - are you setting custom extract options?

Currently the web preset disables extract when not in production, here: https://github.com/neutrinojs/neutrino/blob/7e5e3abb0bed6fca5f87679ff0a0ec0d276581d1/packages/web/index.js#L32

~However by passing custom options, that will be overwritten, and extract always enabled:~ https://github.com/neutrinojs/neutrino/blob/7e5e3abb0bed6fca5f87679ff0a0ec0d276581d1/packages/style-loader/index.js#L21-L27 https://github.com/neutrinojs/neutrino/blob/7e5e3abb0bed6fca5f87679ff0a0ec0d276581d1/packages/style-loader/index.js#L53

~I believe the current implementation is so that users can force extraction to be enabled always (and not only in production) if desired. However that results in counter-intuitive behaviour in this case (since it means users have to remember to only pass the custom extract options when mode is production).~

Edit 2: Actually I missed that we handle this here: https://github.com/neutrinojs/neutrino/blob/7e5e3abb0bed6fca5f87679ff0a0ec0d276581d1/packages/web/index.js#L95-L97

I think we should either:

1. Move the production conditional from the web preset into @neutrinojs/style-loader instead, so consumers of the web preset don't have to remember to conditionally pass any extract options. (But now they can't force it to be enabled in development)
2. Separate out the extraction on/off from the options. eg add an enabled key under extract or similar.

@mattmcdonald-uk @eliperelman, thoughts?

Edit: I personally think (1) might be fine, since mini-css-extract-plugin doesn't yet support HMR, so isn't really suitable for development anyway.

[mattmcdonald-uk]

@edmorley With my original issue I hadn't set the extract option, I just discovered it as a workaround for my problem.

From what I can see, currently extract is being used in development mode if left unset in your config.

[edmorley]

I've verified locally that this doesn't happen when using the web preset - are you using @neutrinojs/style-loader directly? Could you paste your .neutrinorc.js? (I really should have asked for this at the start hehe)

[mattmcdonald-uk]

Sure, this is what I'm using:

const Dotenv = require('dotenv-webpack')

module.exports = {
    use: [
        [
            '@neutrinojs/react', {
                html: {
                    title: 'Project',
                },
                devServer: {
                    port: 8080,
                },
                publicPath: '/',
            },
        ],
        '@neutrinojs/style-loader',
        (neutrino, envs = []) => {
            neutrino.config.plugin('dotenv').use(Dotenv, envs)
        },
    ],
}

[edmorley]

Ah right that explains it :-) The @neutrinojs/react preset includes @neutrinojs/style-loader already, so @neutrinojs/style-loader should not be added alongside it. Perhaps we need to make that clearer in the docs, or add a check inside @neutrinojs/style-loader to make sure it's not being included twice?

[mattmcdonald-uk]

Ah. That would explain it!

So how would I configure style-loader? I'd gone back to a basic config to try and get it working, but want to be able to use sass-loader too. This was is what I would want to achieve:

'@neutrinojs/style-loader', {
                test: /\.(css|sass|scss)$/,
                loaders: [{
                    loader: 'sass-loader',
                    useId: 'sass',
                }],
            },

[edmorley]

The @neutrinojs/react preset has a style option, that controls what's passed to @neutrinojs/style-loader: https://master.neutrinojs.org/packages/web/#preset-options https://github.com/neutrinojs/neutrino/blob/7e5e3abb0bed6fca5f87679ff0a0ec0d276581d1/packages/web/index.js#L30-L33 https://github.com/neutrinojs/neutrino/blob/7e5e3abb0bed6fca5f87679ff0a0ec0d276581d1/packages/web/index.js#L176

This isn't the first time that those options have been hard for people to find -- so we should probably come up with a way to adjust the existing docs mention to make it clearer. Any ideas? :-)

[mattmcdonald-uk]

Great, everything's working now. Thanks for helping me sort that (and for releasing v9 - hot loading is working properly for me again! 🎉)

I initially took a guess that the key might be styleLoader or 'style-loader', I don't know if there's any benefit to making the key more directly related to the name of the thing you're configuring?

Other than that I think a mention that the style-loader middleware is already included with the react (and any other) preset in the docs, along with a note on the key to use would be handy. Probably a note on the key to use in the react section would be helpful too.

An additional CLI warning that you shouldn't include style-loader directly when you're using the react preset would probably be useful too if you had missed the warnings within the docs.

[ratson]

@edmorley I see "re-license at MIT" was removed from https://github.com/neutrinojs/neutrino/issues/693 title, and the beta release is still MPL-2.0. Is that not going to happen for v9 release? If webpack-chain would follow the same?

[edmorley]

@mattmcdonald-uk, glad it's working now! I'll have a think about what changes I can make.

@ratson, yeah I discussed with Eli on IRC and said that (a) the two changes were unrelated (and both significant) so shouldn't be bundled into the same PR, (b) we needed to figure out what permissions we did/didn't need from previous contributors before we relicence. Is lack of MIT licence blocking your usage of Neutrino?

[ratson]

Not currently, just wondering if releasing with a more permissive license is still on the plan.

[edmorley]

Here are two PRs for projects upgrading from Neutrino 8 to 9:

• mozilla-frontend-infra/firefox-health-dashboard#158
• mozilla-frontend-infra/js-perf-dashboard#86

Some of the issues encountered for which we could improve the UX:

• usages of the html.links option had to be replaced (but was silently ignored, meaning it was missed during the first pass of the migration)
• the ./static/ directory was no longer copied since we removed that feature (we do mention this in the release notes, but ~perhaps we can do a directory exists check combined with seeing if they've added @neutrinojs/copy and if not, warn?~ Edit: I don't think we should do this, given that we can't guarantee that a ./static/ directory isn't being used eg for images imported in JS)
• at one point in the PR iterations, --optimize-minimize was being passed to webpack rather than --mode (something else wasn't working, so various permutations of settings were being tried). There's not much we can/should do about this IMO, but I've filed webpack/webpack-cli#624 for making it show a deprecation warning.
• not specific to the migration, but both the @neutrinojs/react and @neutrinojs/web presets were being used simultaneously, causing confusion due to the web preset clobbering the settings from the react preset. Perhaps we should have the top-level presets error out in this case?
• there were lots of stale dependencies in the yarn lockfiles - we should perhaps emphasise the need to regenerate the lockfile

[edmorley]

The following have been addressed in #1160.

Only a small typo that I noticed in the migration guide:

The minimum supported Node.js version is 8.10. Node.js 9 is no longer supported #792. (should be 6)

• usages of the html.links option had to be replaced (but was silently ignored, meaning it was missed during the first pass of the migration)
• there were lots of stale dependencies in the yarn lockfiles - we should perhaps emphasise the need to regenerate the lockfile

I'll open a separate PR for adding checks to prevent presets from being used in a way that clobbers each other (eg @neutrinojs/style-loader or @neutrinojs/web being used after @neutrinojs/react), since it's not migration-specific.

If anyone can think of any other improvements that can be made either to the migration docs or to the runtime checks, please do say! :-)

[edmorley]

A new beta has just been published, v9.0.0-beta.1. The changes since beta.0 are: https://github.com/neutrinojs/neutrino/compare/d48eb35...1c082ac

Docs at: https://master.neutrinojs.org/

Please try updating to it and let us know if any issues :-)

[armenzg]

I've upgraded: https://github.com/mozilla-frontend-infra/firefox-health-dashboard/pull/194

After upgrading when I run the tests I got the following message [1]. Thanks for the checks! I would have never noticed and remove the links section.

[1]

yarn run v1.10.1
$ jest

An error occurred when loading the Neutrino configuration.

ConfigurationError: The default Neutrino HTML template no longer supports the "links" option. To set a favicon use the "favicon" option instead. For stylesheets either import the equivalent npm package from JS, or if using a CDN is preferred, then copy the default HTML template into your repository (where it can be customised as desired) and set the "template" option to its path.
    at module.exports (/Users/armenzg/repos/health/frontend/node_modules/@neutrinojs/html-template/index.js:6:11)
    at Neutrino.use (/Users/armenzg/repos/health/frontend/node_modules/neutrino/Neutrino.js:211:7)
    at Object.entries.forEach (/Users/armenzg/repos/health/frontend/node_modules/@neutrinojs/web/index.js:162:18)
    at Array.forEach (<anonymous>)
    at module.exports (/Users/armenzg/repos/health/frontend/node_modules/@neutrinojs/web/index.js:157:6)
    at Neutrino.use (/Users/armenzg/repos/health/frontend/node_modules/neutrino/Neutrino.js:211:7)
    at module.exports (/Users/armenzg/repos/health/frontend/node_modules/@neutrinojs/react/index.js:43:12)
    at Neutrino.use (/Users/armenzg/repos/health/frontend/node_modules/neutrino/Neutrino.js:211:7)
    at Neutrino.use (/Users/armenzg/repos/health/frontend/node_modules/neutrino/Neutrino.js:216:12)
    at Neutrino.use (/Users/armenzg/repos/health/frontend/node_modules/neutrino/Neutrino.js:220:12)
error Command failed with exit code 1.

[edmorley]

There's a bug with yarn create and using a version number

https://github.com/yarnpkg/yarn/issues/6587

[edmorley]

@eliperelman thank you for the recent reviews :-)

I don't suppose you could publish a new pre-release? Perhaps as 9.0.0-rc.0 (with tag next)? (Since the last of the significant breaking changes have landed)

Changes since 9.0.0-beta.1 are: https://github.com/neutrinojs/neutrino/compare/1c082ac...e9c21b8

[edmorley]

v9.0.0-rc.0 has now been released - please could everyone give it a go? :-)

Changelog: v9.0.0-beta.1 -> v9.0.0-rc.0

[yordis]

I am not sure it this preset it helpful to add it to your list

const PnpWebpackPlugin = require('pnp-webpack-plugin');

module.exports = (neutrino, opts = {}) => {
  // Adds support for installing with Plug'n'Play, leading to faster installs and adding
  // guards against forgotten dependencies and such.
  neutrino.config.resolve
    .plugin('pnp')
    .use(PnpWebpackPlugin)
    .end()
    .end()
    // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
    // from the current package.
    .resolveLoader.plugin('pnp')
    .use(PnpWebpackPlugin.moduleLoader(module));
};

[yordis]

@edmorley before officially release Neutrino 9, since introduce breaking changes. I want to share some thoughts with you.

Since use ends up on this https://github.com/neutrinojs/neutrino/blob/a19034e454698a933bc8fb91a2eb44e454691e58/packages/neutrino/Neutrino.js#L211

Do you think that this is an indirection https://github.com/neutrinojs/neutrino/blob/a19034e454698a933bc8fb91a2eb44e454691e58/packages/neutrino/Neutrino.js#L212-L241 from the API perspective?

One detail about middlewares/presets, they take the options as a second parameter, options that most likely you pass it when you add the middleware to your configuration but since you add extra complexity you need to make the middleware/preset (I will use middleware from now on).

Maybe if changing the shape of the middleware to

type Middleware = (neutrino: Neutrino)=> void

For example

const styleMiddleware = (neutrino)=> {
  // do something with the instance
}

This would make the middleware easy to understand and when it comes to the usage of the middleware is easier to reason what is going on.

neutrino.use(styleMiddleware);

From this example, the options went await and that is because you can always create a closure for your config.

const styleMiddleware = (opts = {})=> (neutrino)=> {
  // do something with the opts
}

So the initialization is

neutrino.use(styleMiddleware({
  // options
})

Since .neutrinorc.js is a JavaScript file things like sharing configs between middlewares https://github.com/neutrinojs/neutrino/blob/a19034e454698a933bc8fb91a2eb44e454691e58/packages/neutrino/Neutrino.js#L231 it is a matter of simply create variables that hold the config.

I am not sure if I even want people to pass strings because you load the middleware over here https://github.com/neutrinojs/neutrino/blob/a19034e454698a933bc8fb91a2eb44e454691e58/packages/neutrino/Neutrino.js#L216

People can't find where the dependencies are being used and we can't even get type check without doing hacking things like here https://github.com/straw-hat-team/neutrino/blob/6da2e3c62947a25d94b2ce6e6ed4e0a5f436c401/src/index.ts#L61 where I have to cast my configs because of the extra indirection added in the function. DevTools that keep track of your dependencies and rely on static analysis can't figure out who is using your deps without being aware of how Neutrino works.

What do you think about it?

This is all based on my personal experiences and to be honest I see more downsides (especially that I had battles with people explaining how simple Neutrino itself is) by adding complixity on something that is simply so I want to hear your thoughts about it before you publish Neutrino 9 since you will introduce breaking changes anyway; and in term of fixing the current presets, I am more than happy to support you with the required changes.

[edmorley]

Re the last comment - PR #1246 is now open for that and discussions happening over there :-)

Re the comment before about Yarn plug and play - yeah I'd like to add support, though I've had several issues that blocked usage on Windows in particular: yarnpkg/yarn#6493 yarnpkg/yarn#6683

In addition, we'd need to request that several of Neutrino's packages get added to the whitelist (like react-scripts was for CRA) due to limitations in ESLint, otherwise linting won't work regardless. It's unknown whether yarn will accept such changes.

Edit: Filed #1277.

[edmorley]

v9.0.0-rc.0 has now been released - please could everyone give it a go? :-)

Last call for people to try it out/file bugs!

[edmorley]

We really need to get this release out as soon as possible (ideally in the next few days since I'm away after). There are issues that people are hitting with Neutrino 8 (eg #1259, #1249 and #1066) that have been fixed for some time in Neutrino 9. It would be a shame to lose a bunch of potential users due to a poor first-run experience from using the older version.

@eliperelman do you know when you might be able to update #1246 to be non-breaking? We can always punt on the migrate tool improvements initially, to save time (we can add it before removing support for the old form in eg Neutrino 10).

[Oblium]

Using npx has given me an error

Instead, using yarn it has worked smoothly. For system information refer to issue #1259

[timkelty]

@edmorley @eliperelman https://github.com/neutrinojs/neutrino/issues/1243 is something that is broken between v8 and v9. It seems like it should be a pretty simple fix, but I need some help/feedback to get a PR submitted.

[amorriscode]

I was trying to use the Components option of v9 and noticed that it failed when doing a one time lint.

⏳  Performing one-time lint
✖ Error: The command "yarn lint --fix" exited unsuccessfully. Try again with the --debug flag for more detailed information about the failure.
    at Project._spawnSync (/Users/amorris2/.npm/_npx/27915/lib/node_modules/@neutrinojs/create-project/commands/init/index.js:41:9)
    at Project.install (/Users/amorris2/.npm/_npx/27915/lib/node_modules/@neutrinojs/create-project/commands/init/index.js:247:12)
    at Object.<anonymous> (/Users/amorris2/.npm/_npx/27915/lib/node_modules/@neutrinojs/create-project/node_modules/yeoman-generator/lib/index.js:424:27)
    at /Users/amorris2/.npm/_npx/27915/lib/node_modules/@neutrinojs/create-project/node_modules/run-async/index.js:25:25
    at new Promise (<anonymous>)
    at /Users/amorris2/.npm/_npx/27915/lib/node_modules/@neutrinojs/create-project/node_modules/run-async/index.js:24:19
    at self.env.runLoop.add.completed (/Users/amorris2/.npm/_npx/27915/lib/node_modules/@neutrinojs/create-project/node_modules/yeoman-generator/lib/index.js:425:13)
    at runCallback (timers.js:810:20)
    at tryOnImmediate (timers.js:768:5)
    at processImmediate [as _immediateCallback] (timers.js:745:5)

It worked fine when selecting A web or Node.js application.

[edmorley]

Using npx has given me an error

@Oblium, hi! Thank you for reporting that error. It seems that it might be related to a broken npm/npx install - eg: https://github.com/jxnblk/ram/issues/8

...could you try uninstalling/reinstalling latest npm?

[edmorley]

@amorriscode, I believe this might be #1261 which is fixed on master but not yet in a new Neutrino 9 pre-release. Until one is released a workaround is to use Yarn instead.

[amorriscode]

@edmorley I'm sure I'm doing something wrong but I have the same issue with yarn. This is how I went about doing it: ~ yarn global add @neutrinojs/create-project@next ~ create-project test-yarn-next

Here is the error:

⏳  Performing one-time lint
✖ Error: The command "yarn lint --fix" exited unsuccessfully. Try again with the --debug flag for more detailed information about the failure.
    at Project._spawnSync (/Users/amorris2/.config/yarn/global/node_modules/@neutrinojs/create-project/commands/init/index.js:41:9)
    at Project.install (/Users/amorris2/.config/yarn/global/node_modules/@neutrinojs/create-project/commands/init/index.js:247:12)
    at Object.<anonymous> (/Users/amorris2/.config/yarn/global/node_modules/yeoman-generator/lib/index.js:424:27)
    at /Users/amorris2/.config/yarn/global/node_modules/run-async/index.js:25:25
    at new Promise (<anonymous>)
    at /Users/amorris2/.config/yarn/global/node_modules/run-async/index.js:24:19
    at self.env.runLoop.add.completed (/Users/amorris2/.config/yarn/global/node_modules/yeoman-generator/lib/index.js:425:13)
    at runCallback (timers.js:810:20)
    at tryOnImmediate (timers.js:768:5)
    at processImmediate [as _immediateCallback] (timers.js:745:5)

[Oblium]

Using npx has given me an error

@Oblium, hi! Thank you for reporting that error. It seems that it might be related to a broken npm/npx install - eg: jxnblk/ram#8

...could you try uninstalling/reinstalling latest npm?

Hi! Updating node, npm and npx it works as expected 😎 Great work!

[edmorley]

@amorriscode oh sorry about. We have a few more fixes on master that will improve the log output in this case, which we hope to get released soon. I'll let you know when that happens.

[bingomanatee]

I am unclear how the react/web html template system is now. How do I add links etc., into my index.html file? I've seen references that html-template is not used anymore so... what is?

[timkelty]

@bingomanatee it uses https://github.com/jantimon/html-webpack-plugin. You can pass options via html in web/react/vue.

https://master.neutrinojs.org/packages/html-template/

[bingomanatee]

I am having a time with 9.

This is my configuration:

require('./loadEnv');

const eslint = require('../../.eslintrc.json');
/*
let localLint = process.env.eslint || {};

if (typeof localLint === 'string') {
  try {
    localLint = JSON.parse(localLint);
  } catch (err) {
    localLint = {};
  }
}
if (!localLint) localLint = {};
*/

module.exports = {
  options: {
    root: __dirname,
  },
  use: [
    ['@neutrinojs/airbnb',
      {
        rules: eslint.rules
      }],
    [
      '@neutrinojs/react',
      {
        html: {
          title: 'VoiceBase',
         /* links: [
            'https://fonts.googleapis.com/css?family=Montserrat|Open+Sans'
            , '/css/antd.css'
            , '/site-style.css'
          ]*/
        },
      /*  style: {
          loaders: [
            {
              loader: 'sass-loader',
              useId: 'sass'
            },
            {
              loader: 'css-loader',
              useId: 'css'
            },
          ],
          test: /\.(sass|scss|css)$/,
          modulesTest: /\.module.(sass|scss|css)$/,
        },*/
      }
    ],
    ['@neutrinojs/env',
      [
        'NODE_ENV',
        'API_URL',
        'AUTH0_CLIENT_ID',
        'AUTH0_DOMAIN',
        'AUTH0_CONNECTION',
        'SITE_DOMAIN',
        'BEARER_TOKEN',
        'X_API_KEY',
      ]
    ],
    ['@neutrinojs/copy', {
      patterns: [{
        from: '**/*',
        to: '',
        context: __dirname + '/src/static/'
      }, {
        from: '**/*.css',
        to: 'css',
        context: __dirname + '/src/css/'
      }]
    }],
    ['@neutrinojs/jest', {
      testRegex: 'src/.*(_test|_spec|\\.test|\\.spec)\\.(js|jsx|vue|ts|tsx|mjs)$',
      'setupFiles': ['raf/polyfill'],
    }],
  ]
};

here is my package.json:

{
  "name": "app-portal-next",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open",
    "test": "jest",
    "lint": "eslint --cache --format codeframe --ext mjs,jsx,js src test"
  },
  "dependencies": {
    "@voicebase/gatekeeper": "^1.0.4",
    "antd": "^3.10.3",
    "auth0-js": "^9.8.1",
    "axios": "^0.18.0",
    "bottlejs": "^1.7.1",
    "chroma-js": "^1.4.1",
    "debug": "^4.1.1",
    "dotenv": "^6.1.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "es6-promisify": "^6.0.1",
    "event-target-shim": "^3.0.2",
    "file-saver": "^2.0.0",
    "gulp": "^3.9.1",
    "javascript-state-machine": "^3.1.0",
    "lodash": "^4.17.11",
    "neutrino-middleware-less-loader": "^4.0.0",
    "neutrino-middleware-sass": "^0.0.1",
    "prop-types": "^15.6.2",
    "react": "^16.6.0",
    "react-app-rewire-less": "^2.1.3",
    "react-app-rewired": "^1.6.2",
    "react-dom": "^16.6.0",
    "react-hot-loader": "^4.3.11",
    "react-redux": "^5.1.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.1",
    "react-test-renderer": "^16.7.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-saga": "^0.16.2",
    "styled-components": "^4.0.3",
    "to-style": "^1.3.3",
    "voicebase-player-react": "0.0.5"
  },
  "devDependencies": {
    "@neutrinojs/airbnb": "^9.0.0-rc.0",
    "@neutrinojs/copy": "^9.0.0-rc.0",
    "@neutrinojs/env": "^8.3.0",
    "@neutrinojs/jest": "^9.0.0-rc.0",
    "@neutrinojs/react": "^9.0.0-rc.0",
    "class-propper": "^1.0.5",
    "eslint": "^5",
    "eslint-plugin-babel": "^5.2.1",
    "gulp-modify-file": "^1.0.1",
    "gulp-rename": "^1.4.0",
    "jest": "^23",
    "jest-mock-axios": "^2.1.11",
    "less": "^3.8.1",
    "minimist": "^1.2.0",
    "neutrino": "^9.0.0-rc.0",
    "neutrino-middleware-uglifyjs": "^2.0.2",
    "raf": "^3.4.1",
    "redux-devtools-extension": "^2.13.7",
    "webpack": "^4",
    "webpack-cli": "^3",
    "webpack-dev-server": "^3"
  }
}

note, neutrinojs/env doesn't appear to have a 9.0.0.rc-o analogue.

This is what I am getting during startup (yarn start);

davidedelhart$ yarn start
yarn run v1.12.3
$ webpack-dev-server --mode development --open
(node:61273) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
(node:61273) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
ℹ ｢wds｣: Project is running at http://localhost:5000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: TypeError: dep.getResourceIdentifier is not a function
    at addDependency (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/Compilation.js:690:30)
    at iterationOfArrayCallback (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/Compilation.js:194:3)
    at addDependenciesBlock (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/Compilation.js:712:5)
    at Compilation.processModuleDependencies (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/Compilation.js:723:4)
    at afterBuild (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/Compilation.js:855:15)
    at buildModule.err (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/Compilation.js:899:11)
    at callback (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/Compilation.js:628:5)
    at module.build.error (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/Compilation.js:676:12)
    at handleParseResult (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/NormalModule.js:456:12)
    at doBuild.err (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/NormalModule.js:478:6)
    at runLoaders (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/webpack/lib/NormalModule.js:342:12)
    at /Users/davidedelhart/repos/projects/app-portal-next/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at provider (/Users/davidedelhart/repos/projects/app-portal-next/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
/Users/davidedelhart/repos/projects/app-portal-next/node_modules/neo-async/async.js:14
    throw new Error('Callback was already called.');

[timkelty]

@bingomanatee @neutrinojs/env was removed in v9 and implemented directly in web presets, so try passing an env option to @neutrinojs/react with your array.

@edmorley Migration guide should probably point out that @neutrinojs/env was removed, yeah?

[eliperelman]

Migration guide should probably point out that @neutrinojs/env was removed, yeah?

It appears that this is already in the migration guide.

[iraSenthil]

Any idea of release date for V9? Thank you.

[Mihai-Ionut-Aurel]

Hi. I am having some issues upgrading from V8 to V9. I am not that experienced with front-end technologies so it might be that this issue is quite simple to fix. I can't seem to get Bebpack to resolve the node_modules folder in a proper way. Looking at the v8 and v9 generated config, the folders are missing. Am I missing a step in the migration guide? I am using an already made [template with React and Play Framework](https://github.com/setusoft/silhouette-play-react-seed which I am trying to update to the latest version. The configuration that the app uses can be found in the app-ui folder.. I added the webpack.config.js with the following contents:

const neutrino = require('neutrino');

config = neutrino().webpack();

module.exports = [
    // first build configuration
    config
    ];

And I updated the package.json to:

{
  "name": "silhouette-play-react-seed",
  "version": "4.0.0",
  "description": "Silhouette Play React Seed Template",
  "license": "MIT",
  "main": "index.js",
  "engines": {
    "node": ">=6.9.0",
    "npm": "^3.0.0"
  },
  "lingui": {
    "localeDir": "<rootDir>/src/locale",
    "srcPathDirs": [
      "<rootDir>/src"
    ]
  },
  "scripts": {
    "clean": "rimraf ../target/npm",
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production",
    "test": "karma start --single-run",
    "lint": "eslint --ext .js,.jsx src/ test/",
    "lint:fix": "npm run lint -- --fix",
    "flow": "flow check",
    "flow-typed:install": "flow-typed install",
    "flow-typed:update": "flow-typed install --overwrite",
    "messages:compile": "lingui compile",
    "messages:extract": "cross-env BABEL_ENV=i18n lingui extract",
    "inspect-configuration": "neutrino --inspect --mode production"
  },
  "dependencies": {
    "flux-standard-action": "^2.0.3",
    "history": "^4.7.2",
    "intl": "^1.2.5",
    "js-cookie": "^2.2.0",
    "@lingui/core": "^2.7.4",
    "@lingui/react": "^2.7.4",
    "loadable-components": "^2.2.2",
    "lodash": "^4.17.10",
    "normalize.css": "^8.0.0",
    "prop-types": "^15.6.0",
    "react": "^16.4.0",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-dom": "^16.4.0",
    "react-hot-loader": "^4.3.3",
    "react-icons": "^3.4.0",
    "react-redux": "^5.0.3",
    "react-redux-form": "^1.16.9",
    "react-router-dom": "^4.3.1",
    "react-s-alert": "^1.4.1",
    "redux": "^4.0.0",
    "redux-actions": "^2.4.0",
    "redux-auth-wrapper": "^2.0.3",
    "redux-saga": "^1.0.1",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "validator": "^10.11.0",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.3",
    "@babel/node": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@lingui/babel-preset-react": "^2.7.4",
    "@lingui/cli": "^2.7.4",
    "@neutrinojs/karma": "^9.0.0-rc.0",
    "@neutrinojs/react": "^9.0.0-rc.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-macros": "^2.5.0",
    "bootstrap-sass": "^3.3.7",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
    "chai-enzyme": "1.0.0-beta.1",
    "chai-shallow-deep-equal": "^1.4.6",
    "cheerio": "^1.0.0-rc.2",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "cssnano": "^4.1.10",
    "dirty-chai": "^2.0.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^5.14.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-import-resolver-webpack": "^0.11.0",
    "eslint-plugin-flowtype": "^3.4.2",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.0",
    "eslint-plugin-react": "^7.10.0",
    "fetch-mock": "^7.3.0",
    "flow-bin": "^0.93.0",
    "flow-typed": "^2.5.1",
    "karma": "^3.0.0",
    "karma-cli": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.7",
    "mocha": "^5.0.0",
    "neutrino": "^9.0.0-rc.0",
    "node-sass": "^4.9.1",
    "postcss-loader": "^3.0.0",
    "react-test-renderer": "^16.4.1",
    "redbox-react": "^1.6.0",
    "redux-saga-test-plan": "^3.7.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.0.3",
    "sinon": "^7.2.4",
    "sinon-chai": "^3.2.0",
    "style-loader": "^0.23.1",
    "v": "^0.3.0",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.0"
  }
}

And the .neutrinorc.js contents are:

const path = require('path');

module.exports = {
    use: [
        ['@neutrinojs/react', {
            devServer: {
                headers: {
                    "Access-Control-Allow-Origin": "*",
                }
            },
            babel: {
                presets: [
                    '@lingui/babel-preset-react',
                    '@babel/preset-react',
                    '@babel/preset-env',
                ],
            },
        }],
        (neutrino) => {
            if (process.env.NODE_ENV === 'production') {
                neutrino.config.plugin('manifest')
                    .use(require.resolve('webpack-manifest-plugin'));
            }
        },
        'neutrino-webpack.js',
        'neutrino-sass.js',
        (neutrino) => neutrino.config.node.set('Buffer', true),
    ],
    options: {
        output: path.resolve(__dirname, '../target/npm/dist/ui'),
    }
};

I tried to add to update the preset in the babel .babelrc too:

{
  "env": {
    "test": {
      "plugins": [
        ["istanbul", {
          "exclude": [
            "**/*.spec.js"
          ]
        }]
      ]
    },
    "i18n": {
      "plugins": [
        "transform-class-properties",
        "transform-es2015-classes",
        "transform-object-rest-spread",
        "syntax-dynamic-import"
      ],
      "presets": ["react", "@lingui/babel-preset-react","@babel/preset-react", "@babel/preset-env"]
    }
  }
}

But in the end, the config generated for V9 looks like:

 resolve: {
    alias: {
      'react-native': 'react-native-web'
    },
    extensions: [
      '.web.jsx',
      '.web.js',
      '.wasm',
      '.mjs',
      '.jsx',
      '.js',
      '.json'
    ],
    modules: [
      // Absolute path precedes this, but I removed it in this comment
      '\\app-ui\\src'
    ]
  },

While the one for V8 looks like:

resolve
....
modules: [
      'node_modules',
      `\\app-ui\\node_modules',
      '\\app-ui\\node_modules\\@neutrinojs\\web\\node_modules',
      '\\app-ui\\node_modules\\@neutrinojs\\react\\node_modules',
      '\\app-ui\\src'
    ]
 },
  resolveLoader: {
    modules: [
      '\\app-ui\\node_modules',
      '\\app-ui\\node_modules\\@neutrinojs\\web\\node_modules',
      '\\app-ui\\node_modules\\@neutrinojs\\react\\node_modules'
    ]
  },

Thank you for the help!

[davidje13]

I'm experimenting with migrating a fairly new codebase over to neutrino 9.

So far I haven't found any actual bugs, but the migration guide leaves a lot to be desired. It is not a pleasant experience. Here are some of the issues I have encountered so far:

• I have to add dependencies for eslint, jest, webpack, webpack-cli and webpack-dev-server to my package.json. I'm sure there would be others if I was using other neutrino plugins. This change isn't listed in the migration guide. Also I have to use jest 23, not 24 (which admittedly only just came out, but again, not documented)

  • sidenote: why are these now peer dependencies rather than pulled in automatically?

• The suggested scripts (start/test/lint/build) are a big help, but they seem to be only for frontend applications. I have a backend application (using @neutrinojs/node) and I have no idea what to write as a start script to get equivalent behaviour to what I had before. I found the magic command in the updated @neutrinojs/node readme for creating a new project. I suggest adding webpack --watch --mode development to the migration guide as another possible start script. Also I think the start script shouldn't contain --open, because the old behaviour did not do that.

• The automatic @neutrinojs/copy step being removed is fine, but the update guide just points to the PR for it, which doesn't show how to migrate! I've added a comment to that issue which contains what I think is the correct configuration to maintain behaviour, but I had to look at the changed files to figure that out! Remember that users aren't all familiar with every neutrino package and how to configure it.

• In @neutrinojs/react, support for html.headHtmlSnippet has disappeared (maybe? maybe renamed?). With html.links also vanishing, this leaves me with nowhere to put my apple-touch-icon or manifest links. What do I do now? And where do I put my meta overrides such as <meta name="apple-mobile-web-app-capable" content="yes">? It seems the way around this is to use a custom template file. I copied the built-in template and added modifications to suit; cp node_modules/\@neutrinojs/html-template/template.ejs src/resources/html-template.ejs, with template: 'src/resources/html-template.ejs'. The annoyance here is that this information is hidden 3 readmes deep (react -> web -> html-template).

• I can't get Jest working. I'm sure it's something I'm missing, but it won't run through webpack before running the tests, so it chokes on ES6 and JSX. After looking through somebody else's upgrade I found that I need to create jest.config.js:

  const neutrino = require('neutrino');
  module.exports = neutrino().jest();

  Only webpack and eslint are called out in the migration guide; it would be good to at least list the config filenames for all tools neutrino uses (e.g. "webpack -> webpack.config.js, eslint -> .eslintrc.js, jest -> jest.config.js, [...others]"), even if we're left to figure out the content ourselves.

All these can be fixed by delving into source code / running debugging with the old version / looking at other projects using neutrino. But the point of a migration guide is that I shouldn't have to do that.

As I say, no bugs that I've seen so far (unless something I've listed is actually a bug), but I don't think the migration guide is ready for prime time. There will be a lot of very confused and frustrated users.

[davidje13]

A non-documented breaking change for @neutrinojs/react:

module.exports = {
  options: {
    port: 1234,
  },
// [...]
}

Does not work any more. Instead it must be:

// [...]
    ['@neutrinojs/react', {
      devServer: {
        port: 1234,
      },
    }],
// [...]

Also a similar one for disabling hot reload (this is omitted in the migration guide and shows old incorrect information in the react readme): setting hot to false won't work any more. A way to disable hot reloading now is:

      devServer: {
        inline: false,
      },

(I suspect this also disables other features which I don't have much visibility of though)

[edmorley]

Sorry for the lack of replies recently - I'm mid changing jobs so pretty busy at the moment, however should have some more time from the middle of next week onwards :-)