gatsby: Error for EmitFile when importing files

Description

I have Module build failed: Error: File Loader emitFile is required from module system error when gatsby-develop I was only trying to import static image file to my Gatsby index page.

Steps to reproduce

Error mainly pointed to two npm plugin I installed, file-loader and url-loader for loading files and parsing url.

Expected result

Able to import static image from my src/images folder.

Actual result

Module build failed: Error: File Loader emitFile is required from module system at Object.loader (/node_modules/file-loader/dist/index.js:31:29) at Object.loader (/node_modules/url-loader/dist/index.js:76:19)

Environment

System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel® Core™ i5-7267U CPU @ 3.10GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 10.8.0 - /usr/local/bin/node npm: 6.2.0 - /usr/local/bin/npm Browsers: Chrome: 68.0.3440.106 Firefox: 62.0 Safari: 11.1.2 npmPackages: gatsby: ^1.9.277 => 1.9.277 gatsby-image: ^1.0.55 => 1.0.55 gatsby-link: ^1.6.46 => 1.6.46 gatsby-plugin-catch-links: ^1.0.24 => 1.0.24 gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11 gatsby-plugin-resolve-src: ^1.1.4 => 1.1.4 gatsby-plugin-sharp: ^1.6.48 => 1.6.48 gatsby-plugin-typography: ^1.7.19 => 1.7.19 gatsby-remark-attr: 0.0.1 => 0.0.1 gatsby-remark-copy-linked-files: ^1.5.37 => 1.5.37 gatsby-remark-emoji: 0.0.2 => 0.0.2 gatsby-remark-images: ^1.5.67 => 1.5.67 gatsby-source-filesystem: ^1.5.39 => 1.5.39 gatsby-transformer-remark: ^1.7.44 => 1.7.44 gatsby-transformer-sharp: ^1.6.27 => 1.6.27 npmGlobalPackages: gatsby-cli: 1.1.58