Getting this error "Module parse failed: Unexpected character '' (1:2)"
Answered
Bendire's Thrasher posted this in #help-forum
Bendire's ThrasherOP
Hey, within my app I have been getting the following error when going to a specific page on my localhost:
const nextConfig = {}
module.exports = nextConfig
module.exports = {
webpack: (config) => {
config.resolve.fallback = { fs: false, path: false, net: false, tls:false, dns:false};
config.module.rules.push( { test: /.js$|jsx/, use: {loader: 'babel-loader',options: {presets: ['@babel/preset-react']}}});
config.resolve.extensionAlias = {
".js": [".ts", ".tsx", ".js", ".jsx"],
".mjs": [".mts", ".mjs"],
".cjs": [".cts", ".cjs"],
};
config.module.rules.push( { test: /.(png|jpg|gif|svg)$/i,
` use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '[name].[hash:7].[ext]'
},
},
],});
config.module.rules.push( {test: /.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(?.)?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}}});
return config
}
}
Greatly appreciate any input! Thank you
⨯ ./node_modules/@napi-rs/snappy-win32-x64-msvc/snappy.win32-x64-msvc.node
Module parse failed: Unexpected character '�' (1:2)'
I'm pretty new to Next so trying to grasp my head around what is going on and try some of the solutions that are available online in various places. I haven't gotten anywhere so far. From what I understand, I need to configure a loader for webpack that can help load this node module. I have isntalled a few loaders such as babel, url-loader and file-loader.
I have this code in my Next.config.js file:/** @type {import('next').NextConfig} /const nextConfig = {}
module.exports = nextConfig
module.exports = {
webpack: (config) => {
config.resolve.fallback = { fs: false, path: false, net: false, tls:false, dns:false};
config.module.rules.push( { test: /.js$|jsx/, use: {loader: 'babel-loader',options: {presets: ['@babel/preset-react']}}});
config.resolve.extensionAlias = {
".js": [".ts", ".tsx", ".js", ".jsx"],
".mjs": [".mts", ".mjs"],
".cjs": [".cts", ".cjs"],
};
config.module.rules.push( { test: /.(png|jpg|gif|svg)$/i,
` use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '[name].[hash:7].[ext]'
},
},
],});
config.module.rules.push( {test: /.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(?.)?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}}});
return config
}
}
Greatly appreciate any input! Thank you
Answered by Asian black bear
Try converting the parts of the page that need client side rendering and state, then passing props down to them, keep the main page as SSR and see if this fixes this issues
4 Replies
Asian black bear
I'm not entirely sure if you are just trying to create a loader or not when navigating pages? If you are Next has a loading.tsx file that you add to the route of the app folder, for example [app] -> page.tsx loading.tsx
If this is not what you are trying to do then more context would be great 🙂
If this is not what you are trying to do then more context would be great 🙂
Bendire's ThrasherOP
Hi, thanks for your reply. To be honest I'm a bit confused, I think this error first came about when I changed a page to become a client page with 'use-client'. Since doing that I have been getting quite a few errors relating to npm modules that I have been working through. This is the one that I am stuck currently. I'm not really trying to do anything in particular, the error just popped up so now I'm trying to fix it.
Asian black bear
Try converting the parts of the page that need client side rendering and state, then passing props down to them, keep the main page as SSR and see if this fixes this issues
Answer
Bendire's ThrasherOP
Yes, things working again. Thank you