I have a NextJS application and I'm using this dotLottie player. I've followed the configuration steps provided in the documentation, but I keep receiving this error when the component tries to load the dotLottie file.
Module parse failed: Unexpected character '' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
My global.d.ts file contains:
declare module "*.lottie";
declare namespace JSX {
interface IntrinsicElements {
"dotlottie-player": any;
}
}
In my component:
import SampleLottie from "./../../../public/images/SampleLottie.lottie";
...
<dotlottie-player
src={SampleLottie}
autoplay
loop
/>
I'm not sure what else I need to do to load the .lottie file correctly.
I fixed this by updating my next.config.js file:
const nextConfig = {
...
webpack: (config, options) => {
config.module.rules.push({
test: /\.lottie$/,
type: "asset/resource",
});
return config;
},
};
module.exports = nextConfig;
Related
I'm trying to load svg and png files as path from the /static/ dir in order to use them dynamically as favicon.
I configured everything according to documentaion:
./src/model/view/<SomeView.ts>
./static/<SomeFile.png|svg>
./src/custom.d.ts
./tsconfig.json
./webpack.config.js
./package.json
Example view BrowserView.ts
import FaviconPng from "../../../static/favicon_browser-32x32.png";
import FaviconSvg from "../../../static/favicon-browser.svg";
import { View } from "./View";
export class BrowserView implements View {
public readonly faviconPng = FaviconPng;
public readonly faviconSvg = FaviconSvg;
}
The cusom type declaration custom.d.ts
declare module "*.svg" {
const path: string;
export = path;
}
declare module "*.png" {
const path: string;
export = path;
}
The tsconfig.json
{
"compilerOptions" : {
"esModuleInterop" : true,
"experimentalDecorators" : true,
"jsx" : "react",
"moduleResolution" : "node",
"strict" : true,
"target" : "ES6"
},
"include" : [
"./src/model/view/*",
"./src/custom.d.ts"
]
}
The webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|svg)$/,
use: "url-loader"
}
]
}
};
And in package.json webpack and url-loader are included.
Still I'm getting this error:
ERROR in ./static/favicon_browser-32x32.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./src/model/view/BrowserView.ts 1:0-68 7:26-36
# ./src/App.tsx 34:0-69 73:33-51 162:17-40 224:17-40
# ./src/index.tsx 4:0-32 5:36-41
ERROR in ./static/favicon_browser.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" encoding="UTF-8"?> <svg id="uuid-00b901b6-ce54-412b-a6b8-3c8e80482087" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 32"> <defs> <style>.uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ isolation:isolate; fill:black; } #media (prefers-color-scheme: dark) { .uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3{ fill:white; } }</style> </defs> <path class="uuid-80dd75c4-418c-4908-a10c-915b8aaac0d3" d="m7.52,..." /> </svg>
# ./src/model/view/BrowserView.ts 2:0-62 8:26-36
# ./src/App.tsx 34:0-69 73:33-51 162:17-40 224:17-40
# ./src/index.tsx 4:0-32 5:36-41
I'd suppose it doesn't recognize the loader config, but I'm not sure what I could change.
How can I load the image as path from this dir to change the favicon like this?
private updateFavicon(view: View): void {
// Get the element by id tag
const favicon_svg: HTMLElement = document.getElementById("favicon_svg")!;
const favicon_png: HTMLElement = document.getElementById("favicon_png")!;
// Set the icon
favicon_svg.setAttribute("href", view.faviconSvg);
favicon_png.setAttribute("href", view.faviconPng);
}
It would be better to use relative paths relative to your project
Difficult to answer since webpack version is not specified.
here is a link for webpack 5 image usage
https://webpack.js.org/guides/asset-management/#loading-images
I'm working with next.js 13.1.1
and first time configuring a monoRepo-based project using turborepo. and I want to use
#next/bundle-analyzer
#sentry/nextjs
#next-pwa
without the above config everything works perfectly
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
poweredByHeader: false,
compress: true,
transpilePackages: ['ui']
}
module.exports = nextConfig
but if I use below code
module.exports = withNextPwa(withBundleAnalyzer(
withSentryConfig({
nextConfig,
sentryWebpackPluginOptions,
})
));
getting error
../../packages/ui/components/Button.tsx
Module parse failed: Unexpected token (4:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
import { ButtonProps } from "../type";
|
> export const Button = (props:ButtonProps) => {
| return <button>{props.label}</button>
| }
Import trace for requested module:
../../packages/ui/components/Button.tsx
../../packages/ui/index.tsx
./src/components/home/hero.tsx
./src/components/home/index.tsx
I have already spent more than one day to solve this but no-luck. any suggestion or guidance is welcome thanks in advance
I dont know why, but when I add transpilePackages even empty, it works:
...
transpilePackages: []
...
Some bug?
I use Next.js v13 with monorepo structure. When I try to import a scss file in another scss file, I get this error:
ModuleParseError: Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #import "~#shared/styles/variables.module.scss";
This is the next.config.js:
/** #type {import('next').NextConfig} */
const { dependencies } = require("./package.json");
const transpilePackages = Object.keys(dependencies || []).filter((dependency) =>
dependency.startsWith("#my-root-project/")
);
const nextConfig = {
experimental: {
appDir: true,
transpilePackages,
},
};
module.exports = nextConfig;
and This is my project structure:
my-monorepo-folder:
- packages:
- apps:
- nextjs-website // (v13)
- package-1
- package-2
- shared
- styles
- variables.module.scss
How can I handle this error?
So this was a bug with NextJs v13.0.0. This issue has been solved after upgrading the version.
I'm having this problem while importing stream-chat modules to my app.
I got a legacy code config and I've seen similar here cases but I'm not sure how I'm going to apply the suggested fixes in my next.config.js.
From other posts:
I'm supposed to install npm i css-loader file-loader url-loader -D and then wrap my module module.exports inside withCSS({}).
Webpack 4 - Module parse failed: Unexpected character ' '
NextJS Module parse failed: Unexpected character '#' (7:0)
The error(s)
> [ error ]
> ./node_modules/stream-chat-react/dist/assets/Poweredby_100px-White_VertText.png
> 1:0 Module parse failed: Unexpected character '�' (1:0) You may need
> an appropriate loader to handle this file type. (Source code omitted
> for this binary file) ModuleParseError: Module parse failed:
> Unexpected character '�' (1:0) You may need an appropriate loader to
> handle this file type. (Source code omitted for this binary file)
>
> Module parse failed: Unexpected character '#' (4:0) You may need an
> appropriate loader to handle this file type. | /* colors */ | /*
> miscellaneous */
> > #import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,700,700i");
And my next.config.js
const { withPlugins, optional } = require('next-compose-plugins')
const { PHASE_PRODUCTION_BUILD } = require('next-server/constants')
const sass = require('#zeit/next-sass')
const images = require('next-images') // update
const css = require('#zeit/next-css') // also added this plugin
const { requireEnvVar } = require('./lib/nodeUtils')
const nextConfig = {
publicRuntimeConfig: {
...
},
useFileSystemPublicRoutes: false,
webpack(config, { webpack }) {
config.plugins.push(
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/)
)
return config
},
}
module.exports = withPlugins(
[
[sass],
[images], // tried this with images
[css], // also tried with css
[
optional(() => require('#zeit/next-bundle-analyzer')),
{
analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
analyzeBrowser: ['browser', 'both'].includes(
process.env.BUNDLE_ANALYZE
),
bundleAnalyzerConfig: {
server: {
analyzerMode: 'static',
reportFilename: '../../bundles/server.html',
},
browser: {
analyzerMode: 'static',
reportFilename: '../bundles/client.html',
},
},
},
[PHASE_PRODUCTION_BUILD],
],
],
nextConfig
)
Also tried const css = require('#zeit/next-css') and const images = require('next-images') then adding it next to sass in the first array of withPlugins like so: withPlugins([[sass], css, images ,[...]); with no success.
Thanks as always!
Im getting this error if I try to use the expo components in my next Js
To be clear im using an expo with next js for the web, and so I wanted both to share the same components which to my knowledge was possible but I'm getting this error.
The error is:
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
and this is the next.config.js :
// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#withexpo
const { withExpo } = require('#expo/next-adapter');
module.exports = withExpo({
projectRoot: __dirname,
});
and this is the babel config:
// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#shared-steps
module.exports = { presets: ['#expo/next-adapter/babel'] };
please help and hope the info is enough
Try replacing next.config.js with this ( & npm install next-images next-fonts)
const { withExpo } = require('#expo/next-adapter')
const withImages = require('next-images')
const withFonts = require('next-fonts')
module.exports = withExpo(
withImages(
withFonts({
projectRoot: __dirname,
})
)
);