Gatsby: Gatsby build fails on Ubuntu server with babel-loader error
I'm able to build my Gatsby application in my local development environment, but the build fails when I deploy to Ubuntu server via dokku with the following error:
Complete deploy log is here.
remote: error Generating JavaScript bundles failed
Error: ./~/babel-loader/lib?{"plugins":["/tmp/build/~/gatsby/dist/utils/babel- plugin-extract-graphql.js","/tmp/build/~/babel-plugin-add-module-exports/lib/i ndex.js","/tmp/build/~/babel-plugin-transform-object-assign/lib/index.js"],"pr esets":[["/tmp/build/~/babel-preset-env/lib/index.js",{"loose":true,"uglify":t rue,"modules":"commonjs","targets":{"browsers":["> 1%","last 2 versions","IE > = 9"]},"exclude":["transform-regenerator","transform-es2015-typeof-symbol"]}], "/tmp/build/~/babel-preset-stage-0/lib/index.js","/tmp/build/~/babel-preset-re act/lib/index.js"],"cacheDirectory":true}!./src/pages/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../components in /tmp/build/src/pages
resolve file
/tmp/build/src/components is not a file
/tmp/build/src/components.js doesn't exist
/tmp/build/src/components.jsx doesn't exist
resolve directory
/tmp/build/src/components/package.json doesn't exist (directory description file)
directory default file index
resolve file index in /tmp/build/src/components
/tmp/build/src/components/index doesn't exist
/tmp/build/src/components/index.js doesn't exist
/tmp/build/src/components/index.jsx doesn't exist
[/tmp/build/src/components.js]
[/tmp/build/src/components.jsx]
[/tmp/build/src/components/index]
[/tmp/build/src/components/index.js]
[/tmp/build/src/components/index.jsx]
@ ./~/babel-loader/lib?{"plugins":["/tmp/build/~/gatsby/dist/utils/babel-plug in-extract-graphql.js","/tmp/build/~/babel-plugin-add-module-exports/lib/index .js","/tmp/build/~/babel-plugin-transform-object-assign/lib/index.js"],"preset s":[["/tmp/build/~/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"]}],"/tm p/build/~/babel-preset-stage-0/lib/index.js","/tmp/build/~/babel-preset-react/ lib/index.js"],"cacheDirectory":true}!./src/pages/index.js 13:18-42
Error: ./~/babel-loader/lib?{"plugins":["/tmp/build/~/gatsby/dist/utils/babel- plugin-extract-graphql.js","/tmp/build/~/babel-plugin-add-module-exports/lib/i ndex.js","/tmp/build/~/babel-plugin-transform-object-assign/lib/index.js"],"pr esets":[["/tmp/build/~/babel-preset-env/lib/index.js",{"loose":true,"uglify":t rue,"modules":"commonjs","targets":{"browsers":["> 1%","last 2 versions","IE > = 9"]},"exclude":["transform-regenerator","transform-es2015-typeof-symbol"]}], "/tmp/build/~/babel-preset-stage-0/lib/index.js","/tmp/build/~/babel-preset-re act/lib/index.js"],"cacheDirectory":true}!./src/pages/tripartism.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../components in /tmp/build/src/pages
resolve file
/tmp/build/src/components is not a file
/tmp/build/src/components.js doesn't exist
/tmp/build/src/components.jsx doesn't exist
resolve directory
/tmp/build/src/components/package.json doesn't exist (directory description file)
directory default file index
resolve file index in /tmp/build/src/components
/tmp/build/src/components/index doesn't exist
/tmp/build/src/components/index.js doesn't exist
/tmp/build/src/components/index.jsx doesn't exist
[/tmp/build/src/components.js]
[/tmp/build/src/components.jsx]
[/tmp/build/src/components/index]
[/tmp/build/src/components/index.js]
[/tmp/build/src/components/index.jsx]
@ ./~/babel-loader/lib?{"plugins":["/tmp/build/~/gatsby/dist/utils/babel-plug in-extract-graphql.js","/tmp/build/~/babel-plugin-add-module-exports/lib/index .js","/tmp/build/~/babel-plugin-transform-object-assign/lib/index.js"],"preset s":[["/tmp/build/~/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"]}],"/tm p/build/~/babel-preset-stage-0/lib/index.js","/tmp/build/~/babel-preset-react/ lib/index.js"],"cacheDirectory":true}!./src/pages/tripartism.js 11:18-42
I'm using the following build packs to build the application:
https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/dokku/buildpack-nginx
My package.json file looks like this:
{
"dependencies": {
"axios": "^0.18.0",
"browser-lang": "0.0.1",
"gatsby": "^1.9.277",
"gatsby-link": "^1.6.40",
"gatsby-plugin-react-helmet": "^2.0.10",
"gatsby-plugin-react-next": "^1.0.11",
"gatsby-plugin-typography": "^1.7.19",
"intl": "^1.2.5",
"normalize.css": "^8.0.0",
"pixi.js": "^4.8.1",
"react-grid-system": "^4.1.4",
"react-helmet": "^5.2.0",
"react-intl": "^2.4.0",
"react-pixi-fiber": "^0.4.9"
},
"engines": {
"node": "8.11.3",
"yarn": "1.7.0",
"npm": "6.1.0"
},
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write 'src/**/*.js'",
"test": "echo \"Error: no test specified\" && exit 1",
"heroku-postbuild": "yarn build"
},
"devDependencies": {
"babel-eslint": "^8.2.6",
"dotenv": "^6.0.0",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-config-react": "^1.1.7",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.7.0",
"prettier": "^1.12.0",
"prop-types": "^15.6.2"
}
}
My project structure looks like this:
├── gatsby-config.js
├── gatsby-node.js
├── package.json
├── src
│ ├── assets
│ ├── components
│ │ ├── Intro
│ │ │ ├── Components
│ │ │ │ ├── Background.jsx
│ │ │ │ ├── Content.jsx
│ │ │ │ ├── Controller.jsx
│ │ │ │ ├── Intro
│ │ │ │ │ ├── Intro.css
│ │ │ │ │ ├── Intro.jsx
│ │ │ │ │ └── index.js
│ │ │ │ ├── Layer.jsx
│ │ │ │ ├── Mask.jsx
│ │ │ │ ├── Screen.jsx
│ │ │ │ ├── Stage.jsx
│ │ │ │ ├── Teaser
│ │ │ │ │ ├── Teaser.css
│ │ │ │ │ ├── Teaser.jsx
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ ├── helpers
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── Layout
│ │ │ ├── Layout.jsx
│ │ │ ├── index.js
│ │ │ └── typography.css
│ │ ├── index.js
│ │ └── language.js
│ ├── data
│ │ └── tripartism-layers.json
│ ├── i18n
│ │ ├── Link.js
│ │ ├── index.js
│ │ ├── locales
│ │ │ ├── ar.js
│ │ │ ├── en.js
│ │ │ ├── es.js
│ │ │ ├── fr.js
│ │ │ ├── index.js
│ │ │ ├── ru.js
│ │ │ └── zh.js
│ │ ├── redirect.js
│ │ └── withIntl.js
│ ├── layouts
│ │ └── index.js
│ ├── pages
│ │ ├── 404.js
│ │ ├── index.js
│ │ └── tripartism.js
│ └── utils
│ └── typography.js
└── yarn.lock
Here's an example of how I'm importing components in my pages. I don't think this is incorrect:
src/pages/index.js
import { Layout, Language } from '../components';
Any ideas what I'm doing wrong?
justintemps
All 2 comments
this could be a result of Linux servers being case sensitive to file paths. Verify which components and directories are in uppercase or lowercase in your local environment.
This should help => https://stackoverflow.com/questions/17683458/how-do-i-commit-case-sensitive-only-filename-changes-in-git.
What are the details of your local environment?
Chuloo
on 1 Aug 2018
🎉1
@Chuloo Yup, that did it! I'm running on OSX and deployed to Linux. Thanks for your help!
justintemps
on 2 Aug 2018
❤1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
dustinhorton
·
3Comments
theduke
·
3Comments
kalinchernev
·
3Comments
jimfilippou
·
3Comments
Oppenheimer1
·
3Comments