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)
Error while importing image.
Does anyone know why this is happening?
I am using nextjs
In next.config.js import next-images
const withImages = require('next-images')
and in module.exports use it like
module.exports = withImages({ ...//your content here })
for people having the problem #Prabhu answer is correct but you can use it like this with out giving content.
it worked for me with this error on .png image
Install: npm install next-images
in root dir => next.config.js
const withImages = require("next-images");
module.exports = withImages();
Related
i am having an issue with webpack and my css file. Whenever i run "npm start", i get this error :
ERROR in ./ticker.css 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.
I read that it requires a loader for css files however i have installed 'style-loader' and 'css-loader' but apparently it still won't work. Any ideas ?
Here is :
webpackconfig, package file, ticker.css file
Thanks guys !
I tried to delete and recreate the node_modules directory, use raw loader, change the loaders order.
Turned out my node.js version wasn't up to date which caused some conflicts with some packages. Think about updates guys. :)
Im new to NextJS. Im very confused about images. I get the below error. I followed the documentation for the npm next-image but I still cant display the image
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)
const withImages = require('next-images')
module.exports = withImages({
webpack(config, options) {
return config
}
})
check your next version in package.json, if it is more than 10, you don't need any third-party libraries
I had to make sure to create a file called next.config.js in the root project directory. and place this inside
const withImages = require('next-images')
module.exports = withImages();
Now I'm trying to import aws-exports.js which amplify-js automatically generates in node es6 type code.
my code like this. ex:something.mjs
#!/usr/bin/env node
import awsmobile from '../src/aws-exports.js';
something ....
and I try to execute under bellow
# ./something.mjs
export default awsmobile;
^^^^^^
SyntaxError: Unexpected token 'export'
then, the above error will be output.
I wonder, the aws-exports.js generated by amplify-js is in es6 format, but the extension is js.
Is this the only way to execute it by writing "module" as the "type" field of package.json?
Changing file to .ts worked for me.
deleting the aws-exports.js file and then running "amplify configure project" worked for me
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 trying to use the wonderful Quokka package by WallabyJS https://github.com/wallabyjs/atom-quokka.
I am trying to import an ES6 module but keep getting an error in the Quokka console:
Unexpected token import at createScript vm.js:56
I have tried updating my package.json file and set babel: true as advised in the configuration page here but i still get the error.
Link to my package.json file here
You need to specify react-app preset in your Quokka config, so instead of "babel: true", you need:
babel: {
presets: ['react-app']
}