Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by liamthornback2
liamthornback2
9,618 Points

"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;