Code splitting on Gatsby?

[arnondora]

I really curious that Can I have a code-splitting by using this line of code ?

const SEO = () => import('../components/SEO')

I got an error in the following lines when I run gatsby develop

Module parse failed: /Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/babel-loader/lib/index.js?{"plugins":["/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/gatsby/dist/utils/babel-plugin-extract-graphql.js","/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/react-hot-loader/babel.js","/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/babel-plugin-transform-react-jsx-source/lib/index.js","/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/babel-plugin-add-module-exports/lib/index.js","/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/babel-plugin-transform-object-assign/lib/index.js"],"presets":[["/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/babel-preset-env/lib/index.js",{"loose":true,"uglify":true,"modules":"commonjs","targets":{"browsers":["> 1%","last 2 versions","IE >= 9"]},"exclude":["transform-regenerator","transform-es2015-typeof-symbol"]}],"/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/babel-preset-stage-0/lib/index.js","/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/babel-preset-react/lib/index.js"],"cacheDirectory":true}!/Users/arnonpuitrakul/Project/arnondoraBlog/src/templates/blog-post-full-width.js Unexpected token (83:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (83:9)
    at Parser.pp$4.raise (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseReturnStatement (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:839:33)
    at Parser.pp$1.parseStatement (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:699:34)
    at Parser.pp$1.parseBlock (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25)
    at Parser.pp$3.parseFunctionBody (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:2105:24)
    at Parser.pp$1.parseFunction (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:1065:10)
    at Parser.pp$3.parseExprAtom (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:1810:19)
    at Parser.pp$3.parseExprSubscripts (/Users/arnonpuitrakul/Project/arnondoraBlog/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)

 @ ./.cache/sync-requires.js 18:69-161

[pieh]

Gatsby uses webpack v1 currently (which will be updated in gatsby v2) and your code is valid in webpack v2+.

Try this:

require.ensure(
  ['module-name'],
  () => {
    const imported = require('module-name')
    // do something here
  },
  'module-name-chunk' // chunk name - need to be set to something
)

[arnondora]

Oh! Thank you very much!

[arnondora]

@pieh I have tried but I got SEO is not defined.

require.ensure(["../components/SEO"], function() {
  const SEO = require("../components/SEO");
}, 'SEO');

[pieh]

I might started with wrong approach - why do you want to split this code?

Peace of code i presented is for lazy loading modules, but when i reread your example it doesn't seem like SEO component should be lazy loaded as then this won't be used in generated static htmls.

If SEO component is common in many of your templates (i think number is above 3 ) then gatsby will automatically place it in common chunk shared by all pages ( you can read some consideration about that decission in comment here - https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js#L258 )

[tremby]

I want to load polyfills conditionally this way (no sense in loading a fetch polyfill in browsers which have it anyway, which is most). Do I understand correctly that it won't be possible until Gatsby v2?

[m-allanson]

@tremby Gatsby v2 will do this automatically for you, if you want to do this in v1 you'll need to work out how to do it manually.

[KyleAMathews]

v2 is almost out! Native support for import()

[spences10]

Is this the same way you would do it for React 16.6 {lazy, Suspense}?

I tried a simple example last night and was getting Webpack errors

https://github.com/spences10/scottspence.me/blob/dev/use-react-lazy/src/pages/index.js

[vamsi1317]

I am also facing same issue when trying with {lazy, Suspense}? Any update on this?

[DSchau]

@spences10 @vamsi1317 are you both seeing this error?

Specifically, my local build works just fine, but in the SSR phase, I receive the following error

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

   8 | 	else
   9 | 		root["lib"] = factory(root["@reach/router"], root["core-js/modules/es6.array.iterator"], root["core-js/modules/es6.array.sort"], root["core-js/modules/es6.function.name"], root["core-js/modules/es6.map"], root["core-js/modules/es6.object.assign"], root["core-js/modules/es6.promise"], root["core-js/modules/es6.regexp.constructor"], root["core-js/modules/es6.regexp.split"], root["core-js/modules/es6.regexp.to-string"], root["core-js/modules/es6.string.ends-with"], root["core-js/modules/es6.string.iterator"], root["core-js/modules/web.dom.iterable"], root["fs"], root["lodash"], root["path"], root["react"], root["react-dom/server"], root["react-helmet"]);
> 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE__reach_router__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_sort__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_function_name__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_map__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_object_assign__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_promise__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_constructor__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_split__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_regexp_to_string__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_ends_with__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_string_iterator__, __WEBPACK_EXTERNAL_MODULE_core_js_modules_web_dom_iterable__, __WEBPACK_EXTERNAL_MODULE_fs__, __WEBPACK_EXTERNAL_MODULE_lodash__, __WEBPACK_EXTERNAL_MODULE_path__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom_server__, __WEBPACK_EXTERNAL_MODULE_react_helmet__) {
     |  ^
  11 | return 


  WebpackError: Invariant Violation: Minified React error #294; visit https://reactjs.org/docs/error-decoder.html?invariant=294 for the full message o  r use the non-minified dev environment for full errors and additional helpful warnings.

See my reproduction here

[spences10]

Hi @DSchau yes, that is the error, here's the output from Netlify:

https://app.netlify.com/sites/scottspence/deploys/5c0769a00097d44d7e7b0227

[aalises]

Is there a fix for this? getting the same error.

[spences10]

Maybe re-open this for visibility

[pieh]

I'm not sure but it seems that:

Note:

React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.

( https://reactjs.org/docs/code-splitting.html#reactlazy )

might be the root cause of this? I'm not sure if we can workaround this

[spences10]

Yes, I ended up replacing Lazy with the loadable component eventually.

https://github.com/smooth-code/loadable-components

[wardpeet]

React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.

reactjs.org/docs/code-splitting.html#reactlazy )

Thanks so much for opening this issue! As stated, this is slightly tangential to Gatsby, and it seems like we’ve provided enough information to make an informed decision.

If this is not the case, or if we can help further--please don’t hesitate to reach out or comment on this issue, and we’d love to take another look.

Thanks for using Gatsby 💪

[daniloster]

Quick update. Suspense is the problem. Then, if you perform {window !== 'undefined' && <Suspense ...>}, that should sort it. This issue only happens for compilation, then, this workaround allow to build it.

[infiniteluke]

FWIW, #3763 (comment) works but typeof is necessary here:

{typeof window !== 'undefined' && (
  <React.Suspense fallback={<Loading />}>
    <LazyThing />
  </React.Suspense>
)}