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