1

I have style-loader, css-loader, sass-loader and node-sass installed. And i think the webpack.config file is set up properly...although it seems I'm missing something. please help!

package.json 

{
  "name": "pluralsight-redux-starter",
  "version": "1.0.0",
  "description": "Starter kit for React and Redux Pluralsight course by Cory House",
  "author": "Cory House",
  "license": "MIT",
  "//": "alternative for this include gulp and grunt",
  "scripts": {
    "//": "react specific library, you can use redux with other libraries as well, like angular etc...",
    "prestart": "babel-node tools/startMessage.js",
    "start": "npm-run-all --parallel open:src lint:watch test:watch",
    "open:src": "babel-node tools/srcServer.js",
    "lint": "node_modules/.bin/esw webpack.config.* src tools",
    "lint:watch": "npm run lint -- --watch",
    "test": "mocha --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
    "test:watch": "npm run test -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "prebuild": "npm-run-all clean-dist test link build:html",
    "build": "babel-node tools/build.js",
    "postbuild": "babel-node tools/distServer.js"
  },
  "dependencies": {
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "css-loader": "^0.23.1",
    "jquery": "2.2.3",
    "node-sass": "^3.8.0",
    "react": "15.1.0",
    "react-dom": "15.0.2",
    "react-redux": "4.4.5",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "react-toolbox": "^1.0.1",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1",
    "sass-loader": "^0.5.0",
    "style-loader": "^0.13.1",
    "toastr": "2.1.2"
  },
  "devDependencies": {
    "babel-cli": "6.8.0",
    "babel-core": "6.8.0",
    "babel-loader": "6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-register": "6.8.0",
    "colors": "1.1.2",
    "compression": "1.6.1",
    "cross-env": "1.0.7",
    "css-loader": "0.23.1",
    "enzyme": "2.2.0",
    "eslint": "2.9.0",
    "eslint-plugin-import": "1.6.1",
    "eslint-plugin-react": "5.0.1",
    "eslint-watch": "2.1.11",
    "eventsource-polyfill": "0.9.6",
    "expect": "1.19.0",
    "express": "4.13.4",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "jsdom": "8.5.0",
    "mocha": "2.4.5",
    "nock": "8.0.0",
    "npm-run-all": "1.8.0",
    "normalize.css": "^4.0.0",
    "react-addons-css-transition-group": "^15.0.0",
    "open": "0.0.5",
    "postcss-loader": "0.8.2",
    "react": "^15.0.2",
    "react-addons-test-utils": "15.0.2",
    "redux-immutable-state-invariant": "1.2.3",
    "redux-mock-store": "1.0.2",
    "rimraf": "2.5.2",
    "sass-loader": "0.5",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/coryhouse/pluralsight-redux-starter"
  }
}

webpack.config.dev.js

import webpack from 'webpack';
import path from 'path';
const ExtractTextPlugin = require('extract-text-webpack-plugin');

export default {
    debug: true,
    devtool: 'cheap-module-eval-source-map',
    noInfo: false,
    entry: [
        'eventsource-polyfill', // necessary for hot reloading with IE
        'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
        './src/index.js'
    ],
    target: 'web',
    output: {
        path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './src'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],

    resolve: {
      extensions: ['', '.css', '.scss', '.js']
    },


    // Tells webpack the types of files that we want it to handle.
    module: {
        loaders: [
            {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
            {test: /\.s?css$/, loaders: ['style', 'css', 'sass']},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
        ]

    }
};

error message in console:

SyntaxError: /Users/Macbook/projects/pluralsight-redux-starter/src/styles/test.scss: Unexpected token (1:5)
> 1 | form {
    |      ^
  2 |   h1 {
  3 |     color: red;
  4 |   }
    at Parser.pp.raise (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.semicolon (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/util.js:76:38)
    at Parser.pp.parseExpressionStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:499:8)
    at Parser.parseExpressionStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/plugins/flow.js:52:20)
    at Parser.pp.parseStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:168:17)
    at Parser.parseStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/plugins/flow.js:30:22)
    at Parser.pp.parseBlockBody (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:529:21)
    at Parser.pp.parseTopLevel (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:36:8)
    at Parser.parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/index.js:129:19)
    at parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/index.js:47:47)
    at File.parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:540:58)
    at File.parseCode (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:626:20)
    at /Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/pipeline.js:52:12
    at File.wrap (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:586:16)
    at Pipeline.transform (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/pipeline.js:50:17)
    at Object.transformFileSync (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/api/node.js:152:10)
    at compile (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:129:20)
    at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:14)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (CourseForm.js:4:1)
    at Module._compile (module.js:541:32)
    at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (CourseForm.Enzyme.test.js:12:1)
    at Module._compile (module.js:541:32)
    at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at /Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:219:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:216:14)
    at Mocha.run (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:468:10)
    at loadAndRun (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/bin/_mocha:359:22)
    at Object.<anonymous> (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/bin/_mocha:376:3)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:160:18)
    at node.js:449:3

test.scss

form {
  h1 {
    color: red;
  }
}

webpack-validator output:

import webpack from webpack;

seems to be causing a problem for webpack-validator, not sure why this is. I'm not convinced it is related to my scss loading issue.

==> webpack-validator webpack.config.dev.js
Reading: webpack.config.dev.js
/Users/Macbook/projects/pluralsight-redux-starter/webpack.config.dev.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at validateConfig (/usr/local/lib/node_modules/webpack-validator/dist/bin/validate-config.js:13:16)
    at /usr/local/lib/node_modules/webpack-validator/dist/bin/webpack-validator.js:35:32
Improve this question
1
  • the Unexpected token import error from webpack-validator output is because webpack.config.dev.js is using ES6 and webpack-validator is reading this rather than the transpiled JS. Commented Jun 23, 2016 at 18:44

4 Answers 4

Reset to default
1

From the error it looks like you are just missing a brace somewhere in your .scss

SyntaxError: /Users/Macbook/projects/pluralsight-redux-starter/src/styles/test.scss: Unexpected token (1:5)
> 1 | form {
    |      ^
  2 |   h1 {
  3 |     color: red;
  4 |   }

Double check test.scss and make sure everything is fine.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

the closing brace simply isn't shown in the error message, it is there however. Good idea though.
could you post your test.scss?
pretty sure it isn't the problem, but certainly I can. One second
Yes sorry I thought you had more code! Anyways, where and how are you requiring this test.scss? Also I'm assuming you are running npm start, what happens if you remove test:watch from that task, does it run just fine? From the stack trace you posted seems you are including this scss file in a test file which mocha is trying to run and crash happens. Try that.
1

Resolved the problem using the following package:

https://www.npmjs.com/package/ignore-styles

added:

mocha--require ignore-styles

to test script and problem solved.

Thanks @eblin

Improve this answer

Comments

0

Can you try and extend your config to include the following:

export default {
  resolve: {
    extensions: ['', '.css', '.scss', '.js']
  },
  ...
}
Improve this answer

2 Comments

Try run webpack-validator against your config: github.com/js-dxtools/webpack-validator
ran the validator - output doesn't seem super meaningful. Will add to post
0

Problem solved.

Updated sass-loader from 0.5.0 to 3.2.0, and tweaked the webpack.config file. See below, the updated package.json and webpack.config. Allows me to use bootstrap and react-toolbox styles.

package.json

{
  "name": "pluralsight-redux-starter",
  "version": "1.0.0",
  "description": "Starter kit for React and Redux Pluralsight course by Cory House",
  "author": "Cory House",
  "license": "MIT",
  "//": "alternative for this include gulp and grunt",
  "scripts": {
    "//": "react specific library, you can use redux with other libraries as well, like angular etc...",
    "prestart": "babel-node tools/startMessage.js",
    "start": "npm-run-all --parallel open:src lint:watch test:watch",
    "open:src": "babel-node tools/srcServer.js",
    "lint": "node_modules/.bin/esw webpack.config.* src tools",
    "lint:watch": "npm run lint -- --watch",
    "test": "mocha --require ignore-styles --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
    "test:watch": "npm run test -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "prebuild": "npm-run-all clean-dist test link build:html",
    "build": "babel-node tools/build.js",
    "postbuild": "babel-node tools/distServer.js"
  },
  "dependencies": {
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "css-loader": "^0.23.1",
    "jquery": "2.2.3",
    "minimatch": "^3.0.2",
    "node-sass": "^3.8.0",
    "react": "15.1.0",
    "react-dom": "15.0.2",
    "react-redux": "4.4.5",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "react-toolbox": "^1.0.1",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1",
    "resolve-path-webpack-plugin": "^1.1.0",
    "sass-loader": "^3.2.1",
    "style-loader": "^0.13.1",
    "toastr": "2.1.2",
    "webpack-validator": "^2.2.0"
  },
  "devDependencies": {
    "babel-cli": "6.8.0",
    "babel-core": "6.8.0",
    "babel-loader": "6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-register": "6.8.0",
    "colors": "1.1.2",
    "compression": "1.6.1",
    "cross-env": "1.0.7",
    "css-loader": "0.23.1",
    "enzyme": "2.2.0",
    "eslint": "2.9.0",
    "eslint-plugin-import": "1.6.1",
    "eslint-plugin-react": "5.0.1",
    "eslint-watch": "2.1.11",
    "eventsource-polyfill": "0.9.6",
    "expect": "1.19.0",
    "express": "4.13.4",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "ignore-styles": "^4.0.0",
    "jsdom": "8.5.0",
    "mocha": "2.4.5",
    "nock": "8.0.0",
    "normalize.css": "^4.0.0",
    "npm-run-all": "1.8.0",
    "open": "0.0.5",
    "postcss-loader": "0.8.2",
    "react": "^15.0.2",
    "react-addons-css-transition-group": "^15.0.0",
    "react-addons-test-utils": "15.0.2",
    "redux-immutable-state-invariant": "1.2.3",
    "redux-mock-store": "1.0.2",
    "rimraf": "2.5.2",
    "sass-loader": "^3.2.0",
    "style-loader": "0.13.1",
    "toolbox-loader": "0.0.3",
    "url-loader": "0.5.7",
    "webpack": "1.13.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/coryhouse/pluralsight-redux-starter"
  }
}

webpack.config.dev.js

import webpack from 'webpack';
import path from 'path';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const modulesPath = path.join(__dirname, 'node_modules');
const autoprefixer = require('autoprefixer');

  export default {
      debug: true,
      devtool: 'source-map',
      noInfo: false,
      entry: [
          'eventsource-polyfill', // necessary for hot reloading with IE
          'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
          './src/index.js'
      ],
      target: 'web',
      output: {
          path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
          publicPath: '/',
          filename: 'bundle.js'
      },
      devServer: {
          contentBase: './src'
      },
      plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoErrorsPlugin()

      ],
      resolve: {
        extensions: ['', '.css', '.scss', '.js', '.json'],
        modulesDirectories: ['node_modules']
      },
      postcss: [autoprefixer],

      toolbox: {
        theme: path.join(__dirname, 'src/styles/variables.scss')
      },
      // Tells webpack the types of files that we want it to handle.
      module: {
          loaders: [
              {test: /(\.js|\.jsx)$/,
                include: path.join(__dirname, 'src'),
                loaders: ['babel']
              },
              {
                test: /\.s?css$/,
                loaders: ['style', 'css', 'sass'],
                exclude: /(node_modules)\/react-toolbox/
              },
              {
                test    : /(\.scss|\.css)$/,
                include : /(node_modules)\/react-toolbox/,
                loaders : [
                  require.resolve('style-loader'),
                  require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
                  require.resolve('sass-loader') + '?sourceMap', 'toolbox'
                ]
              },
              {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
              {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
              {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
              {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
          ]

      }
  };
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.