dilanx / craco Goto Github PK

Add a section to customize the CRA paths:

dotenv: resolveOwn('template/.env'),
appPath: resolveApp('.'),
appBuild: resolveOwn('../../build'),
appPublic: resolveOwn('template/public'),
appHtml: resolveOwn('template/public/index.html'),
appIndexJs: resolveModule(resolveOwn, 'template/src/index'),
appPackageJson: resolveOwn('package.json'),
appSrc: resolveOwn('template/src'),
appTsConfig: resolveOwn('template/tsconfig.json'),
yarnLockFile: resolveOwn('template/yarn.lock'),
testsSetup: resolveModule(resolveOwn, 'template/src/setupTests'),
proxySetup: resolveOwn('template/src/setupProxy.js'),
appNodeModules: resolveOwn('node_modules'),
publicUrl: getPublicUrl(resolveOwn('package.json')),
servedPath: getServedPath(resolveOwn('package.json')),
// These properties only exist before ejecting:
ownPath: resolveOwn('.'),
ownNodeModules: resolveOwn('node_modules'),
appTypeDeclarations: resolveOwn('template/src/react-app-env.d.ts'),
ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'),

This came up because when I used "target": "es5", I started getting type errors when I tried to use Array.from ("Property 'from' does not exist on type 'ArrayConstructor'").

I'm using TypeScript, so I think I'd like to set "target": "es6" so that I can use modern JS features and new methods, and have tree shaking, etc. But I also need backwards compatibility for older browsers, so I think I need Babel for ES6 => ES5, and will include babel-polyfill.

I'm new to TypeScript so I'm not sure how all of this fits together (but I have experience with Flow, webpack, and babel.) Apparently another option is to just include core-js, and then set this in my tsconfig.json:

 target: "es5"
 lib: ["es2018"]

Then TypeScript will use the types from the latest ES version, and it just assumes that a polyfill has been loaded in the browser. But I think if TypeScript is emitting ES5 to Webpack then I lose tree shaking. (But not sure)

I would like to please request a new recipe for the TS => ES6 => Babel => ES5 configuration, including a polyfill. I'm not sure how to configure the loaders properly for webpack.

We recently switched from react-scripts v1 to v2. And with that, we now also use craco to rewire some configurations. (Thanks btw. for the awesome package. We used react-app-rewired and the configuration for craco is much nicer and easier to understand!)

Everything works fine so far, except the watch mode of tests in IntelliJ's Jest Run Configuration does not work properly.
The first run passes without any problem, but as soon as a file changes and a new test run is therefor triggered, the src/setupTests.ts file is not loaded again. Meaning that enzyme throws an error since no enzyme adapter is configured any more. (Other packages also throw errors since they are not initialized properly)

When I run the test in the regular terminal with the same configuration that I apply in IntelliJ (e.g. yarn run craco test --env=jsdom --watch), watching works normally and does not throw any errors.

Does anyone know how to fix this? I really do not want to loose the IntelliJ test result reporting since it makes working with tests so much easier.

I'm using [email protected] and [email protected] if that makes any difference.

I am setting PUBLIC_URL on .env.production but it seems that .env* files are not read while building (and overriding) the webpack configuration. Indeed, the configuration of the InterploateHtmlPlugin does not "see" the variables I set on these files, while the message at the end of the build (The project was built assuming it is hosted at /MY_PUBLIC_URL) correctly reports it.
If I add require(resolveConfigFilePath("env.js")); before line https://github.com/sharegate/craco/blob/c4e8dd40aa875fcef02467dac444122bbf241956/packages/craco/lib/cra.js#L20
everything works.
Indeed, the original script react-scripts/scripts/build.js loads the environment before building the configuration (see https://github.com/facebook/create-react-app/blob/45bc6280d109b7e353ffaa497a0352c9d040c36d/packages/react-scripts/scripts/build.js#L22).

Why install craco as dependencies but not devDependencies?

Hi there! Thanks for this library.

I'm wondering if it's possible to use it along with react-scripts-ts, too?

Cheers

Craco is great thanks a lot.

I would like to override create-react-app default ./src/index.js entry point.
It is possible?

Thanks

Hello,

I'd like to use craco with react-cosmos.

There is an example of using react-cosmos + react-app-rewired : https://github.com/react-cosmos/react-cosmos#with-react-app-rewired

What would it take to make craco compatible with it?

Hi there,
I'm using this in craco.config.js

    babel: whenProd(() => ({
      plugins: [...]
    }))

What if I'd like to use a plugin only in development or in both development and production?

How to use whenProd() with whenDev()?

Thank you in advance for your time!
Keep up the good work!

I have tried the following:

module.exports = {
  babel: {
    plugins: [
      'babel-plugin-styled-components',
      'babel-plugin-array-includes'
    ]
  },
  jest: {
    setupFiles: [
      `${__dirname}/setup-test.js`
    ],
  }
};

But the setup-test.js file is never read. any idea if that is possible?

create-react-app@2.1.3 was the last version to use webpack@4.19.1. Since v2.1.4, create-react-app uses webpack@4.28.3.

When using v2.1.4 or above, the following error occurs:

> [email protected] start /home/bernardo/Documents/project
> craco start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.28.3"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /home/bernardo/Documents/project/node_modules/webpack (version: 4.19.1) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /home/bernardo/Documents/project/node_modules/webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `craco start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bernardo/.npm/_logs/2019-03-01T15_23_12_995Z-debug.log

By pinning [email protected] the error is solved, but this should only be a temporary solution while webpack in craco is not updated.

I have problem with craco with my custom react-scripts. The problem occurs only in test script

Long story:
I forked create-react-app and created custom react-scripts (to be able to have multiple entry points by ENTRY env variable). It's done and published as scoped package from this branch https://github.com/dstudzinski/create-react-app/tree/feature/custom-react-scripts
I installed my scoped package @dstudzinski/react-scripts and added --react-scripts param to scripts like:

"test": "craco test --react-scripts node_modules/@dstudzinski/react-scripts",

Craco with my custom scripts works but only for build and start where I inject some additional webpack plugins.
When I try to run npm run test Jest starts and I see the menu but it breaks on each test when I try to run tests:

 Test suite failed to run

    Cannot find module '/absolutepathtoproject/node_modules/react-scripts/config/paths.js'

      at resolveConfigFilePath (node_modules/@craco/craco/lib/cra.js:7:20)
      at Object.<anonymous> (node_modules/@craco/craco/lib/cra.js:20:26)

With single run (not watch mode) it doesn't work too.

When I replace my test script with "test": "react-scripts test" everything works as expected (I don't have modifications for Jest so it works without craco)

Do you have any idea what can be source of the problem?

Here's my config:

module.exports = function({ env, paths }) {
  return {
    babel: {
      plugins: [
        [
          '@babel/plugin-proposal-decorators',
          {
            // https://babeljs.io/blog/2018/09/17/decorators
            // https://github.com/mobxjs/mobx/issues/1352
            legacy: true
          }
        ]
      ]
    }
  };
};

npm test (or ./node_modules/.bin/craco test) results in the following error:

Craco version: 3.2.0
React-Scripts version: 2.1.1

Test file content:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './../App';
import { shallow } from 'enzyme';

const stores = {
};

it('renders without crashing', () => {
  const div = document.createElement('div');
  shallow(<App {...stores}/>, div);
  ReactDOM.unmountComponentAtNode(div);
});

Can you please provide the most simple example to use raw-loader for .frag files using craco ?

Thanks

here is my non working test:

/* craco.config.js */
module.exports = {
  webpack: {
    alias: {},
    plugins: [],
    mode: 'extends',
    configure: { 
      module: {          
        rules: [
          {
            test: /\.frag$/,
            use: 'raw-loader'
          }
        ]
      }, 
    }
  },
}

We are trying to use http://inversify.io/, it uses attribute decorators to inject:

     constructor(@inject(TYPES.Repository) repository) {

     }

but if I try to use mobX configuration (add decorator support), I am still getting:

Module parse failed: Unexpected character '@' (41:21)
You may need an appropriate loader to handle this file type.
| /*#__PURE__*/
| function () {
>   function TestUsage(@inject(TYPES.Test)
|   test) {
|     _classCallCheck(this, TestUsage);

I think this issue is caused by the configuration of webpack in CRA, they are not using ts-loader, but I am not sure.

I would like to check out the webpackConfig, env, and paths values for the configure option but there doesn't seem to be an easy way to see them. I am trying to understand these configurations options and would like to add a resolve plugin so I'm trying to see what is available here...

module.exports = {
  ...,
  configure: ( webpackConfig, { env, paths } ) => {
    console.log( webpackConfig );
  }

After upgrade to 3.1.0, I've started to get this error when I'm running the tests.

FAIL src/Recordings/recordings.model.test.ts
  ● Test suite failed to run

    TypeError: Cannot read property 'isProvided' of undefined

      at log (node_modules/@craco/craco/lib/logger.js:4:17)
      at Object.<anonymous> (node_modules/@craco/craco/lib/paths.js:36:1)
      at Object.<anonymous> (node_modules/@craco/craco/lib/config.js:3:25)

Looking into the source code, you have circular dependencies between loggger.js and args.js, so one of them is resolved to an empty object, resulting in this error.

I'm trying to inject some constants into my app at build time under a global object called config, but no matter where I put my plugin, when I run the app I get 'config' is not defined. What am I doing wrong? Here's my craco.config.js:

const webpack = require('webpack')
const reactHotReloadPlugin = require('craco-plugin-react-hot-reload')

const appConfig = require('./config')

module.exports = {
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        config: JSON.stringify(appConfig),
      })
    ]
  },
  plugins: [
    { plugin: reactHotReloadPlugin }
  ]
}

I receive this error when I try to build the project:

C:\Users\hoang\repos\notesth\node_modules\@craco\craco\lib\config.js:31
                throw new Error(`craco: Malformed plugin at index: ${index} of 'plugins'.`);
                ^

Error: craco: Malformed plugin at index: 1 of 'plugins'.
    at cracoConfig.plugins.forEach (C:\Users\hoang\repos\notesth\node_modules\@craco\craco\lib\config.js:31:23)
    at Array.forEach (<anonymous>)
    at ensureConfigSanity (C:\Users\hoang\repos\notesth\node_modules\@craco\craco\lib\config.js:29:29)
    at loadCracoConfig (C:\Users\hoang\repos\notesth\node_modules\@craco\craco\lib\config.js:57:5)
    at Object.<anonymous> (C:\Users\hoang\repos\notesth\node_modules\@craco\craco\scripts\build.js:16:21)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `craco build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.

Hi, thanks for making craco. I adapted react-app-rewire-hot-loader to a craco plugin and thought if you keep a list of plugins this could be useful for others, too.

Here is my plugin: https://github.com/HasanAyan/craco-plugin-react-hot-reload

We recently moved over to craco from react-app-rewired, in conjunction with ant-design. However the css is applied differently when running locally compared to running the completed build. Below is the contents of the craco.config.js file.
test
const CracoAntDesignPlugin = require('craco-antd');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const WebpackBar = require('webpackbar');
module.exports = {
plugins: [{ plugin: CracoAntDesignPlugin }],
webpack: {
plugins: [
new WebpackBar({ profile: true }),
],
},
};

Is this the correct way to ensure that the ant-d styles will be applied last, or have I missed something?

The error:

$ yarn run dev
yarn run v1.10.1

$ craco start
module.js:549
    throw err;
    ^

Error: Cannot find module 'C:\WebDev\coding-tracker\packages\client\node_modules\react-scripts/config/paths.js'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.resolve (internal/module.js:18:19)
    at resolveConfigFilePath (C:\WebDev\coding-tracker\node_modules\@craco\craco\lib\cra.js:24:20)
    at Object.<anonymous> (C:\WebDev\coding-tracker\node_modules\@craco\craco\lib\cra.js:38:26)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'm using yarn workspaces for a monorepo, so all the node_modules is shared in a single folder. My app has a structrue like this:

coding-tracker/
├── node_modules/
└── packages/
    ├── api/
    ├── shared/
    └── client/

Now the problem is that craco looks for the react-scripts files in coding-tracker/packages/client/node_modules instead of coding-tracker/node_modules

I'm pretty sure that's because process.cwd() would be coding-tracker/packages/client: https://github.com/sharegate/craco/blob/master/packages/craco/lib/paths.js#L4

I made a quick workaround in my case by doing this:

function getReactScriptsFolderPath() {
-   let filepath = "";
+   let filepath = "react-scripts";

-   if (args.reactScripts.isOverrided) {
-       filepath = path.resolve(`${projectRoot}/${args.reactScripts.value}/`);
-   } else {
-       filepath = path.resolve(`${nodeModulesPath}/react-scripts/`);
-   }

    log("Found react scripts folder at: ", filepath);

    return filepath;
}

Hi Guys,

Thanks for writing the package!

We are trying to get this running in our teams, on various environments, but our Linux and Mac users have problems with the line endings.

$ craco build
/usr/bin/env: ‘node\r’: No such file or directory
error Command failed with exit code 127.

Is it possible to have the \r removed?

Thanks!
Cam

Hi,
I need some help trying to override the settings in TerserPlugin to disable mangling. Is this supported currently? I've tried setting up something like this but it doesn't seem to take effect... Not 100% sure I'm doing it correctly.

webpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            mangle: false
...

The configuration I'm trying to modify is here https://github.com/facebook/create-react-app/blob/49e258b4a6d04fb7e3542d7a060c6dcad4093564/packages/react-scripts/config/webpack.config.js#L182

[Bug]Error: Cannot find module './node_modules/react-scripts/config/webpack.config.dev' with react-script v2.1.2

see #61 for more context, which has been closed by the OP but not fixed.

Corresponding PR : #62

Hi,

Thanks for this awesome tool.

Can you please help, setting up linaria . I think we need to modify Webpack loader(Linaria loader should load before babel-loader) but not sure how to do this.

yarn workspaces are currently supported with the CLI command:

craco start --react-scripts ../../../node_modules/react-scripts

It should be more explicit, something like:

craco start --workspace

Cannot find webpack config with react-scripts 2.1.2

I have updated my react-scripts dependencies from 2.1.1 to 2.1.2 and got the following error on both npm start and npm run build:

Error: Cannot find module /node_modules/react-scripts/config/webpack.config.dev'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.resolve (internal/modules/cjs/helpers.js:32:19)
    at resolveConfigFilePath (/node_modules/@craco/craco/lib/cra.js:7:20)
    at getWebpackDevConfigPath (/node_modules/@craco/craco/lib/cra.js:25:12)
    at loadWebpackDevConfig (/node_modules/@craco/craco/lib/cra.js:29:22)
    at Object.<anonymous> (/node_modules/@craco/craco/scripts/start.js:18:26)
    at Module._compile (internal/modules/cjs/loader.js:722:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)

Expect

to start or build my unjected create-react-app.

Result

Can't find the configuration react-scripts/config/webpack.config.dev

Seems obvious: https://github.com/facebook/create-react-app/tree/v2.1.2/packages/react-scripts/config

Version

• Craco: 3.2.3

I don't understand how to translate this code from react-app-rewired to craco:

• config-overrides.js:

const { injectBabelPlugin } = require('react-app-rewired')

module.exports = function override (config, env) {
  config = injectBabelPlugin('graphql-tag', config)
  return config
}

Maybe it's just me but I really don't understand this simply problem.

How to?

Add integration tests that validates if craco is compatible with the latest version of CRA

Hi, i found an issue when i tried to crate webpack alias

i had to use overrideCracoConfig instead of overrideWebpackConfig

more details:

hasanayan/craco-plugin-react-hot-reload@267905a#diff-168726dbe96b3ce427e7fedce31bb0bcR42

hasanayan/craco-plugin-react-hot-reload@41d8e30#diff-168726dbe96b3ce427e7fedce31bb0bcR29

if i used overrideWebpackConfig version directly in craco config, it was working, but in plugin it does not
i will try to inspect problem in few days

Hello,

according to Storybook, it's possible to use our own webpack.config.js (https://storybook.js.org/configurations/custom-webpack-config/#using-your-existing-config) to configure Storybook as well.

How would you wire Storybook and craco to use the same configuration?

The most simple would be to provide the function which computes the craco config into the webpack config?

Something like :

// .storybook/webpack.config.js
const { craco } = require('@craco/craco')
module.exports = craco(require('../craco.config.js'))

Thank you for this great plugin.

I'm trying to implement ant.design library with the latest version of create react app and craco. I manged to implement the babel import loader, but i'm currently stuck add implementing the less loader.

Ant design documentation on how to implement less loader
https://ant.design/docs/react/customize-theme
https://ant.design/docs/react/use-with-create-react-app

My implementation with craco:

module.exports = {
  style: {
    less: {
      loaderOptions: {
        modifyVars: {
          'primary-color': '#1DA57A',
          'link-color': '#1DA57A',
          'border-radius-base': '2px',
         },
       javascriptEnabled: true,
      }
    },
  },
  babel: {
    plugins: [
      ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true}, "ant"],
    ],
  },
}

I think that I misunderstand the documentation on how to add less-loader support with craco. Any help is welcome!

How about supporting load config from .babelrc? thus multiple environments (such as storybook) could use a same rc file.

I am using craco and it works fine with yarn.
However, ever since I tried using pnp (plug n play) mode of yarn, I have started getting the issue:

\Client.pnp.js:21239
throw firstError;
^

Error: Couldn't find a suitable Node resolution for unqualified path "{MyPath}\node_modules\react-scripts\config\env.js"

The issue is that, I cant really give the static path for react scripts (since that is generated by yarn pnp) and thus it is considering that the node_modules would be present in the same directory and fails to compile.

Need to change the appHtml variable, but seems no way to do that.

Not sure if there is an easy way to do this but I tried {eslint: {enable: false}} and {tslint: {enable: false}}.

Here is how I used to do it with rewired:

const EXCLUDED_PLUGINS = ['ForkTsCheckerWebpackPlugin'];
config.plugins = config.plugins.filter(plugin => !EXCLUDED_PLUGINS.includes(plugin.constructor.name));

It seems like there is a problem with the prettier configuration: #4

    sass: {
            mode: "extends",
            loaderOptions: (sassLoaderOptions, { env, paths }) => {
                sassLoaderOptions.sourceMap = true;
                return sassLoaderOptions; 
          }
    }
}

Passing this configuration, and running craco start the compilation fails with the error

throw new Error("craco: 'style.sass.loaderOptions' function didn't return a loader config object.");
Error: craco: 'style.sass.loaderOptions' function didn't return a loader config object.

The babel config override will override the loaderOptions, presets, and plugins for both of the babel-loader rules CRA has.

It seems like the second loader shouldn't receive the presets and plugins by default, since the second loader is meant for:

// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.

I would argue the behavior is unexpected since only files in src/ are supposed to get babel-preset-react-app and previously tools such as react-app-rewired only modified the first loader

See #36 for details

delete

Hi there, and thank you for this plugin!

I'm using [email protected], [email protected], and [email protected] (all latest as of today)

I'm attempting to "un-eject" from CRA for an existing project, so I came upon your plugin. One of the requirements is that we load a set of theme variables based on an environment variable that is passed in at build time. I'd like to use includePaths to direct Sass where to look for these variables, but I'm having a difficult time getting it to compile using my includePaths.

Here's my craco.config.js:

const path = require('path');

module.exports = function({ paths }) {
    const sassIncludePaths = [
        path.resolve(__dirname, `${paths.appSrc}/theme/${process.env.REACT_APP_CLIENT_KEY}/styles`),
        path.resolve(__dirname, `${paths.appSrc}/styles/util`)
    ];

    return {
        style: {
            sass: {
                loaderOptions: {
                    includePaths: sassIncludePaths
                }
            }
        }
    };
};

I may just be reading this wrong, but noticed that on line 56 of sass.js, overrideLoader is called with styleConfig.sass.loaderOptions as its second parameter:
https://github.com/sharegate/craco/blob/master/packages/craco/lib/features/style/sass.js#L56

matches.forEach(x => {
    overrideLoader(x, styleConfig.sass.loaderOptions);
                                    // ^
});

And then within overideLoader, the second parameter gets a loaderOptions property referenced:
https://github.com/sharegate/craco/blob/master/packages/craco/lib/features/style/sass.js#L38

function overrideLoader(match, sassOptions) {
    if (sassOptions.loaderOptions) {
                 // ^
        applyLoaderOptions(match, sassOptions.loaderOptions);
                                           // ^
    }
    ...
}

But sassOptions is loaderOptions, so I'd think the above should really be:

function overrideLoader(match, sassOptions) {
    if (sassOptions) {
        applyLoaderOptions(match, sassOptions);
    }
    ...
}

Or I should change my config to:

{
    style: {
        sass: {
            loaderOptions: {
                loaderOptions: {
                    includePaths: sassIncludePaths
                }
            }
        }
    }
}

When I make the above change to my config, I can see that the webpack config has changed by logging out the config just before the return line in overrideSass.

The problem is that even with the above fix, I still cannot seem to get @import 'color' to work, when _color.scss is a file located in one of the above includePaths. It's currently trying to import node_modules/color/index.js.

Any help would be very much appreciated!