i am working on an react app creadted with the "create-react-app my-app --template cra-template-pwa-typescript" command.
Also i am using the material-ui package for the interface.
Now i want to use material-ui through an cdn. so i need to exclude this package via the "externals" config. I am using "react-app-rewired" to override the default config.
But i dont find a proper way to define the externals. found several examples,
for example:
externals = [
//...other externals working fine
/#material-ui\/.*/
]
or
externals = [
"#material-ui/core",
"#material-ui/icons",
/#material-ui\/core\/.*/,
/#material-ui\/icons\/.*/,
}
But when using this method i got an error while compiling
Failed to compile.
Failed to minify the code from this file:
external "#material-ui/core":1
Also tried the solution described here:
https://github.com/mui-org/material-ui/issues/11777#issuecomment-452306347
Here i dont get an error, but the material-ui package didnt excluded and is still bundled.
Related
I created a react app via npx create-react-app my-app and got several compile errors about module support.
I know webpack5 does not support some modules automatically, so I added them manually into the resolve.fallback in webpack.config.js.
While I don't get any more compile errors, I do get another error:
Buffer is not defined
on the browser.
I want to know how to fix it. InAngular, we can edit polyfills.ts like this:
global.Buffer = global.Buffer || require('buffer').Buffer;
But it is not working in React.
I had a similar and I solved it by adding the following to your index.js you will fix the buffer issue:
import * as buffer from 'buffer';
window.Buffer = buffer.Buffer;
This link references was where I found the solution.
https://github.com/isaacs/core-util-is/issues/27#issuecomment-878969583
Describe the bug
In my React Typescript project, I am trying to use CSS modules. I created the project using create-react-app, added TypeScript later. Then I followed the instructions from the docs to setup CSS modules in the project
Added the plugin with npm install -D typescript-plugin-css-modules
Then updated tsconfig.json
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
I tried to run it but it didn't run. It complained about import statement here. Though the plugin docs say it shouldn't
So I added global.d.ts, which resolved the error
Now when I run it, the Home link on the header should be white. But I see the default color
To Reproduce
Go to https://codesandbox.io/s/summer-haze-ztnf6?file=/src/index.tsx
See the Link Home
Expected behavior
Home link color should be white
Since you already solved the issue, please have a look for description: problem in accessing the scss variables in react components
in a similar way you can access classes from the module scss files.
Never mind, changing the name of the scss file to header.module.scss fixed the issue.
I'm trying to locally build the oodt_fm_plugin NPM package and link it locally to the oodt_opsui_sample_app. However, when I'm trying to do that, the following error is thrown in the browser.
Error: Minified React error #321; visit
https://reactjs.org/docs/error-decoder.html?invariant=321 for the full
message or use the non-minified dev environment for full errors and
additional helpful warnings.
The error goes away if I remove the withStyles HOC from the components in oodt_fm_plugin, but I want to preserve it for the material UI styles.
React components in the oodt_fm_plugin have been exported as follows. ( This plugin can be viewed at https://github.com/apache/oodt/tree/development/react-components/oodt_fm_plugin. )
export default withStyles(styles)(Product);
What I tried to overcome this are as follows, but none of those solved the issue.
Making react and react-dom packages in the plugin, dev dependencies
Adding the following snippet to the webpack.config.js of the plugin.
resolve: {
modules: [path.resolve('node_modules'), 'node_modules'],
},
Can someone point me in the right direction so that I can set up both oodt_fm_plugin and oodt_ui_sample_app correctly in local dev environment? Helpful advice is highly appreciated.
Well, I finally managed to solve the problem, after trying for several days. As I found out, it was not a problem with material ui, but with the Create React App. This Github issue comment helped me to solve my problem.
For extra clarity, I will quote the issue comment in this answer itself, so that it will remain here even if the comment gets deleted.
^ Ok, the solution I went for to solve this for create-react-app is to
use react-app-rewired and customize-cra.
Here is my config-overrides.js :
const {
override,
addWebpackAlias, } = require("customize-cra");
const path = require('path');
module.exports = override(
addWebpackAlias({
react: path.resolve('./node_modules/react')
}) )
Example project: https://github.com/dwjohnston/material-ui-hooks-issue/tree/master
Then, modify the start script as follows.
"start": "react-app-rewired start"
I'm trying to use PrimeReact components on a Next.js project but I'm getting an error when I try to import the core css styles as shows in their documentation (https://www.primefaces.org/primereact/#/setup), I have used these components with a create-react-app project, but this time I'm having the following error:
Next js error
I'm using "#zeit/next-sass" and "node-sass" to work with SASS files, I read that is required to create a "webpack.config.js" to manually apply the right loaders but the problem persist (I'm not a webpack expert), I was wondering if someone can give me a hint of what I'm missing.
Thank you in advance.
I am using parcel with typescript and out the box everything just works,
Now when I try to include svg it didn't work,
This is because I needed to change in typescript
declare module "*.svg"
This allows me to now compile my typescript.
Now the other thing that doesn't work is now I want to import my SVG component
and just use it like create-react-app 2
Import Icon from "./icon.svg"
function DisplayIcon(){
return <Icon/>
}
So this looked straightforward
https://www.npmjs.com/package/#svgr/parcel-plugin-svgr
yarn install and I get Can't resolve
<Typescript file>:<Line>:<Column>: Cannot resolve dependency './icon.svg' at '<Icon Location>'
So I think maybe it's the plugin and I try to use
https://www.npmjs.com/package/parcel-plugin-inlinesvg
I get the same issue.
What is it that I am missing?
I see some people have .babelrc files but the plugins should just work out the box atleast that is what the documentation says.
Using plugins in Parcel could not be any simpler. All you need to do
is install and save them in your package.json. Plugins should be named
with the prefix parcel-plugin- or #your-scope/parcel-plugin-, e.g.
parcel-plugin-foo or #your-scope/parcel-plugin-foo. Any dependencies
listed in package.json with these prefixes will automatically be
loaded during initialization.
It seems like the plugins boot, but nothing works.
Without the plugins I get the file in my public path with a string to it in my JavaScript runtime.
What am I missing and what am I doing wrong?