Fixed: SyntaxError: Unexpected token when importing CSS from ``no…

…de_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

@@ -6,6 +6,13 @@
   from react-router-scroll (as we only use this).
   ``[email protected]`` 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

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",