Gatsby: Unable to use es6 imports?

[nealoke]

Hi, first of all this project is great!!!

I am trying to reduce bundle size even more by using babel with the plugin transform-imports and it is working fine however when I try to transform-imports for redux-form it is not working. In the docs of redux-form it mentions that it requires a bundler that can process ES modules. Is this not the case?

This only occurs when trying the transform-imports for redux-form, I'm also transforming other things as well as using the babel-plugin-lodash without any issues.

It produces the following error log when trying to build static HTML for pages:
Command line

Complete log of npm error

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle @nealoke/[email protected]~prebuild: @nealoke/[email protected]
6 info lifecycle @nealoke/[email protected]~build: @nealoke/[email protected]
7 verbose lifecycle @nealoke/[email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle @nealoke/[email protected]~build: PATH: C:\Users\nealv\AppData\Roaming\nvm\v8.8.1\node_modules\npm\bin\node-gyp-bin;C:\xampp\htdocs\wizer\packages\website\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Common Files\Intel\Shared Libraries\redist\intel64\compiler;C:\Program Files\Broadcom\Broadcom 802.11 Network Adapter;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\QuickTime\QTSystem\;C:\Program Files\Git\cmd;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\Program Files (x86)\Skype\Phone\;C:\Users\nealv\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Ruby23-x64\bin;C:\Users\nealv\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Heroku\bin;C:\Users\nealv\AppData\Roaming\Composer\vendor\bin;C:\Program Files\Microsoft VS Code\bin;C:\Users\nealv\AppData\Roaming\nvm;C:\Program Files\nodejs
9 verbose lifecycle @nealoke/[email protected]~build: CWD: C:\xampp\htdocs\wizer\packages\website
10 silly lifecycle @nealoke/[email protected]~build: Args: [ '/d /s /c',
10 silly lifecycle   'npm run clean && gatsby build && gulp copy-server' ]
11 silly lifecycle @nealoke/[email protected]~build: Returned: code: 1  signal: null
12 info lifecycle @nealoke/[email protected]~build: Failed to exec build script
13 verbose stack Error: @nealoke/[email protected] build: `npm run clean && gatsby build && gulp copy-server`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\nealv\AppData\Roaming\nvm\v8.8.1\node_modules\npm\node_modules\npm-lifecycle\index.js:280:16)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at EventEmitter.emit (events.js:213:7)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\nealv\AppData\Roaming\nvm\v8.8.1\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at ChildProcess.emit (events.js:213:7)
13 verbose stack     at maybeClose (internal/child_process.js:927:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
14 verbose pkgid @nealoke/[email protected]
15 verbose cwd C:\xampp\htdocs\wizer\packages\website
16 verbose Windows_NT 10.0.14393
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v8.8.1
19 verbose npm  v5.4.2
20 error code ELIFECYCLE
21 error errno 1
22 error @nealoke/[email protected] build: `npm run clean && gatsby build && gulp copy-server`
22 error Exit status 1
23 error Failed at the @nealoke/[email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

[lowmess]

Gatsby unfortunately is still on Webpack 1.x, which cannot natively understand ES modules. iirc, it is on the v2 roadmap to update to Webpack 3+. In the meantime, you'll need to Babel-fy any deps that use the import/export syntax.

Here's the v2 issue if you want to keep updated: https://github.com/gatsbyjs/gatsby/issues/2641

[Chuloo]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[felixfbecker]

This is still an issue.

[lowmess]

As mentioned previously, this was an issue with the version of Webpack used in Gatsby v1.x. This should be resolved in v2.x.

[kakadiadarpan]

@felixfbecker can you try upgrading your Gatsby version to 2 and check if that solves the problem for you?

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍