From 5682683895cc5f3ed04ab01b0995c857fe694523 Mon Sep 17 00:00:00 2001
From: Maxime Thirouin <m@moox.io>
Date: Tue, 23 Aug 2016 09:40:32 +0200
Subject: [PATCH] Fixed: ``SyntaxError: Unexpected token`` when importing CSS
 from ``node_modules``

Previously, ``node_modules/*`` where skipped in webpack static build,
  to improve performance (via webpack ``externals`` option).
  The problem is that is going to cause some issue for most people that
will
  require stuff from ``node_modules`` like CSS, SVG or other non-JS
files.

Closes #639
Ref #649
---
 CHANGELOG.md                       | 11 +++++++++++
 src/builder/webpack/config.node.js | 14 ++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f05e3da3..3b4541ed8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,13 @@
   from react-router-scroll (as we only use this).
   ``react-router-scroll@0.3.1`` was exporting a default value, ``0.3.2`` is not.
   ([#627](https://github.com/MoOx/phenomic/issues/652) - @MoOx)
+- Fixed: ``SyntaxError: Unexpected token`` when importing CSS from
+  ``node_modules``.
+  Previously, ``node_modules/*`` where skipped in webpack static build,
+  to improve performance (via webpack ``externals`` option).
+  The problem is that is going to cause some issue for most people that will
+  require stuff from ``node_modules`` like CSS, SVG or other non-JS files.
+  ([#639](https://github.com/MoOx/phenomic/issues/639) - @MoOx)
 - Added: better webpack build notifications.
   We replaced
   [`webpack-error-notifications`](https://github.com/vsolovyov/webpack-error-notification)
@@ -50,9 +57,11 @@ you can filter projects by tags.
 - Changed: default markdown renderer updated to
   ``remark-autolink-headings@^4.0.0``.
   This might fix issue with missing links for headings.
+  (@MoOx)
 - Changed: default markdown renderer updated to
   ``remark-highlight.js@^4.0.0``
   This might fix issue with broken highlighted code.
+  (@MoOx)
 - Changed: ``phenomic/lib/content-loader`` reference is deprecated in favor of
   ``import { phenomicLoader } from "phenomic"``.
   You can use ``phenomicLoader`` variable in webpack configuration to reference
@@ -61,6 +70,7 @@ you can filter projects by tags.
   (@MoOx)
 - Changed: loader will now read loader configuration directly from ``phenomic``
   section, not in `phenomic.loader` or `phenomic.contentLoader`
+  (@MoOx)
 - Removed: `renderer` option from `content-loader` (now `phenomicLoader`).
   See the new `plugins` option below for more information.
   If you want to do the same effect, you can use the following plugins
@@ -93,6 +103,7 @@ you can filter projects by tags.
       ]
     }
   ```
+  (@MoOx)
 - Removed: `raw` and `rawBody` properties from page data.
   If you want those back, there are plugins ready for you:
   ```js
diff --git a/src/builder/webpack/config.node.js b/src/builder/webpack/config.node.js
index f4fef0c91..968842bbf 100644
--- a/src/builder/webpack/config.node.js
+++ b/src/builder/webpack/config.node.js
@@ -10,6 +10,15 @@ const { UglifyJsPlugin } = optimize
 const chunkNameNode = "phenomic.node"
 const cacheDir = findCacheDir({ name: "phenomic" })
 
+const defautlExternals = [
+  // we could consider node_modules as externals deps
+  // and so use something like
+  // /^[A-Za-z0-9-_]/
+  // to not bundle all deps in the static build (for perf)
+  // the problem is that if people rely on node_modules for stuff
+  // like css, this breaks their build.
+]
+
 export default (config: PhenomicConfig): WebpackConfig => {
   const webpackConfig = commonWebpackConfig(config)
 
@@ -32,10 +41,7 @@ export default (config: PhenomicConfig): WebpackConfig => {
 
     // externals for package/relative name
     externals: [
-      ...webpackConfig.externals || [
-        // node modules
-        /^[a-z0-9-_]/,
-      ],
+      ...webpackConfig.externals || defautlExternals,
 
       // we need this to be the same between the entire node runtime
       "phenomic/lib/phenomic-loader/cache",