Webpack keeps saying "Imported module is undefined" - reactjs

So I have this routes.ts file where I've stored all the routes of my React app that I created with create-react-app. The routes get imported whenever I need to insert some route-related data.
tl;dr Webpack has no issue with a module elsewhere but says it's undefined at one spot.
Here's all the information you need to help me out 🙂
routes.ts
import { Route, PageName } from ".";
...
const routes: Record<PageName, Route> = {
landing: {
PATH: "/landing",
BASENAME: "landing",
TITLE: env.app.NAME,
Page: Landing,
},
...
}
Works fine everywhere else but here:
navbar-utils.ts
import { routes } from "../../config";
...
const navItems: NavItem[] = [
{
text: "Home",
icon: faHome,
to: routes.landing.PATH,
},
...
]
There is where Webpack loses it and keeps telling me that _config__WEBPACK_IMPORTED_MODULE_0__.routes is undefined.

Related

React + Rollup - 'r is not defined'

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

Nexus & GraphQL: Root typing path for the type "context" does not exist

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",
},
});

How to keep params with react-router v4?

I have a React/Redux Universal application and I have recently added i18next to add internalization to my website.
In my react-router config, I have edited my routes:
const routes = [
{
component: App,
routes: [
{ path: '/:lng(fr|en)?/', exact: true, component: Home },
{ path: '/:lng?/about', component: About },
…
{ component: NotFound }
]
}
];
Everything works well, but I don't know how to keep the lng paramaters between my pages. Indeed, when I use <Link to="/about" >, I logically lost my params.
So, how to keep this parameter?
Thanks

How to include browserHistory using ReactRouter in non-node app?

was experimenting with react and was replacing hashHistory with browserHostory. The application is a static application running on apache server and not on node. Have used the libraries for React, Reaact-dom, ReactRouter and created js pages for various routes. The replaced code doesn't seem working and on console got the message Uncaught ReferenceError: browserHistory is not defined . Below is he code for the same ? I want to replace hash history with browserHistory.
<script type="text/javascript">
var destination = document.querySelector("#container");
var { Router, Route, IndexRoute, IndexLink, Link } = ReactRouter;
ReactDOM.render(React.createElement(Router,{ history : browserHistory },React.createElement(
Route,{ path: "/", component: App },
React.createElement(IndexRoute, { component: Home }),
React.createElement(Route, { path: "/stuff", component: Stuff }),
React.createElement(Route, { path: "/contact", component: Contact }),
React.createElement(Route, { path: "/event", component: Event }),
React.createElement(Route, { path: "/search", component: Search }),
React.createElement(Route, { path: "/fetch", component: Fetch }),
React.createElement(Route, { path: "/socket", component: Socket }),
React.createElement(Route, { path: "/form", component: Form })
)
), destination);
</script>
If used node.js then could have imported the browserHistory, but here I am using react-router library in the html page. How to overcome this issue ?
You need to import browserHistory too.
var { Router, Route, IndexRoute, IndexLink, Link, browserHistory } = ReactRouter;

React Router / Hapi Server Side Rendering Error

I've been struggling this for a while, and previously had this working, but inexplicably, it's broken again, so clearly the root cause has not been resolved.
React Router v: 2.0.0-rc4
Issue: When loading a page, server returns the following error.
Warning: Failed propType: Required prop `router` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `location` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `routes` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `params` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `components` was not specified in `RouterContext`.
Warning: [react-router] `<RouterContext>` expects a `router` rather than a `history`
The page loads normally though, and client side routing seems to work just fine.
relevant snippet from Server.js:
import routeConfig from './../common/routes/Routes.js';
const handleRender = function(req, res) {
const initialState = {
profile: {
name: 'Bob',
age: 10
},
messages: []
}
const createStoreWithMiddleware = applyMiddleware( thunkMiddleware)(createStore);
const store = createStoreWithMiddleware(reducer(initialState));
match({routes: routeConfig, location: req.url}, (error, redirectLocation, renderProps) => {
// res(req.url);
if(error) {
res('error' + error.message);
}
else {
res(renderProps);
const html = renderToString(
<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>
);
//const initialState = store.getState();
//res(renderFullPage(html, initialState));
}
});
}
Here is what is exported from Routes.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Route } from 'react-router';
//Components
import App from './../components/App.jsx';
import Name from './../components/Name.jsx';
import Profile from './../components/Profile.jsx';
import Messages from './../components/Messages.jsx';
const routeConfig = [
{
path: '/',
component: App,
childRoutes: [
{path: 'test', component: Name},
{path: 'profile', component: Profile},
{path: 'messages', component: Messages}
]
}
];
export default routeConfig;
When I dump out renderprops, this is what I get
{
routes: [
{
path: "/",
childRoutes: [
{
path: "test"
},
{
path: "profile"
},
{
path: "messages"
}
]
},
{
path: "test"
}
],
params: { },
location: {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: null,
query: { },
pathname: "/test",
path: "/test",
href: "/test"
},
components: [
null,
null
],
history: {
__v2_compatible__: true
},
router: {
__v2_compatible__: true
}
}
So it seems like it's never matching components. Perhaps I'm passing in req.url incorrectly? But I can't find any react-router documentation that indicates exactly what that argument should look like.
Leaving this here in case anyone else runs into something this silly.
After enabling more robust error logging via Good, I realized that this error was actually in reference to a request to /favicon.ico, which my routes were not handling, and which were falling down into my react routes.
Very dumb mistake on my part, and due to my inexperience with needing to handle/log errors in Hapi.
If you, like me, came here following the reactjs react-router-tutorial on Github (if not, go check it out), these error messages might show because you haven't described any alternatives to finding a route in the Routes'. If it only shows up on undefined routes (try typing something random after localhost:8080/), do yourself a favour and read this to the end.
Also, insert a console.log('req.url: ', req.url) in the app.get call in the server to see what is causing the error.
Also II: Declare appHTML outside of the match function to ensure it survives into res.send().

Resources