I'm a beginner web developer who is working on their first project with Next.js. I have hit an error with getting SVGs to load into my project as SVGs and could use some help finding the cause of it. Following online guides, I installed SVGR and updated my next.config.js file to this:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ["#svgr/webpack"],
});
return config;
},
};
I then imported my SVG file into my component as a component (following the SVGR guide I was using):
import Pizza from "/images/icons/pizza.svg";
Which causes this error to pop up:
./pages/index.js:2:0
Module not found: Can't resolve '/images/icons/pizza.svg'
1 | import Image from "next/image";
> 2 | import Pizza from "/images/icons/pizza.svg";
I've spent the last day trying different fixes to similar issues I've found online but nothing seems to work. Can anyone spot why SVGR isn't working for me? Apologies if it's something super obvious. I appreciate any help or insight!
Related
In app.js:
import iconSet from 'quasar/icon-set/fontawesome-v6'
import '#quasar/extras/fontawesome-v6/fontawesome-v6.css'
and:
setup({el, app, props, plugin}) {
return createApp({render: () => h(app, props)})
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(PrimeVue)
.use(Quasar,{iconSet: iconSet,})
.mount(el);
},
In template:
<q-btn color="yellow" glossy text-color="black" push label="First" icon="fabAngular"/>
The icon prop is not woking, it writes the name of icon instead of rendering it.
Anyone any idea what I am doing wrong?
I have tried it with different icon sets, but neither seems working. Icons are not rendering, only their names is written out.
In render.js I have
import { Grid } from 'ag-grid-community';
import { tableMethods } from './table.js';
I created my own custom table methods and decided to try ag-grid since mine aren't as fast as theirs (no surprise). Unfortunately, while I could get my own methods loading from my js file by setting
<script type="module" src="render.js"></script>
I cannot get ag-grid to load, I get this error
Uncaught TypeError: Failed to resolve module specifier "ag-grid-community". Relative references must start with either "/", "./", or "../".
I used npm i ag-grid-community -D to install it. I wasn't sure if I needed the -D, so I tried without that and it still shows same error.
*Note - of course I've tried doing what the error message says. But it didn't resolve and the documentation doesn't mention anything about this.
I was able to get this working by adding following before my render.js file
<script src="ag-grid-community.js"></script>
I also disabled type=module once I realized this is probably the intended way to split up rendering scripts, or at least that was my guess.
I am facing issue in testing where My logger is in lambda layer thus non-existing for nodeJs import in lambda.js during mocha-chai testing. I tried mock-fs but getting errors Can not find module /opt/logger.js or maybe I am trying wrong way and not sure if it is useful in this way. Please check below code for reference. Any help or suggestion is most welcome.
lambda.js -
const logger = require('/opt/logger.js') // coming from lambda_layer.js
lambda.test.js -
mock({
"/opt/logger.js": console.log('hello')
});
Was able to accomplish this with mockery. Thanks for allowing me to put this here for everyone. Will update this with better code soon.
mockery.registerMock({'/test/': { destroyAllHumans: actionStub })
mockery.enabled();
I'm giving a try with [react-native-crypto][1] in order to learn how to convert nodejs to be used in React Native project in the future. Unfortunately, I couldn't get it running successfully. I've faced an issue with stream is undefined. ERROR TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[0], "stream").Transform.call').
If you have ever faced a similar problem, I'm so grateful for your help.
Also, I attach the screenshot of the issue as the following
For anyone still trying to solve this issue, I have figured out a solution that worked for me. So within node_modules/cipher-base/index.js, the top of the file should have a line which defines the variable Transform as var Transform = require('stream').Transform. For some reason, it does not like the module stream and as such it needs to be changed to readable-stream. Therefore the variable Transform should now read var Transform = require('readable-stream').Transform.
From what I have gathered, the stream module it is trying to refer to isnt actually a module that can be used. The reason why it gets referenced however seems to be because the tsconfig.json file in the root directory specifies "stream": ["./node_modules/readable-stream"] as a path, almost as if to make stream refer to the readable-stream module, which in theory it should refer to when it is called. But in this case it doesnt happen so we need to explicitly define that we are refering to the readable-stream module.
Hope this helps anyone else out there and prevents others scratching their heads for hours on end like it did for me!
I have figured it out by editing in metro.config.js as the following:
resolver: {
extraNodeModules: {
stream: require.resolve('stream-browserify'),
}
},
I have installed angular universal on my app.
Running npm run build:ssr - DONE. WORKS.
Running npm run server:ssr - DONE.WORKS.
After accessing the server URL (localhost:4000), the page is not fully loaded and the following error is raised on the Terminal:
I also faced the same problem, so I would just like to share my findings for the same.
For me, there were two plausible causes/solutions for it:
First, in my project's I18N default JSON file that was en.json, I was having a problem In the structure of the JSON file.
For example, I had the below mistake. I missed the comma after the second label 'FINISH' :
{
"COMMON": {
"EDIT": "Edit",
"FINISH": "Finish"
"QUIT": "Quit",
}
}
So after correcting the structure, the application ran fine without an error.
Secondly, another cause of the issue could be, at runtime transloco was not able to find the correct label in the selected language, so it looked for a fallback language and it could not even find that in the transloco-root.module.ts so after adding my fallback language, it tried to find the same in the fallback language as specified in the transloco-root.module.ts.
So it found out that label and the issue got resolved.
BUT in the second solution provided, you need to have that incorrect label in at least that fallback language's json file in correct format.
I added the fallback language like below:
useValue: translocoConfig({
availableLangs: ['fr', 'en'],
defaultLang: 'en',
reRenderOnLangChange: true,
fallbackLang: 'fr',
prodMode: environment.production,
missingHandler: {
logMissingKey: true
}
})
i18n Transloco wasn't fully configured on the module file.