I have a react application created with create-react-app using react-data-grid#7. Since canary17 they started to use es2020 modules, to using the more recent builds I have to add support to optional-chaining and nullish-coalescing-operator to the app, otherwise I have errors starting the app.
After a few searchs, I installed customize-cra and react-app-rewired, changed the scripts commands to
"start": "react-app-rewired start"
"build": "react-app-rewired build"
and added this config-overrides.js
const {
override,
addBabelPlugin
} = require("customize-cra");
module.exports = override(
addBabelPlugin("#babel/plugin-proposal-optional-chaining"),
addBabelPlugin("#babel/plugin-proposal-nullish-coalescing-operator"),
);
Trying to run the app I obtain a strange behavior.
using the start command I obtaing the same error, but if I build and the deploy the app works correctly.
If I add something wrong in the config-overrides.js and try to start run start I received an error message, so I think the file is loaded.
Am I missing something?
After a few tests I found the solution changing from
addBabelPlugin("#babel/plugin-proposal-optional-chaining"),
addBabelPlugin("#babel/plugin-proposal-nullish-coalescing-operator"),
to
addExternalBabelPlugin(["#babel/plugin-proposal-optional-chaining", { "loose": false }]),
addExternalBabelPlugin(["#babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }]),
I added the loose parameter too, but it was not the problem. now looks like works both in serve and build
Related
I have created a Create React App application with typescript template build in, then i installed MSW with npm and created files based on MSW install guide.
It's working perfectly for jest, but for browser when im using start script i got a bunch of warnings that are saying:
WARNING in ./node_modules/#mswjs/interceptors/lib/utils/uuid.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '<ROOT_DIR>\node_modules\#mswjs\interceptors\src\utils\uuid.ts' file: Error: ENOENT: no such file or directory, open '<ROOT_DIR>\node_modules\#mswjs\interceptors\src\utils\uuid.ts'
# ./node_modules/#mswjs/interceptors/lib/interceptors/fetch/index.js 167:13-40
# ./node_modules/msw/lib/esm/index.js 12:0-76 1568:14-28
# ./src/mocks/browser.ts 3:0-34 6:22-33
# ./src/index.tsx 8:0-41 10:0-12
and simmilar...
I couldn't find any answers so Im asking you for help.
Update: Issue fixed in msw 0.38.0.
Previous answer:
Are you using react-scripts 5?
Webpack 5 used in that version of react-scripts is clashing with msw somehow.
You have a couple of options for now:
disable source maps by adding a .env file in the root of your project containing GENERATE_SOURCEMAP=false so that you can keep react-scripts 5;
downgrade react-scripts to v4.
More on the github issue posted by kettanaito
Instead of disable source maps you could disable the warnings trough react-app-rewired.
Add react-app-rewired as dev dependency
yarn add -D react-app-rewired
Rename react-scripts into react-app-rewired in package.json start, test and build scripts
Add ignoreWarnings in config-overrides.js at the same level as package.json as documented in source map loader.
// config-overrides.js
module.exports = {
webpack: function (config) {
return { ...config, ignoreWarnings: [/Failed to parse source map/] };
},
};
If you do not want to use react-app-rewired, downgrade to react-scripts v4 or use GENERATE_SOURCEMAP=false you can check my idea. It is ugly but it works.
Create a script like so:
const { readFileSync, writeFileSync } = require("fs");
const path = "node_modules/source-map-loader/dist/utils.js";
const regex = /.*throw new Error\(`Failed to parse source map from '\${sourceURL}' file: \${error}`\);*/;
const text = readFileSync(path, "utf-8");
const newText = text.replace(regex, `buffer="";sourceURL="";`);
writeFileSync(path, newText, "utf-8");
And then add it to your package.json:
"scripts": {
"start": "node removeSourceMapsWarning.js && react-scripts start"
Obviously this code will stop working when source-map-loader changes the error message. But I hope we will a real solution for it by then.
Every time I install a new dependency with npm it's like cutting the read wire and hoping the bomb doesn't go off.
This error keeps coming up now:
[BABEL] React Refresh Babel transform should only be enabled in
development environment. Instead, the environment is: "dev_local". If
you want to override this check, pass {skipEnvCheck: true} as plugin
options.
It's a Gatsby app and I can't figure out how or where to achieve {skipEnvCheck: true} I've tried various things in gatsby-node.js such as:
exports.onCreateWebpackConfig = ({ actions, plugins }) => {
actions.setWebpackConfig({
plugins: [
plugins.define({
skipEnvCheck: true,
}),
],
});
};
But it doesn't help. I have different development .env configs (e.g. this "dev_local" environment) for testing with different settings and I want to keep doing that.
Or am I just chasing ghosts here and really there is some other problem with the dependencies?
I ran into the same error when attempting to deploy a Gatsby app to Heroku. A frustrating rabbit hole ensued, but I eventually narrowed the fix down to using gatsby serve instead of the default gatsby develop for the start script.
In package.json:
"scripts": {
"start": "gatsby serve --port $PORT --host 0.0.0.0",
"build": "gatsby build",
...
},
This answer suggests overriding PUBLIC_URL when running in in development, and is exactly what I need (see immediately below).
{
// ...
"scripts": {
"build": "react-scripts build",
"build-localhost": "PUBLIC_URL=/ react-scripts build"
// ...
}
// ...
}
How do I actually make use of this though? I tried building like this
npm run-script build-localhost
But I got an error saying
'PUBLIC_URL' is not recognized as an internal or external command
The app I'm trying to use this in is a ASP.NET Core 3.1 webapp with React inside, but my React knowledge is very limited. When I start the app in Visual Studio I want it to be running the app with a public URL of '/'.
OP works for linux/mac.
Seems like your dev environment is Windows.
Change package.json like the following:
"build-localhost": "set PUBLIC_URL=/ && react-scripts build"
And then run
$ npm run build-localhost
I'm using craco and craco-alias to implement aliases for imports in my Create React App project.
Followed instructions in https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation and https://github.com/risenforces/craco-alias#readme
I configured package.json to use craco instead of react-scripts for starting dev server, tests and production build
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"lint:css": "stylelint './src/**/*.css'",
"lint:js": "eslint 'src/**/*.js'",
"test:w": "craco test --watch",
"postinstall": "patch-package"
},
...
Then I created jsconfig.json file w aliases paths
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"#components": ["components/*", "components"],
"#constants": ["constants/*", "constants"],
"#assets": ["assets/*", "assets"],
"#store": ["store/*", "store"],
"#utils": ["utils/*", "utils"]
},
"include": ["src"],
"exclude": ["node_modules", "build", "coverage"]
}
And craco.config.js file, which uses craco-alias plugin
/* craco.config.js */
const CracoAlias = require('craco-alias');
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
baseUrl: './src',
source: 'jsconfig',
}
}
]
}
Now I'm using aliases for imports in my app like this
// root index.js file
...
import Layout from '#components/Layout';
import store from '#store'; // this line causes error on CI build
function App() {
return (
<Layout>
/* inner components */
</Layout>
);
}
Everything works fine (aliased imports works on dev-server, in jest tests and even if I serve locally built project) until I push it to github repo. That repo has configured github actions to build and test project on remote server and it fails with error on build step, after installing all packages.
Run yarn build
yarn run v1.22.4
$ craco build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Failed to compile.
./src/index.js
Cannot find module: '#store'. Make sure this package is installed.
You can install this package by running: npm install #store.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
##[error]Process completed with exit code 1.
Could somebody help me understand what wrong with my code? Why craco or webpack expect '#store' to be external package instead of aliased import of internal module?
In my case problem wasn't in craco or webpack, but in my previous actions and OS filesystem differences. I'm using Windows 10 and WSL in VS Code terminal. So before I use '#' symbol for aliases I tried to use CamelCase for my folders and renamed it via windows explorer (because for me it was simpler to close VSCode and rename files via explorer than to open new bash terminal in new VSCode window after closing opened files).
Then I prefer to use '#' symbol and rename folders back to lowercase. I configured aliases and pushed changes to remote github repo, where CI actions were run. When CI was running actions it can't find 'store' folder (because previously I renamed it to 'Store' and it was last saved path to folder in git), so it tried to find external package named 'store'.
To fix this I change git config to stop ignoring namecasing for my folder by running command git config core.ignorecase false. Git history was updated, I push it to remote repo and CI actions succeeded.
I would like to output the results of my jest testing to a file format like JUnit without ejecting from react-scripts.
By using the --json command I can output it to JSON but I was hoping to get a format that Jenkins can process by default.
I cant seem to find if this is supported and I don't want to eject from Create React App, is there another way?
You shouldn't need to do anything fancy. Just install jest-junit and then run with the additional reporters flag:
yarn test --reporters=jest-junit
You can also add it to the jest settings of package.json. Probably something like this:
{
"name": "your-package",
"jest": {
"coverageReporters": ["jest-junit"]
}
}
I was able to do this with npm and the jest-teamcity reporter by modifying the package.json file.
{
...
"scripts": {
...
"test": "cross-env CI=true react-scripts test --env=jsdom --reporters=jest-teamcity",
...
},
...
}