Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

"TypeError: element.loader.split is not a function"

When I run my webpack-dev-server, I get the following error message in the console:

> webpack-treehouse-example@0.0.1 start /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop
> webpack-dev-server

 http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop
[BABEL] Note: The code generator has deoptimised the styling of "/home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
/home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack-core/lib/LoadersList.js:58
    if(element.loader) return element.loader.split("!");
                                             ^

TypeError: element.loader.split is not a function
    at getLoadersFromObject (/home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack-core/lib/LoadersList.js:58:43)
    at LoadersList.<anonymous> (/home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack-core/lib/LoadersList.js:78:12)
    at Array.map (<anonymous>)
    at LoadersList.match (/home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack-core/lib/LoadersList.js:70:19)
    at /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack/lib/NormalModuleFactory.js:111:68
    at /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack/node_modules/async/lib/async.js:246:17)
    at /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack/node_modules/async/lib/async.js:723:17
    at /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/webpack/node_modules/async/lib/async.js:167:37
    at /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:29:4
    at onResolved (/home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/enhanced-resolve/lib/Resolver.js:39:10)
    at /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/enhanced-resolve/lib/Resolver.js:123:21
    at /home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/enhanced-resolve/lib/Resolver.js:191:15
    at applyPluginsParallelBailResult.createInnerCallback.log (/home/ubuntu/Desktop/Programming Related/Team Treehouse/JavaScript/teamtreehouse_webpack_course/webpack-workshop/node_modules/enhanced-resolve/lib/Resolver.js:104:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-treehouse-example@0.0.1 start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webpack-treehouse-example@0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ubuntu/.npm/_logs/2018-12-07T17_07_04_828Z-debug.log

My webpack.config.js file is identical to the one in the video:

var HtmlWebpackPlugin = require("html-webpack-plugin");

var webpackConfig = {
     entry: "./src/index.js",
     output: {
         path: "build",
         filename: "bundle.js"
     },
     module: {
         loaders: [
             {
                 loader: "babel-loader",
                 test: /\.js$/
             },
             {
                 loader: ["style-loader", "css-loader", "sass-loader"],
                 test: /\.scss$/
             }
         ]
     },
     plugins: [
         new HtmlWebpackPlugin({
             template: "src/index.ejs"
         })
     ]
 };

 module.exports = webpackConfig;