I have installed a new package ('react-router-dom') and now my project doesn't start.
I get this warning:
How can I resolve this problem?
Thanks for the help!
the current version (don't support webpack4) of this package does not work with html-webpack-plugin v4
Please refer this issue
or
you can try yarn add preload-webpack-plugin#3.0.0-beta.3
If the above method doesn't works:
If you ejected from create-react-app and are getting this error upon yarn build, make sure the InterpolateHtmlPlugin line comes after the HtmlWebpackPlugin line in your webpack config file(s):
module.exports = {
//...
plugins: [
new HtmlWebpackPlugin({
// ...
}),
new InterpolateHtmlPlugin(env.raw),
//..
]
}
Related
I need to build shareable React component which could be used across apps.
For this, I was/am following the below article
https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The folder structure looks the same as below
rollup.config.js
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "#rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
const packageJson = require("./package.json");
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
},
];
npm script
"rollup": "rollup -c"
However when I run npm run rollup this throws the below error
[!] Error: Could not resolve entry module (dist/esm/types/index.d.ts).
Error: Could not resolve entry module (dist/esm/types/index.d.ts)
Please suggest. Thanks!
I also ran into the same problem you are experiencing when working with rollup. After spending some while digging for the solution, I finally got to solve this problem.
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The exception you have stated is actually the problem. The problem lies in package versioning. The package #rollup/plugin-typescript versions later than 8.3.3 are not generating nor storing the declaration files in the types folder expected to be at the path: dist/cjs/ and dist/esm/.
The latest version at this point in time is 8.5.0 which still breaks. Hopefully it is fixed in near future.
Steps to fix your error
Make sure your tsconfig.json file has "declarationDir": "types" to direct the bundler's typescript plugin to create and store declaration files in the types folder when you run npm run rollup
Uninstall the existing #rollup/plugin-typescript package version by running npm un #rollup/plugin-typescript --save-dev
Install #rollup/plugin-typescript with the command npm i #rollup/plugin-typescript#8.3.3 --save-dev. As you see, we are picking a specific version.
If you still encounter problems:
Manually update the package.json file like: "#rollup/plugin-typescript": "8.3.3". Note that I have removed the caret(^) symbol to tie the package to version 8.3.3.
Delete the node_modules folder. You could use the command rm -rf node_modules.
Delete package-lock.json.
Run npm i to install the packages again with versions specified in package.json
Here's an working answer for people coming from 2023 that doesn't lock you to an outdated version of #rollup/plugin-typescript:
Preconditions: Make sure that you get rid off your package-lock.json and your node_modules directory so that you can start from a clean slate and install your project again.
run npm install tslib --save-dev
add "type": "module" to package.json
in tsconfig.json, add "rootDir": "src"
in rollup.config.js, change plugins: [dts()] to plugins: [dts.default()]
back in package.json, add --bundleConfigAsCjs as a parameter to the rollup command in scripts
After that you should be able to continue with the tutorial and be able to create a new build via npm run rollup.
I fixed the error of 'Could not resolve entry module (dist/esm/index.d.ts)'.
I tried removing types, downgrading react to match the version in the tutorial but none worked.
I found this comment on the tutorial which was helpful: https://dev.to/nasheomirro/comment/239nj
I got rid of main and common js set up in both rollup config and package json.
i changed the packagejson variable to import packageJson from "./package.json" assert { type: "json" };
added types back into the input in the rollup config
Set "#rollup/plugin-typescript" to be version "8.3.3" as mentioned above.
I now have a Dist folder with an ESM folder and didn't get any errors.
I have a React Native app that I generated using Expo. And when I installed react-native-reanimated, it gave me this error. Do I have to configure something else with it?
Add babel plugin for react-native-reanimated to your babel.config.js as documented expo's official page:
module.exports = {
...
plugins: [
'react-native-reanimated/plugin',
'#babel/plugin-proposal-export-namespace-from',
'react-native-reanimated/plugin',
],
};
Simply, include the plugin in babel.config.js of the react native project as
#babel/plugin-proposal-export-namespace-from,
react-native-reanimated/plugin,
The full code of babel.config.js is:
plugins: [
'#babel/plugin-proposal-export-namespace-from',
'react-native-reanimated/plugin',
]
This works correctly for the react native application running on web.
react-native-web seems to only work with "react-native-reanimated": "2.9.1". Expo when upgrading will install "~2.12.0". This breaks web implementation. Downgrading reanimated was the only way I found to fix it.
yarn add react-native-reanimated#2.9.1
or
npm i react-native-reanimated#2.9.1
Install react native reanimated
expo install react-native-reanimated
I've been using storybook within the React application that I'm working in, and I'm facing some difficulty switching to the new preset. As seen below, storybook has given me a warning about the preset, when I run the following script.
npm run build-storybook
WARN Storybook support for Create React App is now a separate preset.
WARN To use the new preset, install #storybook/preset-create-react-app and add it to the list of addons in your .storybook/main.js config file.
WARN The built-in preset has been disabled in Storybook 6.0.
The main issue is that the react application is utilizing Craco to override the default react configuration. However Craco is also preventing storybook from building via npm run build-storybook when #storybook/preset-create-react-app is added.
This is my storybook main.js file
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx|mdx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/preset-scss",
"storybook-addon-designs",
"#storybook/preset-create-react-app",
],
"framework": "#storybook/react",
}
and this is my craco config file
const cracoGraphqlLoader = require("craco-graphql-loader");
const {whenDev} = require('#craco/craco')
module.exports = {
plugins: [{ plugin: cracoGraphqlLoader }],
webpack:{
configure: (webpackConfig) =>{
webpackConfig.devtool = whenDev(()=>"eval-source-map")
return webpackConfig
}
},
};
I've already looked at the npm package storybook-preset-craco, but I cannot add it due to the scale and security of the react application I'm working in.
For using Storybook with Creat React App (CRA) with Craco I install this specific preset:
https://www.npmjs.com/package/storybook-preset-craco
Reviewing the code of the addon, it is based on the official Storybook preset for CRA but with the necessary adjustments to make it work for Craco. I have used it in various applications.
Following the documentation, this is the way to be used:
First, install this preset to your project.
# npm
npm install -D storybook-preset-craco
or
# yarn
yarn add -D storybook-preset-craco
Once installed, add this preset to the appropriate file:
./.storybook/main.js
module.exports = {
addons: ["storybook-preset-craco"],
};
Note: Don't forget to comment or remove the #storybook/preset-create-react-app from addons.
It also requires extra configuration if used in conjunction with the Docs Addon or you need to specify the path of the craco.config.js. You will find that information in the README.md of the addon.
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.
I have started to play with react and soemhow get stucked.
I have following code: github.com/gandra/my-lara-react-app
When I runn following code on the command-line:
npm install
webpack --config webpack.config.js
I expect to find file ./dist/bundle.js but this not happens.
Any idea why?
The file mentioned in the question, webpack.config.js contains a typo wntry, which should have been entry, i.e.
module.exports = {
entry: ['./app/main.js'],
...
}