node-modules CSS files

[Zaitsev]

trafficstars

Im tring to use react-select component. This component uses its own css recommended way to use this component is

import Select from 'react-select';                   
import "react-select/dist/react-select.css";         

Bu I got error

XXX/node_modules\react-select\dist\react-select.css:8 Uncaught SyntaxError: Unexpected token .
    at createScript (vm.js:53)
    at Object.runInThisContext (vm.js:95)
    at Module._compile (module.js:543)
    at Object.Module._extensions..js (module.js:580)
    at Module.load (module.js:488)
    at tryModuleLoad (module.js:447)
    at Function.Module._load (module.js:439)
    at Module.require (module.js:498)
    at require (internal/module.js:20)
    at u (app.tsx:26)

I believe it is caused by .instructions('> [index.tsx] + fuse-box-css') So external css files missed to CSSPlugin and imported as Javascript files May be we have to create css-bundle for such files?

[skellock]

Hmm... good question. Do you know if react-select is pre-compiled? Many libs in the react community aren't.

If it isn't, then we're going to have to send it thru the babel gauntlet as well, which this stack isn't setup to do.

What does line 8 look like in react-select.css?

If it's just plain ol css, then there's something definitely wrong on my end.

[Zaitsev]

Sorry for delay: was on vacation.... react-select.css is a pure CSS file. line 8 is a first css line (1-7 are comments)

.Select {
  position: relative;
}
.Select,
.Select div,
.Select input,
.Select span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

I managad to solve isuue by creating bundle, but it seems not very react-way.

fuse.ts:

    const appGlobalStyles = [
        [/global\.scss$/,
            SassPlugin(),
            CSSPlugin()
        ],
    ];

    const vendorStyles = [
        [/node_modules.*(\.css)$/,
            CSSResourcePlugin({
                dist   : `${OUTPUT_DIR}/vendor`,
                resolve: (f) => `vendor/${f}`
            }),
            CSSPlugin({
                group  : 'vendor-static.css',
                outFile: `${OUTPUT_DIR}/vendor-static.css`
            })
        ],
    ];


    // bundle the electron renderer code
    const rendererBundle = fuse
        .bundle('renderer')
        // .plugin(...moduleCss)
        .plugin(...vendorStyles)
        .plugin(...appGlobalStyles)
        // .plugin(CopyPlugin({useDefault: false, files: ASSETS, dest: 'assets', resolve: 'assets/'}))
        .instructions('> [renderer/index.tsx] + ~renderer/assets/vendorStyles.ts + fuse-box-css')
    ;

vebdorStyles.ts:

import "../../../node_modules/font-awesome/css/font-awesome.css";
import '../../../node_modules/react-select/dist/react-select.css';

And I have to use relative paths in the import othervise css resolves as JS-modules.

[Zaitsev]

incendently closed issue