cheton / browserify-css

A Browserify transform for bundling, rebasing, inlining, and minifying CSS files.
http://cheton.github.io/browserify-css/
MIT License
144 stars 22 forks source link

Can someone help me debug this? 'import' and 'export' may appear only with 'sourceType: module' #68

Closed AeonFr closed 5 years ago

AeonFr commented 5 years ago

I was wondering if someone could give me some help to set-up browserify-css with Gulp. I understand browserify-css is supposed to allow this kind of syntax:

import './quill.mention.css';

yet I get an error.

[14:49:24] 'jsx' errored after 5.36 s
[14:49:24] Error: Parsing file C:\xampp\htdocs\ola\node_modules\quill-mention\src\quill.mention.js: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
    at Deps.parseDeps (C:\xampp\htdocs\ola\node_modules\module-deps\index.js:510:15)
    at getDeps (C:\xampp\htdocs\ola\node_modules\module-deps\index.js:438:44)
    at C:\xampp\htdocs\ola\node_modules\module-deps\index.js:421:38
    at ConcatStream.<anonymous> (C:\xampp\htdocs\ola\node_modules\concat-stream\index.js:37:43)
    at ConcatStream.emit (events.js:194:15)
    at ConcatStream.EventEmitter.emit (domain.js:459:23)
    at finishMaybe (C:\xampp\htdocs\ola\node_modules\readable-stream\lib\_stream_writable.js:630:14)
    at endWritable (C:\xampp\htdocs\ola\node_modules\readable-stream\lib\_stream_writable.js:638:3)
    at ConcatStream.Writable.end (C:\xampp\htdocs\ola\node_modules\readable-stream\lib\_stream_writable.js:594:41)
    at DuplexWrapper.onend (C:\xampp\htdocs\ola\node_modules\readable-stream\lib\_stream_readable.js:577:10)

Note: My error begin when importing the quill-mention library, and the line referenced in the error is this:

import './quill.mention.css';

And my gulpfile is this:

const gulp = require("gulp"),
    browserify = require('browserify'),
    babelify = require('babelify'),
    browserifyCSS = require('browserify-css'),
    reactify = require('reactify');

gulp.task('jsx', () => {
    // set up the browserify instance on a task basis
    var b = browserify({
        entries: './Admin/js/src/comentarios.widget.jsx',
        // extensions: ['js', 'jsx', 'css'], // this doesn't seem to solve the issue
        debug: true,
        paths: ['./Admin/js/src/components/'],

        // The order in which the `browserifyCSS` transform is put doesn't seem to have any effect
        transform: [
            [babelify, { presets: ["env", "react"] }],
            [browserifyCSS, {
                minify: true,
                autoInyect: true,
            }],
            [reactify, { "es6": true }],
        ],
    });

    return b.bundle().pipe(gulp.dest('./Admin/js/dist/'));
});
AeonFr commented 5 years ago

After trying again, looks like this issue is caused by the quill-mentions library using typescript. (I didn't had it installed). Closing this.