Support for Create React App 2
benatespina opened this issue · 4 comments
Hi everyone!
I'm trying to use the next branch of Create React App (future version 2). Everything works great except this plugin. I don't understand why, but for example, the following configuration does not generate any changes in the CRA's Webpack configuration, when in the actual version of CRA works like a charm.
require('react-app-rewire-postcss')(config, {
plugins: () => [
require('postcss-strip-inline-comments')(),
require('postcss-preset-env')({
stage: 2,
features: {
'nesting-rules': true,
'custom-selectors': true
}
}),
]
});
I'm trying to debug the plugin and comparing the two versions webpack.config.dev.js
files but I don't understand what is the problem.
Thanks in advance.
Thanks for the detailed heads up. This is probably what #3 intended to warn me about.
I’ll look into this. I haven’t any idea what the issue is yet, either.
A few things I’ve noticed.
- The current npm branch is still 1x. https://www.npmjs.com/package/create-react-app
- React App Rewired is in a period of transition affecting a 2.0 compatible release. timarney/react-app-rewired#162 (comment)
Therefore, 2.0 compatibility my be out of my control.
-
Would you point me to other plugins that do work with 2.0? If so, I will look through their code to see how they’ve properly integrated with the
next
release. -
Could you setup a small git project recreating the issue?
Yeah, I know.
But there are plenty plugins that they are still working, for example:
- react-app-rewire-eslint
- react-app-rewire-stylelint
If you check the webpack.config.dev.js
file from master and next branches, the config related with css files is the same. I'm trying to debugging your plugin source code but I don't find any bug related with the issue.
You can test easily creating a new CRA and changing the package.json with something similar.
{
"name": "app",
"private": true,
"dependencies": {
"react": "^16.4.2",
"react-app-rewire-eslint": "^0.2.3",
"react-app-rewire-postcss": "^1.0.2",
"react-app-rewire-stylelint": "git://github.com/Ehres/react-app-rewire-stylelint.git#7353bcbee648a1a32b99f47968d572fefd0022ca",
"react-app-rewired": "^2.0.0",
"react-dom": "^16.4.2",
"react-scripts": "2.0.0-next.a671462c"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "7.0.0-beta.46",
"@babel/plugin-proposal-decorators": "7.0.0-beta.46",
"postcss-preset-env": "^5.3.0",
"postcss-strip-inline-comments": "^0.1.5",
"stylelint": "^9.5.0",
"stylelint-order": "^0.8.1",
"stylelint-selector-bem-pattern": "^2.0.0",
"stylelint-webpack-plugin": "^0.10.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
}
}
And config-overrides.js
const rewireEsLint = require('react-app-rewire-eslint');
const rewireStyleLint = require('react-app-rewire-stylelint');
const rewirePostCssLoader = require('react-app-rewire-postcss');
const postcssPresetEnv = require('postcss-preset-env');
const stripInlineComments = require('postcss-strip-inline-comments');
const {injectBabelPlugin} = require('react-app-rewired');
const path = require('path');
const fs = require('fs');
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = (config, env) => {
config = rewireEsLint(config, env);
config = rewireStyleLint.withLoaderOptions({files: 'src/**/*.css'})(config, env);
config = injectBabelPlugin(['@babel/plugin-proposal-decorators', {legacy: true}], config);
config = injectBabelPlugin(['@babel/plugin-proposal-class-properties', {loose: false}], config);
config = rewirePostCssLoader(config, {
plugins: () => [
stripInlineComments(),
postcssPresetEnv({
stage: 2,
features: {
'nesting-rules': true,
'custom-selectors': true
}
}),
]
});
return config;
};
I have not been able to figure this out. I would need help.