Building project failed when `extract` set to `false`

[chenxsan]

I would love to disable extract in one of my project, but got this error when I run yarn build:

yarn build
yarn run v1.3.2
$ neutrino build
✖ Building project failed
./src/test.css
Module build failed: ModuleBuildError: Module build failed: Unknown word (5:1)

Here's my code:

import '../../test.css'

And my .neutrinorc.js:

module.exports = {
  use: [
    ['@neutrinojs/react-components', {
      manifest: {}
    }],
    ['@neutrinojs/style-loader', {
      loaders: [
        'postcss-loader'
      ],
      extract: false
    }]
  ]
};

Also I just setup a git repo here.

[eliperelman]

To debug, here is a diff of the --inspect when running with extract as default vs. extract: false:

diff --git a/a.diff b/b.diff
index 99e32af..cb39e1e 100644
--- a/a.diff
+++ b/b.diff
@@ -126,7 +126,13 @@ $ neutrino build --inspect
             loader: '/Users/eli/code/neutrino-dev/node_modules/style-loader/index.js'
           },
           {
-            loader: '/Users/eli/code/neutrino-dev/node_modules/css-hot-loader/index.js'
+            loader: '/Users/eli/code/neutrino-dev/node_modules/css-loader/index.js',
+            options: {
+              importLoaders: 0
+            }
+          },
+          {
+            loader: '/Users/eli/code/neutrino-dev/node_modules/style-loader/index.js'
           },
           {
             loader: '/Users/eli/code/neutrino-dev/node_modules/css-loader/index.js',
@@ -156,7 +162,14 @@ $ neutrino build --inspect
             loader: '/Users/eli/code/neutrino-dev/node_modules/style-loader/index.js'
           },
           {
-            loader: '/Users/eli/code/neutrino-dev/node_modules/css-hot-loader/index.js'
+            loader: '/Users/eli/code/neutrino-dev/node_modules/css-loader/index.js',
+            options: {
+              importLoaders: 0,
+              modules: true
+            }
+          },
+          {
+            loader: '/Users/eli/code/neutrino-dev/node_modules/style-loader/index.js'
           },
           {
             loader: '/Users/eli/code/neutrino-dev/node_modules/css-loader/index.js',
@@ -611,4 +624,4 @@ $ neutrino build --inspect
   },
   target: 'web'
 }
-Done in 1.75s.
+Done in 1.78s.

[eliperelman]

A couple things I notice:

1. CSS hot only works when extract is enabled. Not sure this is correct.
2. Style loader comes after css loader. From what I recall this was the other way around.

[eliperelman]

Ah, found the issue!

When we make a first pass at loading the style middleware through the react-components middleware, all the extract options are true, so the associated plugins for extraction are enabled. When you add the style-loader middleware again, all the original plugins for style loading are overridden, but the extraction ones are not, because they are skipped!

The easiest solution here would then be to change the style options in the original react-components middleware, and not add another instance of style-loader:

module.exports = {
  use: [
    ['@neutrinojs/react-components', {
      manifest: {},
      style: {
        loaders: [
          'postcss-loader'
        ],
        extract: false
      }
    }],
  ]
};

@chenxsan Give that a shot!

[eliperelman]

Closing with the previous comment as the solution. Please feel free to re-open if the solution does not work as intended. Thanks!