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.
Related
I am trying to create a npm package out of create-react-app typescript template. so far, the build is being generated but while testing it locally via npm install github_username/repo_name#branch_name it installs the package in other testing project, but I am getting this error while trying to run it.
These are the steps
Step 1 created a new react project using npx create-react-app project_name --template typescript
Step 2 Isolated components that I wanted to publish as npm package by creating lib/components inside src and lib/index.ts for exporting them.
Step 3 Installed Babel and build the dist in the root with some babel configuration.
{ "presets": [ [ "#babel/env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1" }, "useBuiltIns": "usage", "corejs": "3.6.5" } ], "#babel/preset-react" ] }
Step 4 In package.json, under scripts, replace the build script with the following:
"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files"
Step 6 npm run build
Step 7 Pushed to GitHub and install from github repo into diffrent react project and then the error came.
I am not really sure what exactly causing this error, but upon checking it seems like babel or webpack error, I tried changing some values inside tsconfig.json and webpack.config.ts (in the package repo) but it didn't solve it, also I am not very familiar with webpack.
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 got a problem with making a React Component npm package. In a component in this package I use an image (import MyPicture from 'path/image.png'). I wanted to export it in as a git npm package so I installed babel to transpile it and it failed on converting png to js so I installed webpack and used image-loader + babel-loader. Everything on npm start works but my IDE (Webstorm) doesn't see the paths after webpack builds. If I build it using babel, the IDE finds the correct paths, but the image isn't transpiled. Anyone got similar problem?
As a reusable component, you need to inline the asset. You need to use a plugin that will embed your image, and have to setup a rule in your webpack config. A common way to do this is with the url-loader, which would convert the image to base64.
{
test: /\.(jpg|png)$/,
use: {
loader: "url-loader",
options: {
limit: 25000,
},
},
},
Important to note that this will also increase your bundle size.
I have a Rails app that uses Webpack to bundle its assets. It doesn't currently use React.
In a separate repository, I have created a React app. This React app basically implements a complex custom UI element. The plan is that I can import this react component into my main application.
So far I have added the git repo to my package.json file and can see that the source code of my react app is being downloaded into the /node_modules folder.
I can get Webpack to bundle the app by adding:
To the React app package.json:
"prepare": "npm run build"
And in my main application webpack.config
module.exports = {
...
resolve: {
...
alias: {
MyReactApp: 'my-react-app/dist/bundle.js'
}
}
}
But it seems to be bundling all the libraries that my React app uses inside bundle.js and not adding them to the dependency tree.
It appears that the prepare command is basically bundling my React app into a /dist/bundle.js file and Webpack is simply including this file as-is. I need Webpack to manage the dependencies of my React app, such that I don't have unnecessary libraries duplicated in the final Webpack output.
Is there a better way to achieve what I am trying to achieve?
It is better to bundle them together. Basically, it is trying to bundle already bundled code.
This may work:
resolve: {
alias: {
MyReactApp: 'my-react-app/index.js'
}
}
index.js should be main jsx starting point.
Additionally, you need to add compile rules for jsx files, I never bundled Rail apps but React apps you should follow these steps;
Add rule to webpack.config.js
module: {
rules: [
{
// this is so that we can compile any React,
// ES6 and above into normal ES5 syntax
test: /\.(js|jsx)$/,
// we do not want anything from node_modules to be compiled
exclude: /node_modules/,
use: ["babel-loader"]
},
...
]
}
Install Babel modules:
npm install #babel/core #babel/node #babel/preset-env #babel/preset-react babel-loader
create a file called .babelrc and paste the following code
{
"presets": ["#babel/env", "#babel/react"],
"plugins": ["#babel/plugin-proposal-class-properties"]
}
Run webpack though babel-node like following script
"webpack": "babel-node ./node_modules/webpack/bin/webpack"
This would be my approach to solve this problem. It will still import react to your project. But instead of adding the compiled project, it will add jsx files and will compile them during the bundling process.
Note:
babel/core this is used to compile ES6 and above into ES5
babel/node this is used so that we can import our plugins and packages inside the webpack.config.js rather than require them
(it’s just something that I like, and maybe you’ll like it too)
babel/preset-env this will determinate which transformations or plugins to use and polyfills (i.e it provides modern
functionality on older browsers that do not natively support it)
based on the browser matrix you want to support
babel/preset-react this is going to compile the React code into ES5 code
babel-loader this is a Webpack helper that transforms your JavaScript dependencies with Babel (i.e. will transform the import
statements into require ones)