So, it's nice that we can have more features with this module, but how can we add our own features to it?

Doesn't look good having to bother you for every feature we want introduced.

When REACT_APP_SASS=true, the CSS is embedded in the JS file rather than output as a separate CSS file. I guess ExtractTextPlugin.extract is missing for the Sass loader?

I suppose this is a bit strange request for eject feature in repo which suppose to prevent eject, but reporting it in case you are not aware.

Trying to get to work this thing react-toolbox/react-toolbox-example#35. I want to eject to try to fix it on ejected version and then come up with some solution without eject.

Description

npm run eject

npm start
> [email protected] start /Users/**/my/react-toolbox-example
> node scripts/start.js

module.js:440
    throw err;
    ^

Error: Cannot find module './get-custom-config'
    at Function.Module._resolveFilename (module.js:438:15)
    at Function.Module._load (module.js:386:25)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/**/my/react-toolbox-example/config/webpack.config.dev.js:11:23)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/**/my/react-toolbox-example/scripts/start.js:20:14)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)

npm ERR! Darwin 15.6.0
npm ERR! argv "/opt/nodes/6.1.0/bin/node" "/opt/boxen/nodenv/versions/6.1.0/bin/npm" "start"
npm ERR! node v6.1.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node scripts/start.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node scripts/start.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-toolbox-example package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/start.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs react-toolbox-example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls react-toolbox-example
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/**/my/react-toolbox-example/npm-debug.log

Previously I created a web project by create-react-app myapp --scripts-version custom-react-scripts with decorator enabled, and pushed it to git, then I cloned this project to another computer, and tried to compile it,

npm install
npm start

but it fails with the following errors:

Error in ./src/stores/CounterStore.js
Syntax error: Unexpected token (6:2)

  4 |
   5 | export default class CounterStore {
> 6 |   @observable count = 0;
    |   ^
  7 |
  8 |   @action increment() {
  9 |   	this.count++;

I would like an option that would allow you to use CSS Modules + LESS/SASS preprocessor. The loader example is shown here on the react-css-modules repo.
https://github.com/gajus/react-css-modules#sass-scss-less-and-other-css-preprocessors

Other than adding REACT_APP_SASS=true to the .env file, what other steps are required to get SASS working? Here's what I've tried:

1. Renaming App.css to App.scss and changed the import to match
2. Installed various babel loader modules: sass-loader, style-loader, css-loader, postcss-loader, node-sass

I feel like I'm missing something obvious here...

Thx

Current release version of react-scripts is 0.8.1. But its config files look much different than yours. Which version of react-scripts is this based on?

Please add the forked version to the README.

I think it would be cool to implement babel-plugin-react-css-modules. This would allow us to use styleName with CSS modules in our React components. I can try out a PR if you'd like?

Is it possible to use "custom-react-scripts" on an existing app created by create-react-app? Or do I have to use create-react-app my-app --scripts-version custom-react-scripts to scaffold a new app?
By the way I found your lib by reading your Medium article "Configure create-react-app without ejecting". Very nice article 👍 Thanks.

.env is not checked to git, i think it's better to set the customization in the package.json. It would make the projects generated by this easier to share. thoughts?

How would I do it without asking you for example? I want to have latest versions of both.

Latest react-scripts is 0.8.4

Also please outline all the files that you have modified/added for giving us this custom setup.

Of course, it is for our knowledge. Thank you very much @kitze

Would it be more convenient to add src/ to the includePaths of the SASS loader?

So we can include files in a separate path without counting how many '../' we should have.

@import 'scss/base/buttons.scss';

Rather than:

@import '../../../scss/base/buttons.scss';

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes

Description

react-scripts introduced a bug in which Jest will auto-mock files in different directories.

I am assuming the latest version of custom-react-scripts relies on react-scripts 0.8.0, because I'm experiencing this issue with it.

Upgrading to 0.8.1 should fix it :)

Expected behavior

The functions should be imported properly, so that they can be genuinely tested.

Actual behavior

The functions imported are replaced with a string that reads 'test-file-stub`

After this issue has been fixed in CRA, the name of the binary can be react-scripts again.

For now the npm module doesn't work.

Hi, with the original create-react-app, I can build global css files into my bundle js like this:
import 'font-awesome/css/font-awesome.css
Then I switched to custom-react-scripts since I want to use css modules inside my react components, it works great. However, it also breaks the global css import as showed above.
Is there anyway I can use both of them? thanks

I need this feature to have out of the box integration with react-toolbox. See react-toolbox/react-toolbox-example#35

The question is if we have:

REACT_APP_SASS=true
REACT_APP_CSS_MODULES=true

Does it always mean we want CSSModules for SASS? I suppose yes

So we can use React Hot Loader.

Hello there,

Thanks for such a brilliant work you did so far by implementing CSS-Modules and other CSS pre-processors.

I was wondering if it would be possible to implement the svg-react-loader to handle .svg files on JavaScript.

For me it's a no brainer and it makes life much easier to manipulate and customise SVGs as a React component.

So everything does work fine when I add REACT_APP_SASS=true or REACT_APP_LESS=true to my .env config, but is it possible to extend the module loaders however I want for custom configs?

For example, it looks like you're using https://github.com/webpack-contrib/less-loader for LESS, is it possible for me to somehow add in my own lessPlugins (http://lesscss.org/usage/#plugins) I want to use or possible Sourcemaps options?

Is there any plans to implement support react-intl. Adding React-Intl is not a really big deal. You can easily do an npm install to add react-intl. The problem is to build message files I am using babel-plugin-react-intl. The babel plugin needs to update the .babelrc file. I am not able to get to the .babelrc file without ejecting. So, I am hoping for a better solution.

Thanks.

This would add a link to this repo from the npmjs.com page and make it easier to get here. Otherwise we need to search for your username.

Trying to use react-toolbox in React app created by create-react-app with custom-react-scripts but no styles are applied. Here is an app that does not work.

Result looks like

Changing custom-react-scripts/config/customizers.js this way fixes the problem but I don't expect this to be proper solution. I'm new to webpack and stuff around it.

From

loader: "style!css!postcss!sass"

to (see example for react-toolbox)

loader: "style!css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass"

Is this problem of the customizer or am I doing something wrong?

Find a better way to implement webpack-dashboard in react-scripts.

Hi,
this isn't a bug as such...
I'm trying to get this to work with react-toolbox, which uses both sass and css-modules.
my .env

REACT_APP_SASS=true
REACT_APP_LESS=false
REACT_APP_STYLUS=false
REACT_APP_CSS_MODULES=true

This amounts to errors in react-toolboxes imports which suggests that their scss files aren't being compiled :

Error in ./~/react-toolbox/lib/link/theme.scss
Module parse failed: /Users/stephenwhite/Documents/Projects/telenor/cc20/c3m-fe/node_modules/react-toolbox/lib/link/theme.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)
 @ ./~/react-toolbox/lib/link/index.js 14:13-36

So my question is if I enable sass will it compile all the stuff in node modules or do I need to enable another flag to achieve this?
Cheers,
Stephen.

I generally use sass (like many people do), so it'd be great to include

/(\.scss|\.sass)$/
on the customezers file

Just wondering how I can enable jsx-control-statements or if it is something you can add in too.

Thanks,

Hi. This is a great project. Thanks for creating it.

Do you have roadmap? And do you have plans to add FlowType support?

Want to replace propTypes with Flow.

Also looking for something similar to typed-css-modules for Flow and CSSModules.

Description

This is probably pretty lame and obvious thing that I'm missing, but still can't figure out.

Expected behavior

I created app with custom scripts, copied App.scss from this repo, added REACT_APP_SASS=true to env. Run npm start and got error:

Failed to compile.

Error in ./src/App.scss
Module parse failed: /Users/.../my/my-app — scripts-version/src/App.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
 @ ./src/App.js 18:0-21

Actual behavior

It should compile scss files.

Environment

➜ npm ls react-scripts
[email protected] /Users/x/my/my-app — scripts-version
└── [email protected]
➜ node -v
v6.1.0
➜ npm -v
3.8.6

1. Operating system: Mac OS X
2. Browser and version: Chrome

Reproducible Demo

https://github.com/stereobooster/test-custom-react-scripts

Hello! I'm trying to use your fork. But everytime I've got an error when npm install dependencies:

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/user/.nvm/versions/node/v6.6.0/bin/node" "/Users/user/.nvm/versions/node/v6.6.0/bin/npm" "install"
npm ERR! node v6.6.0
npm ERR! npm  v3.10.8

npm ERR! Path must be a string. Received undefined
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/user/Projects/lim/front/npm-debug.log

I've tried two ways:
At first I've created app from scratch:

create-react-app my-app --scripts-version custom-react-scripts

At second times I've done

create-react-app my-app

and then change devDependencies

from

"react-scripts": "0.6.0"

to

"custom-react-scripts": "0.0.14"

And everytime I've got same error.
I have

• node v6.6.6
• npm v3.10.8

Thanks and best wishes!

Is there support for postcss here? In particular autoprefixer/cssnext and stylelint?

Sometimes when running an app, create-react-app is asking "Would you like to run the app on another port instead? [Y/n]" and the webpack-dashboard just appears over this.

It should wait until the error messages/questions are done and then show when everything is fine.

Thanks for the work (I need Sass).

I wonder if it is possible to update a project based on CRA with your custom script. I understand that we can use it only while creating a new app.

How do you feel about allowing custom babel and webpack configs? It looks like we can add this pretty easy after seeing this PR. NextJS did something similar, there is some good info about it in this thread. Facebook Incubator sounds like they won't even consider it until late 2017 😕

steps to reproduce:

$ create-react-app my-app --scripts-version custom-react-scripts
$ cd my-app
$ yarn test

result:

 FAIL  src/App.test.js
  ● Test suite failed to run

    /my-app/src/App.less:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.App {
                                                                                             ^
    SyntaxError: Unexpected token .
    SyntaxError: Unexpected token .

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:316:10)
      at Object.<anonymous> (src/App.js:5:286)
      at Object.<anonymous> (src/App.test.js:3:38)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.416s
Ran all test suites.

Watch Usage
 › Press p to filter by a filename regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

Can we have plugable customizer? I mean developer add one file that return customizers:

module.exports = [
    {
        toPath: 'resolve',
        getDev: function () {
            return {
                alias: {
                    src: path.resolve(__dirname, '../src'),
                },
            }
        },
    },
    {
        toArray: 'loaders',
        fileRegex: /\.(scss|sass)/,
        getDev: function () {
            return {
                test: /(\.scss|\.sass)$/,
                loader: "style!css?sourceMap&camelCase!postcss!sass"
            }
        },
        getProd: function () {
            return {
                test: /(\.scss|\.sass)$/,
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap&camelCase!postcss!sass')
            }
        }
    }];

May I know is it in your development scope to add Relay support? Specifically support babel-plugin-react-relay package by adding RELAY=true to .env file, to allow writing code like:

Relay.QL`/** some GraphQL queries **/`

I have tried to modify your customizers.js to achieve this and it works great. I would love to submit a pull request to your project as it is under great maintenance from you and is always on par with the newest react-scripts. May I know what do you think? :)

I installing create-react-app my-app --scripts-version custom-react-scripts, but it's fail

How to fix it?

I suppose I'm not the only one who finds Webpack configuration hard to maintain.

Configurations are not portable/sharable: there is no (good) way to pack configs in modules and reuse across a project. I want to be able to do something like install module webpack-sass-config and it will work out of the box with reasonable defaults (Convention over configuration).

As of now default way to share code across projects is copy/paste. Including this project which patches initial webpack (and this is error prone and hard to maintain).

I know this is problem of webpack not this repo, but this problem is big part of this project which is why I'm creating issue here. Maybe we can come up with reasonable solution.

There are some projects which tried to solve this:

• https://github.com/mdreizin/webpack-config by @mdreizin
• https://github.com/jakubbabiak/webpack-configurator by @jakubbabiak
• https://github.com/lewie9021/webpack-configurator by @lewie9021

related: facebook#670

I've been trying to get REACT_APP_CSS_MODULES=true to work with react-css-modules but I'm missing something. Is there an example anywhere I could check out?

I'm trying to use Sass Globbing for file imports but this doesn't seem to be supported.
My Sass file:

// Common and Base Styles
@import 'common/breakpoints';
@import 'common/fonts';
@import 'common/colors';
@import 'common/typography';
@import 'common/font-icons';
@import 'common/icons';
@import 'common/base';

// Libraries and plugins
@import 'libs/normalize';
@import 'libs/flexboxgrid';

// Atoms
@import 'atoms/**/*';

// Molecules
@import 'molecules/**/*';

// Organisms
@import 'organisms/**/*';

// Templates
@import 'templates/**/*';

// Pages
@import 'pages/**/*';

// Helper Classes
@import 'common/helpers';

Error

Failed to compile.

Error in ./src/styles/main.scss
Module build failed: 
@import 'atoms/**/*';
^
      File to import not found or unreadable: atoms/**/*
Parent style sheet: stdin
      in /PROJECT_PATH/src/styles/main.scss (line 15, column 1)
Error: 
@import 'atoms/**/*';
^
      File to import not found or unreadable: atoms/**/*
Parent style sheet: stdin
      in /PROJECT_PATH/src/styles/main.scss (line 15, column 1)
 @ ./src/styles/main.scss 4:14-166 13:2-17:4 14:20-172

Howdy,

What do you think about adding the root folder as a qualified search location for imports? That way we could write something like:

import myComponent from 'src/components/myComponent';

instead of

import myComponent from '../../../../../../components/myComponent';

I believe all you would need to do is add the root property to the resolve section of the Webpack config.

...
resolve: {
    root: path.resolve('.'), // <--- This line here.
    fallback: paths.nodePaths,
    extensions: ['.js', '.json', '.jsx', ''],
   ...
}
...

I just want to configure a few eslint options :)

Description

The basic Jest test fails, stumbling upon Less/Sass code.

Expected behavior

Test should pass - it's the default one, after all.

Actual behavior

Project paths were changed for brevity.

  ● Test suite failed to run

    /var/project/src/styles/consolidator.less:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import "_variables";
                                                                                             ^
    SyntaxError: Invalid or unexpected token
      
      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:316:10)
      at Object.<anonymous> (src/screens/Screen1.jsx:6:27)

The default application generated also fails with this message:

    /var/my-app/src/App.less:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.App {

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): didn't eject
2. node -v: 6.9.1
3. npm -v: 3.10.8

Then, specify:

1. Operating system: Linux Mint 18 Sarah
2. Browser and version: CLI

Reproducible Demo

It seems the default installation already breaks tests.

The jest tests are currently failing if Babel stage-0 or decorators are used.

I'm trying to create a new project with:

create-react-app myapp --scripts-version custom-react-scripts

and the following .env file (in root of project):

REACT_APP_SASS=true
REACT_APP_LESS=false
REACT_APP_STYLUS=false
REACT_APP_CSS_MODULES=true

In my component I then try to import a .scss file but it is not creating the styles object correctly and I am getting no styles. e.g.

import style from './style.scss';
console.log(style);

   ... className={style.label} ...

I'm using version 1.0.3 of create-react-app, is this the problem? do I need to use an older version? Or what could be the issue?

Thanks, and great project!

Hi,

I am trying to use grommet in custom-react-scripts. On their site they suggest to modify the Webpack configuration for the loaders as the following:

module: {
  loaders: [
    {
      test: /\.js/,
      exclude: /node_modules/,
      loaders: ['babel']
    },
    {
     test: /\.scss$/,
     loader: 'style!css!sass?outputStyle=compressed'
    }
  ]
},
sassLoader: {
  includePaths: [
    './node_modules',
    // this is required only for NPM < 3.
    // Dependencies are flat in NPM 3+ so pointing to
    // the internal grommet/node_modules folder is not needed
    './node_modules/grommet/node_modules'
  ]
}

How do I do that?

Thanks!

I think this would make sense.