CODEWITHSUNDEEP
lesskarma-runnerreactjsbrowserify
rickyduck
rickyduck

Reputation: 4084

Karma, Browserify on React is failing on LESS

I'm learning how to use React, and in turn use Karma as the test runner. I'm running Karma with browserify / reactify (mocha+kai). Whenever I run npm test, I get the following error: 

ERROR [framework.browserify]: bundle error
ERROR [framework.browserify]: 
/Users/user/Projects/example-d3-react/src/d3Chart.less:1
.d3 {
^
ParseError: Unexpected token
ERROR [karma]: [TypeError: Not a string or buffer]

This happens on all LESS files in the project. I have tried adding a LESS preprocessor to the karma.conf like so:

preprocessors: {
    'src/*.less': ['less'],
    'tests/**/*.js': ['browserify']
},

browserify: {
    debug: true,
    transform: [ 'reactify' ]
},
lessPreprocessor: {
      options: {
        paths: ['src'],
        save: true,
        rootpath: './'
      },
      additionalData: {
        modifyVars: {
          'bodyColor': 'grey',
          'secondBoxColor': 'blue'
        },
        globalVars: {
          'globalBoxColor': 'red'
        }
      },
      transformPath: function(path) {
        console.log("transforming");
        return path.replace(/\.less$/, '.compiled.css');
      }
    },

Upvotes: 0

Views: 783

Answers (2)

Mtjody
Mtjody

Reputation: 41

None of the suggested answers helped me, but in case anyone is experiencing this problem, the solution that worked for me is just adding the project-specific less transform to the package.json file. E.g:

{
...
  "browserify": {
    "exclude": "*.spec.js",
    "transform": [
      "node-lessify",
      "browserify-ng-html2js"
    ]
  },
...
}

Build broke when doing this, since I was using the cmd line transform when building application through NPM. Removed the cmd line transform part since the package.json transform will apply the transform programmatically, and now it works again.

Upvotes: 0

Eelke
Eelke

Reputation: 2327

Add the preprocessor explicitly to the config: plugins: ['karma-less-preprocessor']

Upvotes: 1

Related Questions