Currently when I try to use any sort of Zustand state, even from the docs, I get an error saying Missing "./react" export in "zustand" package. I am using Vite and TypeScript.
const bears = useBearStore((state) => state.bears);
useEffect(() => {
console.log(bears);
}, []);
Here is my vite.config.ts
import { defineConfig } from 'vite';
import react from '#vitejs/plugin-react';
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: [{ find: '#', replacement: path.resolve(__dirname, 'src') }],
},
});
Check your import. It should be:
import create from 'zustand';
Related
Final edit: Thanks everyone for your help, however ultimately it was easier for me to transition to Webpack and Storybook. I'm leaving my original question untouched just in case it helps anyone in the future. Also, if anyone stumbles upon any issues configuring these (like I did), the link to the GitHub repo is below.
I'm creating a small lib using React and Rollup and trying to test locally with a CRA-powered project, however I'm facing this issue when importing a component from my library. I don't know if the problem is in my configuration or if this is a bug.
Uncaught ReferenceError: r is not defined
at Object.../dist/bundle.js (index.jsx:44)
Imported "Message" component where the error is happening
import React, { useEffect, useState } from 'react';
import { string, number, arrayOf } from 'prop-types';
import Container from './Container';
function Message({
text,
type,
timeout,
classes,
}) {
const [show, setShow] = useState(false);
useEffect(() => {
if (text && type) {
setShow(true);
setTimeout(() => setShow(false), timeout);
}
}, [text, type]);
const date = new Date();
return (
<Container
id={`message-${date}`}
key={`message-${date}`}
className={`${type}${classes?.map((className) => ` ${className}`)}`}
>
{
show
? (
<p>{text}</p>
) : ''
}
</Container>
);
}
// The source map points to this line when the error happens, but it still happens if I remove it and don't use prop-types, instead pointing to the closing bracket of the 'Message' function
Message.defaultProps = {
timeout: 3000,
classes: [],
};
Message.propTypes = {
text: string.isRequired,
type: string.isRequired,
timeout: number,
classes: arrayOf(string),
};
export default Message;
Test component where it's being used:
import React from 'react';
import { Message } from 'pure-ui';
import { getRandomArrayElement } from 'formatadores';
const types = [
'warning',
'error',
'success',
];
const texts = [
'This is a test',
'I will randomly display a message every so often, so stay sharp',
'Yet another test message',
];
const timeouts = [
5000,
3000,
1000,
];
function App() {
return (
<div>
<h1>Running...</h1>
<Message
type={getRandomArrayElement(types)}
text={getRandomArrayElement(texts)}
timeout={getRandomArrayElement(timeouts)}
/>
</div>
);
}
export default App;
rollup config file:
import babel from '#rollup/plugin-babel';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import React from 'react';
import propTypes from 'prop-types';
const extensions = ['.js', '.jsx', '.ts', '.tsx'];
export default [
{
input: 'src/index.js',
watch: true,
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
globals: {
react: 'React',
'react-dom': 'ReactDOM',
'prop-types': 'PropTypes',
},
},
plugins: [
external(),
babel({
exclude: 'node_modules/**',
presets: [
'#babel/preset-env',
['#babel/preset-react', { runtime: 'automatic' }],
],
}),
resolve({ extensions }),
commonjs({
namedExports: {
react: Object.keys(React),
'react/jsx-runtime': ['jsx', 'jsxs', 'Fragment'],
'react/jsx-dev-runtime': ['jsx', 'jsxs', 'jsxDEV'],
'prop-types': Object.keys(propTypes),
},
}),
],
external: [
'react',
'react-dom',
'prop-types',
],
},
];
I tried changing the namedExports (and also removing them), linking React from the lib to use the same version from the CRA project (in the lib both React and React DOM are listed as peer dependencies), but I always end with the same result. Is there something wrong with my config? This is the first time I use Rollup for creating a React component lib, so maybe there's something I missed
If the above info is insufficient, here's the GitHub repo
Thanks in advance
Edit: I just saw that I forgot to import React in my test project, however after doing so the results were the same, editing my original question just to fix that.
Update 1: I changed several configurations (changed deprecated rollup-plugins to their currently maintained versions, added globals to the output part of rollup.config.js, added namedExports to commonjs plugin configuration, added an external section specifying react, react-dom and prop-types), but now what I'm getting is a React is not defined error, updating the question with the new config
I am trying to run graphql in Next.js API routes.
I am using nexus to write the graphql schema. This is the two files context.ts and schema.ts file for setting up nexus development mode.
// context.ts
import { database } from "../loaders/database";
import { PrismaClient } from "#prisma/client";
export interface Context {
database: PrismaClient;
}
export const context: Context = {
database,
};
// schema.ts
import { makeSchema } from "nexus";
import { nexusPrisma } from "nexus-plugin-prisma";
import { join } from "path";
import * as types from "./types";
export const schema = makeSchema({
types,
plugins: [
nexusPrisma({
prismaClient: (ctx) => ctx.database,
experimentalCRUD: true,
}),
],
outputs: {
schema: join(__dirname, "generated", "schema.graphql"),
typegen: join(__dirname, "generated", "nexus-typegen.ts"),
},
contextType: {
module: join(__dirname, "context.ts"),
export: "Context",
}
});
I searched online and the closet I found is here where they used sourceTypes to solve the issue. I tried it but the error doesn't go away.
I used the following script to generate the schema and types for graphql.
{
"scripts": {
"generate:nexus": "ts-node --transpile-only -P nexus.tsconfig.json src/server/graphql/schema.ts",
}
}
It's giving the following error though the code is compiled successfully.
event - build page: /api/graphql
event - compiled successfully
Error: Root typing path "/mnt/B49635D3963596B8/Web/Web/react/next/nextjs-starter/.next/server/pages/api/context.ts" for the type "context" does not exist
at Object.resolveImportPath (/mnt/B49635D3963596B8/Web/Web/react/next/nextjs-starter/node_modules/nexus/dist/utils.js:411:15)
at TypegenPrinter.printDynamicImport (/mnt/B49635D3963596B8/Web/Web/react/next/nextjs-starter/node_modules/nexus/dist/typegenPrinter.js:132:40)
at TypegenPrinter.printHeaders (/mnt/B49635D3963596B8/Web/Web/react/next/nextjs-starter/node_modules/nexus/dist/typegenPrinter.js:80:18)
at TypegenPrinter.print (/mnt/B49635D3963596B8/Web/Web/react/next/nextjs-starter/node_modules/nexus/dist/typegenPrinter.js:69:22)
at TypegenMetadata.<anonymous> (/mnt/B49635D3963596B8/Web/Web/react/next/nextjs-starter/node_modules/nexus/dist/typegenMetadata.js:109:128)
at Generator.next (<anonymous>)
at fulfilled (/mnt/B49635D3963596B8/Web/Web/react/next/nextjs-starter/node_modules/tslib/tslib.js:114:62)
Can anyone please help me where I am doing wrong?
Thanks!
After some debugging, I finally found the solution.
First of all, the nexus documentation has a part for next.js users which is a must-read for all. link.
I have to replace the __dirname with the process.cwd(). The problem is finally solved.
// schema.ts
import { makeSchema } from "nexus";
import { nexusPrisma } from "nexus-plugin-prisma";
import { join } from "path";
import * as types from "./types";
export const schema = makeSchema({
types,
plugins: [
nexusPrisma({
prismaClient: (ctx) => ctx.database,
experimentalCRUD: true,
}),
],
outputs: {
schema: join(process.cwd(), "src/server/graphql/generated/schema.graphql"),
typegen: join(process.cwd(), "src/server/graphql/generated/nexus-typegen.ts"),
},
contextType: {
module: join(process.cwd(), "src/server/graphql/context.ts"),
export: "Context",
},
});
Here is my rollup config
// rollup.config.js
const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
module.exports = {
rollup(config, _options) {
config.plugins.push(
postcss({
plugins: [
autoprefixer(),
],
extensions: ['.css'],
modules: false,
extract: false,
}),
);
return config;
},
};
So if I import css file local from a relative path, it gets injected but I import from node_modules it doesn't
import React from 'react';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// The following works if I copy the file locally
// import './ReactToastify.css';
What am I doing wrong here?
I came across exactly the same problem and I think I found the solution. The trick here is to use rollup-plugin-postcss (or also rollup-plugin-styles) in combination with #rollup/plugin-node-resolve.
My rollup.config.js looks something like this:
import { nodeResolve } from '#rollup/plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
// import styles from 'rollup-plugin-styles'
export default {
...
plugins: [
postcss(),
// styles(),
nodeResolve({
extensions: ['.css']
})
]
};
As far as I can tell, for my simple case, it doesn't matter if you use postcss or styles plugins. Both work the same.
Currently building a React project with ViteJs, which uses TailwindCSS & PostCSS.
I would like the tailwind classnames to be obfuscated in the production build. Like object-cover to a2. Also, I am not aiming for minification.
I have tried looking for solutions but no luck.
Here is the postcss config:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
with the following code I managed to replace the classnames only in the css file, i can't find a way to replace it in the javascript as well, hope to find some solution soon.
vite.config.js
import {defineConfig} from 'vite'
import react from '#vitejs/plugin-react'
import {createHtmlPlugin} from "vite-plugin-html";
import postcssRename from "postcss-rename";
import tailwindcss from "tailwindcss";
export default async ({mode}) => {
return defineConfig({
plugins: [
react(),
createHtmlPlugin({
minify: true,
}),
],
css: {
postcss: {
plugins: [
tailwindcss(('./tailwind.config.cjs')),
postcssRename({
strategy: (input)=>{
return random(6)
},
outputMapCallback: function (map) {
console.log(JSON.stringify(map));
}
})
]
}
},
server: {
host: '0.0.0.0',
port: 9000
}
});
};
function random(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
Fairly new to rollup and have come across this problem. I've googled but I can't seem to find an answer but I am fairly sure it is due to the rollup config.
What I am trying to do
I have a React library I created that uses (among others) styled-components, including a number of components that extend other components created using styled-components via .withComponent.
Code example
Badge.js: -
import styled from "styled-components"
const Badge = styled.span`
...
`
export default Badge
Button.js: -
import Badge from "#my/library/Badge"
import styled from "styled-components"
export const Button = styled(Badge.withComponent("button"))`
...
`
rollup.config.js: -
import multiEntry from "rollup-plugin-multi-entry"
import babel from "rollup-plugin-babel"
export default {
input: __dirname + "/src/*.js",
plugins: [
babel({}),
multiEntry()
],
output: {
dir: __dirname + "/lib/",
format: "esm",
},
preserveModules: true,
external: ["#my/library", "styled-components"],
}
babel.config.js: -
module.exports = {
presets: [
'#babel/preset-env',
'#babel/preset-react',
],
plugins: [
"#babel/plugin-proposal-class-properties",
"babel-plugin-styled-components"
],
};
rollup produces the following code: -
Badge.js: -
import { taggedTemplateLiteral as _taggedTemplateLiteral } from './_virtual/_rollupPluginBabelHelpers.js';
import styled from 'styled-components';
function _templateObject() {
var data = _taggedTemplateLiteral([
...
]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var Badge = styled.span(_templateObject(), function (props) {
...
});
Button.js: -
import styled from 'styled-components';
import Badge from '#my/library/Badge';
var Button = styled(Badge.withComponent("button"))(_templateObject(), function (props) {
...
});
The problem
When running webpack on my app, I get the following error message: -
var Button = (0, _styledComponents["default"])(_Badge["default"].withComponent("button"))(_templateObject(), function (props) {
^
TypeError: _Badge.default.withComponent is not a function
I have no idea why this is happening. I thought that having styled-components listed as an external would resolve this but it hasn't. Again, I am new to rollup. Any help greatly appreciated.
I don't know rollup but you can try with the new syntax of styled-components with prop as
https://www.styled-components.com/docs/api#as-polymorphic-prop
import Badge from "#my/library/Badge"
import styled from "styled-components"
export const Button = styled(Badge).attrs({
as: "button"
})`
...
`
You have to make sure that your component Badge is a styled-components. If not, you could transform it with styled.
https://www.styled-components.com/docs/basics#styling-any-component
if it doesn't help , try to add style-components in globals of output in config rollup
const globals = {
react: 'React',
'styled-components': 'styled',
}