gatsby build is always failing on this line List.name='List' of reactstrap. I tried different solutions but not helpful.
- reactstrap version 9.0.1
- gatsby version ^3.14.4
- bootstrap version 5
Have you tried adding a null loader to bypass SSR?
exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => {
actions.setWebpackConfig({
module: {
rules: [
{
test: /reactstrap/,
use: loaders.null(),
},
],
},
})
}
Change reactstrap for the exact folder name in node_modules.
Related
My code looks like this:
import DrawIcon from "frontend/public/svgs/draw.svg";
export default function SomeIcon(): JSX.Element {
return <SvgIcon component={DrawIcon}/>
}
For some reason, whenever I use the component prop, the app renders a blank page and I get no errors.
I'm trying to use SVGR as shown in the MUI documentation.
I'm making a Next.js app so I added this to my next.config.js file:
webpack: (config) => {
config.module.rules.push({
test: /\.svg$/,
issuer: /\.[jt]sx?$/,
use: ['#svgr/webpack'],
});
return config;
},
And installed SVGR using npm install #svgr/webpack --save-dev.
I can't figure out why this happens or how to fix it.
My Next.js React app tests pass locally, but fail in Github Actions.
The next.config.js has this export to know about svg imports:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ['#svgr/webpack'],
});
return config;
},
};
Then I've got some SVG icons, and I import them into the app like:
import StatusMessageErrorIcon from '../../../public/icons/Status-message-error.svg';
<StatusMessageErrorIcon fill="red" width="18" height="18" />
Everything works, the icon is shown.
Then I've got a test which renders the page with that icon, render(<Create />);
The test runs through locally, everything passes.
But running the test in a Github Action it fails with:
Test suite failed to run
src/MyForm.tsx:11:36 - error TS2307: Cannot find module '../../../public/icons/Status-message-error.svg' or its corresponding type declarations.
11 import StatusMessageErrorIcon from '../../../public/icons/Status-message-error.svg';
The Github Action is very basic:
steps:
- uses: actions/checkout#v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Install npm packages
run: npm ci
- name: Run tests
run: npm run test
I don't get it, any ideas?
Right, In my case it had to do with Typescript and importing SVG into a .tsx file.
If anyone else has this problem, here's how to fix it.
Create a custom.d.ts file (at root level is fine) with the contents:
declare module '*.svg' {
const content: any;
export default content;
}
Then in tsconfig.json add this file to the include array like so:
{
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"custom.d.ts"
]
}
You need to do some webpack config for the image path from public dir.
Example:
const srcPath = path.join(__dirname, '..', 'publicfolder')
const rules = []
const includePaths = [
srcPath
]
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
include: includePaths,
issuer: /\.[jt]sx?$/,
use: ['#svgr/webpack'],
});
return config;
},
};
After this, you can simply import the images into your react components:
import myImage from 'publicfolder/images/Image1.png'
Use myImage like below:
<div><img src={myImage}/></div>
or if the image is imported into the local state of the component
<div><img src={this.state.myImage}/></div>
I'm working with the module-federation/nextjs-mf webpack plugin, which allow us to work with micro-frontned architecture.
According with the official documentation and based on this example, we can share components between the remote and host app.
The above example works great using only out of the box nextjs code.
Actually I'm trying to achieve this, a host app and n remote apps all of them using:
NextJS
module-federation/nextjs-mf plugin
TypeScript
As you can see I'm working with more than 2 nextjs apps, the remotes apps can share components successfully, but, the host app is breaking due to this error:
Its implementation:
import dynamic from "next/dynamic"
const NextRemoteComponent = dynamic(
() => import("remote_finances/next-remote-component"),
{ ssr: false }
)
Unlike the rest of the apps, this host app is using a "different" next.config.js configuration:
module.exports = {
webpack5: true,
webpack(config, options) {
const { webpack, isServer } = options;
config.experiments = { topLevelAwait: true };
config.module.rules.push({
test: /_app.js/,
loader: '#module-federation/nextjs-mf/lib/federation-loader.js',
});
config.plugins.push(
new webpack.container.ModuleFederationPlugin({
remotes: {
remote_finances: "remote_finances#http://localhost:8081/_next/static/chunks/remoteEntry.js",
remote: 'remote#http://localhost:8081/_next/static/chunks/remoteEntry.js',
},
shared: {
react: {
singleton: true,
eager: true,
requiredVersion: false,
},
},
}),
);
return config;
},
// nextJS config
reactStrictMode: true,
experimental: {
outputStandalone: true
},
env: {
BASE_URL : `https://qa-core-api.nordhen.com`,
},
};
I tryed almost everthing, changed and tryed many .eslintrc-.eslintrc.json configurations, packages, and don't know exactly if it's due to:
Typescript
Lint
Webpack
If you need any extra information about the code or its implementation you can ask.
Thanks for your time, I appreciate it.
Try to bypass eslint (and if you are using vs code) with this two lines.
It worked for me.
import dynamic from "next/dynamic"
const NextRemoteComponent = dynamic(
// #ts-ignore
// eslint-disable-next-line
() => import("remote_finances/next-remote-component"),
{ ssr: false }
)
Does anyone know how to fix this issue Gatsby with react-spring-3d-carousel:
import Carousel from "react-spring-3d-carousel"
and
<Carousel slides={slides} goToSlide={selectedSlide} />.
I looked in the docs but still appears error: window is not defined
gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-spring-3d-carousel/,
use: loaders.null(),
},
],
},
})
}
}
Any help would be greatly appreciated
For others that may be facing similar issues, not only related to react-spring-3d-carousel: if adding a null loader to the SSR transpilation doesn't work, the other possible workaround is adding a loadable component, which in fact, what is doing is to perform a code-splitting in the server-side.
import loadable from "#loadable/component";
const Carousel = loadable(() => import("react-spring-3d-carousel"))
I'm trying to add Storybook to an existing React app but getting errors with imported svg files. The svg is imported and used like:
import Border from './images/border.inline.svg'
...
<Border className="card__border" />
This works when the app is run and built, but I get an error in Storybook. How come?
Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/border.inline.258eb86a.svg') is not a valid name.
Error: Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/border.inline.258eb86a.svg') is not a valid name.
The default webpack.config.js has:
...
{
test: /\.inline.svg$/,
loader: 'svg-react-loader'
},
...
Also, the existing code uses webpack 3, and I'm using Storybook V4.
This is happening because Storybook's default webpack config has its own svg config:
{
test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/,
loader: 'file-loader',
query: { name: 'static/media/[name].[hash:8].[ext]' }
},
I'm pretty sure this is the cause, because you can see the path outlined in error message: query: { name: 'static/media/[name].[hash:8].[ext]' } -> static/media/border.inline.258eb86a.svg
The solution can be to find the existing loader & change / or add an exclude rule to it. Here's an example of a custom .storybook/webpack.config.js:
// storybook 4
module.exports = (_, _, config) => {
// storybook 5
module.exports = ({ config }) => {
const rules = config.module.rules;
// modify storybook's file-loader rule to avoid conflicts with your inline svg
const fileLoaderRule = rules.find(rule => rule.test.test('.svg'));
fileLoaderRule.exclude = /\.inline.svg$/;
rules.push({
test: /\.inline.svg$/,
...
}],
});
return config;
};
It appears that Storybook V6 they have changed the default Webpack config. I found that the above answers didn't work for me.
They no longer have an SVG rule, therefore testing for SVG will either error or return back undefined.
There is a oneOf rule on the module.rules which contains a loader without a test as the last rule:
{
loader: '/Users/alexwiley/Work/OneUp/resources/client/node_modules/react-scripts/node_modules/file-loader/dist/cjs.js',
exclude: [Array],
options: [Object]
}
This is the culprit, you need to make sure that the file load is excluding all inline SVG file otherwise it will error.
Add the following to your .storybook/main.js file:
webpackFinal: async(config, { configType }) => {
config.module.rules.forEach((rule) => {
if (rule.oneOf) {
// Iterate over the oneOf array and look for the file loader
rule.oneOf.forEach((oneOfRule) => {
if (oneOfRule.loader && oneOfRule.loader.test('file-loader')) {
// Exclude the inline SVGs from the file loader
oneOfRule.exclude.push(/\.inline\.svg$/);
}
});
// Push your SVG loader onto the end of the oneOf array
rule.oneOf.push({
test: /\.inline\.svg$/,
exclude: /node_modules/,
loader: 'svg-react-loader', // use whatever SVG loader you need
});
}
});
return config;
}
In Storybook 6, You have to import it like this:
import { ReactComponent as Border } from './images/border.inline.svg'
Try that if it also works for your version since this question is from a year ago.
This is another way that fixed the issue for me
import Border from './images/border.inline.svg'
And then in your code
<img src={Border} alt="Border" className="w-25"/>
I got it working with
...
module.exports = {
module: {
rules: [
{
test: /\.inline.svg$/,
loader: 'svg-react-loader'
}
]
}
}
For me it was happening as I was using wrong tag name:
import React from 'react';
import RMDBLogo from '../../images/react-movie-logo.svg';
import TMDBLogo from '../../images/tmdb_logo.svg';
import { Wrapper, Content,LogoImg,TMDBLogoImg } from './Header.styles';
const Header = () => (
<Wrapper>
<Content>
<LogoImg src={RMDBLogo} alt='RMDBLogo' />
<TMDBLogo src={TMDBLogo} alt='TMDBLogo'/>
</Content>
</Wrapper>
);
export default Header;
I had imported TMDBLogoImg component while I'm using TMDBLogo tag inside Content tag.