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,
})
)
);
Related
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 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;
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!
My problem is
When i import scss files like below in 'ProjectFolder/components/header/Header.js'
(That Header.js is located same 'pages' directory level.v )
import "../../public/assets/scss/_reset.scss";
This error is evoked..
I also create next.config.js like this.
// next.config.js setting
const withSass = require('#zeit/next-sass');
module.exports = withSass();
And My package.json
I heard that '/' path is parsing automatically 'public' dir...
so i also tried
import "/assets/scss/_reset.scss";
But same issue is published..
Can i know why..?
Thank you for your Read :)
I solves this problem! changing next.config.js!
const withSass = require('#zeit/next-sass');
const withCSS = require("#zeit/next-css");
module.exports = withCSS(withSass({
webpack(config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
});
return config;
}
}));
Did you create the file with a BOM (byte order mark)
Check the file encoding and inspect the file with a plain text editor to remove the BOM. If the file needs to be in that encoding (probably utf-8) You might try to use webpack-utf8-bom from npm