I'm building a UI library.
Is there anyone use framer-motion with storybook?
It works fine in storybook, but an error occurs in build environment.
Some people recommend downgrade but it doesn't work for me.
Does anyone have a problem similar to mine?
Running in to the same issue here.
I think it's due to the new version of Framer-motion not being compatible with certain tools. I will debug today and let you know if i am able to find a solution.
Edit
Got it working!
Add the following to your .storybook/main.js file
module.exports = {
// Any existing rules
...
// The fix
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto",
});
return config;
}
}
Related
I am new to Next.js, I built a simple landing page and wanted to generate a static page using npm run build which I set in package.json to "build": "next build && next export".
But I get this Error:
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Use any provider which supports Image Optimization (like Vercel).
- Configure a third-party loader in `next.config.js`.
- Use the `loader` prop for `next/image`.
Can someone help me, I read the documentation and I created next.config.js in the root and pasted this:
module.exports = {
images: {
loader: 'imgix',
path: '/images/',
},
}
I think that I need a path, but the thing is I am not using hosted images, I have an images folder in the the public folder.
I know this is probably a stupid question, but I'm stuck.
I hosted them on https://imgbb.com and wrote this in next.config.js
module.exports = {
images: {
domains: ['i.ibb.co'],
},
}
and it worked.
Usage:
<Image src="https://i.ibb.co/TMBV2KP/Akwagroup.jpg"
alt="ESMASA TRAVAUX"
width={1050}
height={500}
/>
I'm facing a very strange issue with next-pwa. Whenever I try to build a next-pwa project that includes a custom worker js file, the build fails with the following error:
info - Creating an optimized production build ..buffer.js:333
throw new ERR_INVALID_ARG_TYPE(
^
TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined
at Function.from (buffer.js:333:9)
at writeOut (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56716:26)
at C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56735:7
at arrayIterator (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:14270)
at timesSync (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:5037)
at Object.eachLimit (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:14216)
at emitFiles (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56617:13)
at C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:36508:26
at FSReqCallback.oncomplete (fs.js:184:5) {
code: 'ERR_INVALID_ARG_TYPE'
}
I have tried several things so far to fix this issue:
Clone the repo and updated all dependencies (i thought the issue might be webpack related)
Building the project without a custom worker file (works fine)
Downgrade to Node 10, 12, 14, 15, and re-install dependencies.
I've also tried the to use the code provided in the /example folder of the repo, but the same issue occurs there as well.
I'm not the only one facing this issue so i would appreciate help.
You can test it yourself using Gitpod, just open this link and navigate to the example, install dependencies and try yarn build.
Are you using webpack 5 or 4.x? I faced the same issue with webpack > 5 and fixed the same by passing the future object to withPWA " future: { webpack5: true }".
module.exports = withPWA({ future: { webpack5: true },
pwa: {
disable: false,
dest: "public",
//register: false,
skipWaiting: false,
runtimeCaching
}
})
I got this error when deploying Next.js to Netlify.
Error: Image Optimization using Next.js default loader is not compatible with `next export`.
Possible solutions:
6:47:15 AM: - Use `next start`, which starts the Image Optimization API.
6:47:15 AM: - Use Vercel to deploy, which supports Image Optimization.
6:47:15 AM: - Configure a third-party loader in `next.config.js`.
6:47:15 AM: - Read more: https://err.sh/next.js/export-image-api.
6:47:15 AM: at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)
The problem does not occur when deploying to Vercel.
use akamai
setting images.loader to 'imgix' caused dev and build errors.
i used this instead:
// next.config.js
module.exports = {
images: {
loader: 'akamai',
path: '',
},
}
it just works for all i care about.
possible values for images.loader are: [ default, imgix, cloudinary, akamai, custom ]
reference: https://nextjs.org/docs/api-reference/next/image#built-in-loaders
From Next.js 12.3, you can completely disable next/image Image Optimization using the unoptimized configuration in next.config.js. This avoids having to use a third-party provider to optimize the image when using next/export.
From the next/image documentation:
unoptimized - When true, the source image will be served as-is
instead of changing quality, size, or format. Defaults to false.
module.exports = {
images: {
unoptimized: true
}
}
Before Next.js 12.3 and from 12.2, the unoptimized configuration was still experimental and could be enabled under the experimental flag.
module.exports = {
experimental: {
images: {
unoptimized: true
}
}
}
Seems you use next/images.
But next/images don't work with static pages (generated with next export)
For static pages use this image-optimizer : next-optimized-images instead
I faced the same problem when using next export command. I still receive this error:
Error: Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start to run a server, which includes the Image Optimization API.
Use any provider which supports Image Optimization (like Vercel).
Configure a third-party loader in next.config.js.
Use the loader prop for next/image.
So, to make my custom loader working correctly, I needed
to set a path to an empty string:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '',
},
}
BUT, when I open the resultant index.html file, none of the images or JS loaded.
So, for those who facing this also, please try to set the path to a / as such:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '/',
},
}
This error is regarding Image/next, I was facing same error while "next build", than i use <img/> instead of <Image/> in the project and re-build it by npm run build and it resolves the error.
I'm building my website with Nextjs and importing Bablyonjs was throwing up the following error.
syntaxError: Unexpected token 'export'
module.exports = require("#babylonjs/core")
I'm using the standard nextjs setup with tsconfig.json
I'm refering to this Babylon documentation and using the examples verbatim.
https://doc.babylonjs.com/extensions/Babylon.js+ExternalLibraries/BabylonJS_and_ReactJS
https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking
After a not so insignificant amount of time searching i finally learned the following.
#babylon (es6) is not compiled into javascript and is instead nicely defined (es6) typescript friendly library of source code. (helps when wanting to treeshake)
Nextjs out of the box isn't configured to compile anything in node_modules. It expects precompiled javascript ready to consume.
Point 2. is why i received the error, nextjs was expecting compiled js and it was getting uncompiled source.
To fix this you need to add a next.config.js and configure it with next-transpile-modules and next-compose-plugins.
yarn add next-transpile-modules
yarn add next-compose-plugins
next.config.js
//const withTM = require('next-transpile-modules')(['#babylonjs']);
const withTM = require('next-transpile-modules')(['#babylonjs/core']); // As per comment.
const withPlugins = require('next-compose-plugins');
const nextConfig = {
target: 'serverless',
webpack: function (config) {
/// below is not required for the problem described. Just for reference.(es6)
config.module.rules.push({test: /\.yml$/, use: 'raw-loader'})
return config
}
}
module.exports = withPlugins([withTM], nextConfig);
It compiled without error after this.
References
Handy links i came across solving this issue.
https://github.com/vercel/next.js/issues/706
https://www.npmjs.com/package/next-transpile-modules
https://www.npmjs.com/package/next-compose-plugins
https://www.typescriptlang.org/tsconfig
https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking
https://doc.babylonjs.com/extensions/Babylon.js+ExternalLibraries/BabylonJS_and_ReactJS
Links that helped some on the way to understanding the problem.
Test ES6 modules with Jest
https://forum.babylonjs.com/t/jest-is-crashing/12557/7
https://github.com/MichalLytek/type-graphql/issues/689
For Next.js 11, I had to slightly revise the answer from Emile:
Install the following package:
yarn add next-transpile-modules
In your next.config.js file add the following:
const withTM = require('next-transpile-modules')(["package2", "package2"]);
module.exports = withTM({
reactStrictMode: true
})
Put assets folder inside public folder. To access assets can be done by calling full path url.
await SceneLoader.Append(
'http://localhost:3000/assets/characters/avatar.glb'
);
I am working on a web app that uses Webpack to bundle modules. For whatever reason, the introduction of Firebase into the app is causing Webpack to throw an error. This error is occurring when Webpack attempts to load the Firebase module.
How do I go about excluding Firebase from Webpack, but can still call
import Firebase from 'firebase';
from within my JS files?
Here are some screenshots of the error.
pic1
pic2
tl;dr Exclude /node_modules/ from the babel-loader paths.
Your 2nd pic shows the error on firebase-web.js:12:
Uncaught TypeError: Cannot read property 'navigator' of undefined
Unfortunately, firebase-web.js is minified, so it's hard to tell exactly what's going wrong. Let's beautify firebase-web.js using http://jsbeautifier.org:
Now it's plain to see that the script is trying to access aa.navigator, but aa is undefined. You can see at the top of the file:
var h, aa = this;
We can see what the script is trying to do now: it expects this === window so it can access window.navigator.
But why is this undefined? It's because, at some point, the script is being put into strict mode, which causes this === undefined instead of this === window. We can see that in the webpack-generated main.js:
It turns out that the "use strict" is being prepended by babel-loader, so we should be able to disable babel-loader for firebase-web.js to solve the problem:
...
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}
]
}
...
Good, now there's no more "use strict" and the error no longer occurs!
(Full disclosure: I worked on the same project that #kashiB is working on and have access to the source code.)