Error running "yarn run toolbox"

[rtpm]

Not sure if this is react-toolbox-themr related, but I'm getting error while running "yarn run toolbox"

{ Error: ENOENT: no such file or directory, open 'C:\C:\Users\b\dev\custom-cra\node_modules\react-toolbox\lib\helpers.css' at Error (native) errno: -4058, code: 'ENOENT', syscall: 'open', path: 'C:\C:\Users\b\dev\custom-cra\node_modules\react-toolbox\lib\helpers.css' } { Error: ENOENT: no such file or directory, open 'C:\C:\Users\b\dev\custom-cra\node_modules\react-toolbox\lib\helpers.css'

react-toolbox@2.0.0.beta-4 custom-react-scripts@0.0.21

It generates pubic/react-toolbox/theme.js and theme.css, but I'm getting error when running "yarn start"

Error in ./public/react-toolbox/theme.css Module not found: ../helpers.css in C:\Users\b\dev\custom-cra\public\react-toolbox

@ ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./public/react-toolbox/theme.css 3:10-196

Thanks

[javivelasco]

Are you sure the version is 2.0.0-beta.4? helpers.css was added in that release. Please browse your node_modules/react-toolbox to make it sure!

[rtpm]

Yes, I'm using 2.0.0-beta.4 I can see helpers.css in the 'react-toolbox/lib' directory.

The problem is the path, where windows drive name is doubled 'C:\C:\Users...'

[javivelasco]

Damn, I don't have a Windows OS to try it out. Mabye cross-env?

[javivelasco]

I can't test it, sorry. Sure it's related to resolve.path, may you try out and check the source?

[Rajiv-Kulkarni]

Same here. Also, after I add this line to index.js: import './toolbox/theme.css'; I get this error:

I am trying to recreate the datepicker exmaple from react-slingshot. I made sure react-toolbox is working fine from the project. Thanks.

The folder structure looks like this:

[Rajiv-Kulkarni]

Also, how do I add the ThemeProvider with the existing router Provider? The index.js looks like this: import React from 'react'; import {render} from 'react-dom'; import { Provider } from 'react-redux'; import { Router, browserHistory } from 'react-router'; import routes from './routes'; import configureStore from './store/configureStore'; require('./favicon.ico'); // Tell webpack to load favicon.ico import './styles/styles.scss'; // Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page. import { syncHistoryWithStore } from 'react-router-redux'; import theme from './toolbox/theme'; import ThemeProvider from 'react-toolbox/lib/ThemeProvider'; //import './toolbox/theme.css';

const store = configureStore();

// Create an enhanced history that syncs navigation events with the store const history = syncHistoryWithStore(browserHistory, store);

render( Provider store={store}> Router history={history} routes={routes} /> /Provider>, document.getElementById('app') );

I am omitting the html angle brackets just for display purpose.

[rtpm]

Checked the 1.0.1 version

Running "yarn toolbox" returns

> react-toolbox-themr

{ Error: ENOENT: no such file or directory, open 'C:\C:\Users\b\dev\custom-cra\node_modules\react-toolbox\lib\helpers.css'
    at Error (native)
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\C:\\Users\\b\\dev\\custom-cra\\node_modules\\react-toolbox\\lib\\helpers.css' }
{ Error: ENOENT: no such file or directory, open 'C:\C:\Users\b\dev\custom-cra\node_modules\react-toolbox\lib\helpers.css'
    at Error (native)
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\C:\\Users\\b\\dev\\custom-cra\\node_modules\\react-toolbox\\lib\\helpers.css' }
{ Error: ENOENT: no such file or directory, open 'C:\C:\Users\b\dev\custom-cra\node_modules\react-toolbox\lib\helpers.css

c:/users/b/dev/custom-cra/src/App.js with imports:

import ThemeProvider from 'react-toolbox/lib/ThemeProvider';
import theme from './toolbox/theme.js';
import './toolbox/theme.css';

Running npm start (yarn start)

Failed to compile.

Error in ./src/toolbox/theme.css
Module not found: ../helpers.css in C:\Users\b\dev\custom-cra\src\toolbox

 @ ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/toolbox/theme.css 3:10-196

[javivelasco]

Apparently there is a problem in the way paths are resolved in the package that breaks in Windows. Again, I don't own a Windows machine so I can't try out what I dig. Need help for this :)

@Rajiv-Kulkarni It looks like you are processing the imported CSS with sass-loader. You only need the css-loader because the output CSS is already transformed and ready to be used. Apart from that, you should wrap the RouteProvider with ThemeProvider. It should work.

[Rajiv-Kulkarni]

I am using react-slingshot and it has sass-loader installed already. I am not a webpack savvy, so if someone could let me know how to avoid using sass-loader and use css-loader with css files, would be great. Portion of the webpack looks like this: module: { loaders: [ {test: /.jsx?$/, exclude: /nodemodules/, loaders: ['babel']}, {test: /.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'}, {test: /.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, {test: /.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, {test: /.svg(\?v=\d+.\d+.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, {test: /.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'}, {test: /.ico$/, loader: 'file?name=[name].[ext]'}, **{test: /(.css|.scss)$/, loaders: ['style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name][local][hash:base64:5]!postcss!sass', 'postcss', 'sass?sourceMap']},** {test: /.json$/, loader: "json"} ] },

Thanks and appreciate.

[Rajiv-Kulkarni]

I think I got past the css issue. I added i to the index.ejs (pic below). I am getting this error:

The code looks like this: index.js:

HomePage.js

index.ejs:

Am I doing anything wrong? I get the error when I add the TimePicker markup to the HomePage.js. Thanks.

[Rajiv-Kulkarni]

I get this:

With this code:

How do I get the time picker to display on button click?

[javivelasco]

The import for the TimePicker is import TimePicker from react-toolbox/lib/TimePicker. Maybe that's the issue

[Rajiv-Kulkarni]

I fixed that and getting the results above. Not on button click though. Not sure how you get to display the time picker on button click.

[Rajiv-Kulkarni]

Javi, if I post my project here on github, would you be able to take a look at it and let me know what I am doing wrong? I think I added everything according to the instructions (except for the output property in the package.json which I did not understand). I am running Windows 7 by the way. Thanks.

[Rajiv-Kulkarni]

I guess I am stupid. Beginning to understand what this is about. No need to say "Please ignore me", since I see you folks already have. :) Hopefully will have some intelligent questions next time. Before I do, one more stupid question. If I am able to integrate react-toolbox in my application, I don't need to use the react-toolbox-themr really, is that correct? Thanks.

[javivelasco]

Sorry @Rajiv-Kulkarni, I was keeping myself away from the laptop during Christmas. You can run react-toolbox without this package. The purpose of this is to skip the setup you must add to configure css-modules which is a requirement for react-toolbox.

Internally, we are just requiring CSS so your module bundler needs to support it enable CSS Modules resolution. Without this setup, you can't really use RT in an easy way. This packages allows to skip the whole setup. Take into account that you in RT you can require files in two different ways: requiring css (import from index.js for each component) or requiring the component itself. For this to work you need to use the latter.

I hope you get it working. I'm keeping the issue open because it is actually a bug running in Windows. If you have more doubts try to reach using Discord of in Stackoverflow. I'll be happy to help but I may need some time :)

[mattzuba]

@javivelasco I'm trying to use this utility on Windows and ran into the same issue. I attempted some troubleshooting but wasn't very successful. I don't think the path issue is in your code, I'm inclined to think it might be an issue with postcss, but I'm not sure where. Trying to debug/troubleshoot transpiled code is a pain in the ass, haha. Maybe that helps in trying to track it down, or maybe you're familiar enough with postcss to give me some pointers on where to look in their codebase for how it resolves items like composes: reset from '../helpers.css';

[javivelasco]

@mattzuba I'm going to release a new version without the css modules import. It was just removed because it was troublesome. Can you try it out when it's published?

[mattzuba]

Sure will, can't wait! I've been banging my head against a wall trying to figure out how postcss or one of it's plugins handles :include() statements!

[javivelasco]

I know 😁 It's a well known bug with pathnames in css modules! That's why I removed it in react-toolbox. I need to write a Changelog for the release so I'll try to publish tomorrow, thanks!

[mattzuba]

hey @javivelasco - this issue seems to be fixed with beta.5 of react-toolbox now, thanks! Now there's just issue #11 that is cropping up.

[javivelasco]

Great! That's fixed too :)