search

wangtao0101 / react-virtualized-transfer

Transfer component with virtualization
https://wangtao0101.github.io/react-virtualized-transfer/
MIT License
14 stars 3 forks source link

Problem importing css #1

Open damiangreen opened 5 years ago

damiangreen commented 5 years ago

When doing require('react-virtualized-transfer/lib/css'); I get the error

.ReactVirtualized__Collection {
^

SyntaxError: Unexpected token .
    at new Script (vm.js:51:7)
    at createScript (vm.js:136:10)
    at Object.runInThisContext (vm.js:197:10)
    at Module._compile (module.js:613:28)
    at Module._extensions..js (module.js:660:10)
    at Object.newLoader [as .js] (code\node_modules\pirates\lib\index.js:96:7)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (code\node_modules\react-virtualized-transfer\lib\transfer.js:31:1)
    at Module._compile (module.js:649:30)
    at Module._compile (code\node_modules\pirates\lib\index.js:91:24)
    at Module._extensions..js (module.js:660:10)
    at Object.newLoader [as .js] (code\node_modules\pirates\lib\index.js:96:7)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (code\node_modules\react-virtualized-transfer\lib\index.js:7:17)```

If i try importing by the wother way suggested in the documentation : `import reactResizable from 'react-resizable/css/styles.css';`

I get  the error

code\node_modules\react-virtualized-transfer\es\css.js:1 (function (exports, require, module, filename, dirname) { import 'antd/lib/checkbox/style/index.css'; ^^^^^^

SyntaxError: Unexpected token import at new Script (vm.js:51:7) at createScript (vm.js:136:10) at Object.runInThisContext (vm.js:197:10) at Module._compile (module.js:613:28) at Module._compile (code\node_modules\pirates\lib\index.js:91:24) at Module._extensions..js (module.js:660:10) at Object.newLoader [as .js] (code\node_modules\pirates\lib\index.js:96:7) at Module.load (module.js:561:32) at tryModuleLoad (module.js:501:12) at Function.Module._load (module.js:493:3) at Module.require (module.js:593:17) at require (internal/module.js:11:18) at Object.react-virtualized-transfer/es/css (code\external "react-virtualized-transfer\es\css":1:1) at webpack_require (code\webpack\bootstrap:677:1) at fn (code\webpack\bootstrap:53:1) at Object../src/components/Layout/Layout.js (code\src\components\Layout\Layout.js:20:1) at webpack_require (code\webpack\bootstrap:677:1) at fn (code\webpack\bootstrap:53:1) at Object../src/routes/dashboard/index.js (code\build\chunks\dashboard.js:3833:76) at __webpack_require__ (code\webpack\bootstrap:677:1) at fn (code\webpack\bootstrap:53:1) at

wangtao0101 commented 5 years ago

Do you use webpack and css-loader ？

damiangreen commented 5 years ago

yep. I'm using React Starter Kit

wangtao0101 commented 5 years ago

at Object.react-virtualized-transfer/es/css (code\external "react-virtualized-transfer\es\css":1:1), Maybe your starter kit can't handle css file

damiangreen commented 5 years ago

The react starter kit uses isomorphic style loader, so in my .tsx file we do: import * as s from './WidgetLibraryItem.css'; ...

export default compose(
  connect<{}, {}, WidgetLibraryProps>(null, mapDispatchToProps),
  withStyles(s),
)(WidgetLibraryItem);

It handles css files fine.