[V2] Missing css files

[willemx]

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[ ] v0.14.x

Community Supported:
[x] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[x] Chrome

Should work:
[ ] Firefox
[ ] Safari

---

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior

Installed react-data-grid in my (Meteor) project with:

npm install --save react-data-grid
npm install --save react-data-grid-addons

Building the application results in:

Unable to resolve some modules:

  "!!./../node_modules/css-loader/index.js!./react-data-grid-header.css" in /Users/willem/meteor/msfsupport/node_modules/react-data-grid/dist/react-data-grid.js
(web.browser)
  "!!./../node_modules/css-loader/index.js!./react-data-grid-core.css" in /Users/willem/meteor/msfsupport/node_modules/react-data-grid/dist/react-data-grid.js
(web.browser)
  "!!./../node_modules/css-loader/index.js!./react-data-grid-row.css" in /Users/willem/meteor/msfsupport/node_modules/react-data-grid/dist/react-data-grid.js (web.browser)
  "!!./../node_modules/css-loader/index.js!./react-data-grid-cell.css" in /Users/willem/meteor/msfsupport/node_modules/react-data-grid/dist/react-data-grid.js
(web.browser)
  "!!./../node_modules/css-loader/index.js!./react-data-grid-checkbox.css" in /Users/willem/meteor/msfsupport/node_modules/react-data-grid/dist/react-data-grid.js
(web.browser)

There are no css files in node_modules/react-data-grid or node_modules/react-data-grid

Expected/desired behavior

I should expect to see css files in node_modules/react-data-grid or node_modules/react-data-grid

[adben]

From the migration guide to V2: "You get all the default css styling for free, if you want a custom styled grid you will only need to override the intended classnames."

[adben]

But yes, I can confirm, this issue is a blocker when using it i.e. jspm:

err (SystemJS) ENOENT: no such file or directory, open .../jspm_packages/npm/react-data-grid@2.0.1/dist/react-data-grid-header.css.js Error: ENOENT: no such file or directory, open .../jspm_packages/npm/react-data-grid@2.0.1/dist/react-data-grid-header.css.js Error loading /Users/adolfo/p/metri/gui/jspm_packages/npm/react-data-grid@2.0.1/dist/react-data-grid-header.css.js

Warning: (SystemJS) ENOENT: no such file or directory, open ../jspm_packages/npm/react-data-grid@2.0.1/dist/react-data-grid-header.css.js Error: ENOENT: no such file or directory, open .../jspm_packages/npm/react-data-grid@2.0.1/dist/react-data-grid-header.css.js Error loading .../jspm_packages/npm/react-data-grid@2.0.1/dist/react-data-grid-header.css.js Use --force to continue.

[gkankanh]

my build breaks with Error: Cannot find module '!!./../node_modules/css-loader/index.js!./react-data-grid-header.css'

[domehead100]

Mine works fine (Webpack). Looks like you are importing the css file (which does not exist in v2 as you noted) yourself? Otherwise why is your css loader trying to process the file?

[dbraynard]

I am seeing this error also. What should we do to get around it?

[domehead100]

As a temporary workaround, maybe copy the css files from the /themes directory in this repo to the /node_modules/react-data-grid/dist folder in your project?

Are you using jspm or webpack? Does the error occur in development config or production? Are you using hot-module replacement in dev?

[gkankanh]

will try that and report back. Thanks

On Wed, Feb 8, 2017 at 7:50 AM, domehead100 notifications@github.com wrote:

As a temporary workaround, maybe copy the css files from the /themes directory in this repo to the /node_modules/react-data-grid/dist folder in your project?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/adazzle/react-data-grid/issues/625#issuecomment-278320528, or mute the thread https://github.com/notifications/unsubscribe-auth/AGKryf_r6IWb4VaEVYz7InQvfPE-RKxcks5raboDgaJpZM4LueLP .

-- Regards, Gopal kankanhalli gopal334@gmail.com gopal@clearavenue.com

[gkankanh]

I copied react-data-grid.css on to /node_modules/react-data-grid/dist. The error I see now while building is Error: Cannot find module '!!./../node_modules/css-loader/index.js!./react-data-grid-row.css' from node_modules\react-data-grid-addons\dist\node_modules**react-data-grid-addons\dist**

[dbraynard]

@domehead100 , I copied the *.css from this repo to my local node_modules\react-data-grid\dist folder, but I still get the errors like:

mygulp error: { [Error: Cannot find module '!!./../node_modules/css-loader/index.js!./react-data-grid-header.css' from 'C:\gitlab\MyProject\node_modules\react-data-grid\dist']

Also, I am using gulp/browserify/browserify-css to build my javascript bundle.

I have react-data-grid 2.0.6 installed, also I installed css-loader 0.26.1

[dbraynard]

I dove into the react-data-grid.js file and commented out the 5 if statements which are hard coded to false:

module.hot.accept("!!./../node_modules/css-loader/index.js!./react-data-grid-row.css", function()

Also, I include the css using import statements. It works now.

[domehead100]

Great. Starting to make a little bit of sense to me now. I'm thinking that since I'm using webpack, I'm just using the prebuilt distribution from npm, which is already built with webpack, and since react-data-grid is using css modules, the styling is already bundled up for me.

But folks that are using Browserify (and jspm I guess) have to build the library themselves from the original source? Sounds like it anyway.

As a note, there is a css modules plugin for Browserify.

For jspm, I played with it briefly in the past and I seem to remember that it had a loader for css modules but you had to append an exclamation point to the file name for it to load the css.

[mischmaesch]

My guess is that browserify-css goes after the require("!!./../node_modules/css-loader/index.js!./react-data-grid-header.css"); in the dist file and tries to resolve it. But since it's not a real file name it fails.

You could try to run browserify-css without the --global-transform (-g) option so it does not descent into your dependencies.

[dbraynard]

@mischmaesch, Thanks, I didn't realize WHY it was happening. So, I am in fact using the global option:

global: true

I am using this feature of browserify-css to allow my js/jsx files to pull in css files from node_modules.

E.g.: import reactDataGridCss1 from '../../node_modules/react-data-grid/dist/react-data-grid-checkbox.css'

[dbraynard]

Will the css files get included in a future npm package release or will the sections of code in the javascripts that reference the css files be removed, such as the folllowing?

if(false) { if(!content.locals) {

             module.hot.accept("!!./../node_modules/css-loader/index.js!./react-data-grid-header.css", function() {

                var newContent = require("!!./../node_modules/css-loader/index.js!./react-data-grid-header.css");

                if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];

                update(newContent);

             });
        }
        // When the module is disposed, remove the <style> tags

        module.hot.dispose(function() { update(); });

    }

[RishiAgar]

@dbraynard So finally, how did you solved the problem, because I cannot remove global: true as its necessary for different packages

[dbraynard]

First, I deleted/commented out the 5 different places in the react-data-grid.js and react-data-grid-addons.js files where there is a if(false) branch that contains the require for the css files and included them as internal javascript libraries in my react project.

Second, I also included in my local react project all of the react-data-drid style sheets and used an index.js to reference them and one other (the ron-react-autocomplete) from node_packages. I use an import statement import * as styles from '../styles/index.js' in my jsx file that consumes the react-data-grid component

Here is the index.js

import reactDataGridCss1 from './react-data-grid-checkbox.css'
import reactDataGridCss2 from './react-data-grid-row.css'
import reactDataGridCss3 from './react-data-grid-cell.css'
import reactDataGridCss4 from './react-data-grid-header.css'
import reactDataGridCss5 from './react-data-grid-core.css'
import reactDataGridCss6 from './react-data-grid-toolbar.css'
import reactDataGridCss7 from './react-data-grid-drop-target.css'
import reactDataGridCss8 from './react-data-grid-image.css'
import reactDataGridCss9 from '../../node_modules/ron-react-autocomplete/lib/css/reactAutoComplete.css'
import reactDataGridCss10 from './daterangepicker-bs3.css'
import reactDataGridCss11 from './react-context-menu.css'

This is a little overkill AND a temporary solution, since I don't want to be internalizing a version of these libraries. My browserify-css agrees with this setup, nonetheless.

I have also posted a question about having browserify pipeline skip over particular files in SO: http://stackoverflow.com/questions/42253145/how-can-i-make-a-browserify-pipeline-skip-browserify-css-for-certain-files What I would like to do is tell browserify a file list of files to not apply the css injections.

[mlvlester]

This error will be fixed in the next release?

[rukshandangalla]

I have the same issue when I run with gulp. Please help

[mlvlester]

@RukshanLakshitha, dbraynard the above suggested solution

[rukshandangalla]

Thanks @mlvlester and yes. I did what @dbraynard suggested. But according to @jpdriver that is not the recommended way of doing it. Have a look at this comment. So do you think that I need to switch to webpack instead of gulp?

[dbraynard]

@RukshanLakshitha, since the issue is unreachable javascript code (due to the if(false)), I would assume that that code could just be left out in a future version--which would allow the browserify-css plugin for browserify to not choke on the react-data-grid and react-data-grid-addons js files.

[jarongao]

I tried to create a fork to get around this issue for multiple environment deployments, but I could not easily get past additional errors after removing css-loader in my fork.

Instead, I created two repositories that have the hot loading sections removed. These should be easier for deployment as a temporary measure until the official repo has removed the sections:

https://github.com/tranquilize/react-data-grid-css-fix https://github.com/tranquilize/react-data-grid-addons-css-fix

In your package.json, change

{
    "react-data-grid": "^2.0.16",
    "react-data-grid-addons": "^2.0.16",
}

To

{
    "react-data-grid": "git@github.com:tranquilize/react-data-grid-css-fix.git",
    "react-data-grid-addons": "git@github.com:tranquilize/react-data-grid-addons-css-fix.git",
}

Note that these are edited versions of 2.0.16 and do not include updates beyond those versions.

[DannyDouglass]

@tranquilize thank you for that workaround! we are moving forward off a fork of you repos, however would love to understand when this fix will be incorporated with the master package.

[zachguo]

Same error in v2.0.24, documentation said default css were included but I didn't find any in my installed package

└─$ tree node_modules/react-data-grid
node_modules/react-data-grid
├── README.md
├── dist
│   ├── react-data-grid.js
│   └── react-data-grid.min.js
├── index.js
└── package.json

1 directory, 5 files

└─$ tree node_modules/react-data-grid-addons/
node_modules/react-data-grid-addons/
├── README.md
├── dist
│   ├── react-data-grid-addons.js
│   └── react-data-grid-addons.min.js
├── index.js
└── package.json

1 directory, 5 files

BTW, can anyone enlighten me what is that cryptic if(false) codes?

[kardysm]

@zachguo These conditions are probably environmental variables' conditions, like if(process.env.NODE_ENV === 'debug'). There are plugins that allow swapping some vars like env with literals during transpiling, so the condition becomes if(' production' === 'debug'), thus always false for end users.

[bovee]

I made a PR (#824) to split the CSS out into its own files during the build process that I think may help with this issue.

[JonathanRosado]

Please fix this

[mgscreativa]

Hi! I'm getting this issue with Meteor 1.4.4.1 and react-data-grid v2.0.49. Any way to fix it?

[wenxuan-xia]

Please fix this. Thanks.

[trcosner]

I got around this by including import ReactDataGrid from 'react-data-grid/dist/react-data-grid.min.js';

instead of import ReactDataGrid from 'react-data-grid';

[nicholaspsmith]

I just copied the code from 'react-data-grid' and 'react-data-grid-addons' to files in my repository, deleted the if(false)... statements that @dbraynard mentioned, and changed my imports to relative imports.

It's not like they ever update this package anyway.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[thomas-shares]

Hi, I am still hitting this problem and we are using JSPM which seems to be related to it. I have deleted the if (false) code, but no luck as of yet. Any other ideas I could try?