I'm trying to set up new Next.js application. When i install all packages (using npx create-next-app or installing with myself like npm i -s next react react-dom) and when i start app, i always see this error:
Module parse failed: Unexpected token (6: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
I read that what they wrote before and i tried to install jsx-loader and tried to set up it in webpack.config.js but it doesn't work at all. I already tried to set up project 5 times and i always get this error. Can you help me?
Thanks :)
Related
Maybe similar questions found but those are very old and recommending outdated plugins.
-I'm using eclipse Ide for enterprise java developers 2021-06 and installed Nodejs 16.3 and Npm.
As eclipse news
says, Eclipse Neon and later will support jnodejs by default and you can configure runtime but I don't see any runtime in javaScript section in preferences and any option related to nodeJs and JavaScript in import sections.
I tried to install nodeClipse plugin but encountered errors.
When I import nodeJs project as general project, I get this error.
C:\Users\Hamidreza Abroshan\Documents\workspace-spring-tool-suite-4-4.12.0.RELEASE.metadata.plugins\org.eclipse.wildwebdeveloper.embedder.node\node-v14.15.4-win-x64\node.exe index.js
D:\dclm\dclm-customer-interaction-worker\dclm\node_modules\grpc\src\grpc_extension.js:55
throw error;
^
Error: Failed to load gRPC binary module because it was not installed for the current system
Expected directory: node-v83-win32-x64-unknown
Found: [node-v93-win32-x64-unknown]
This problem can often be fixed by running "npm rebuild" on the current system
Original error: Cannot find module 'D:\dclm\dclm-customer-interaction-worker\dclm\node_modules\grpc\src\node\extension_binary\node-v83-win32-x64-unknown\grpc_node.node'
Require stack:
D:\dclm\dclm-customer-interaction-worker\dclm\node_modules\grpc\src\grpc_extension.js
**Note: I can run this project from command line successfully with npm run start.
Thanks in advance.
I found this way, but if you found better way, please post your answer.
First, import the app as general project E.G, file>import>general>existing project in to workSpace.
Then, open project explorer view and find package.json.
Write click on that and choose run configuration.
choose launch npm and create new configuration.
Now, in npm command enter run start and in package.json file enter the file's address.
Hit run and your app will run successfully.
This config should be done for the first time and for later times, you can go to runAs and choose npm...
If you can not find package.json, open Cmd and navigate to project root folder and type npm run start and it will download some dependencies and create package.json also.
I have created one npm package,that uses webpack for bundling the source code.i am able to use my package locally with reactjs but when I try to use my package with vuejs it shows me the following errors
Error: No ESLint configuration found in G:\development\Webdevelopment\purple_project\dist.
at CascadingConfigArrayFactory._finalizeConfigArray (G:\development\Webdevelopment\vue-test\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:432:19)
I have searched a lot but no answers are satisfying.thanks in advance
I am getting the below error when doing next build in my next.js app, after it's been working fine with just next (or npm run dev).
The error:
$ next build
The module 'react-dom' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'. To add it, run 'npm install --save react-dom'
Creating an optimized production build ...
> Using external babel configuration
> Location: "../.babelrc"
Failed to compile.
./pages/_app.js
Module not found: Can't resolve 'next/head' in '../pages'
> Build error occurred
Error: > Build failed because of webpack errors
at build (.../AppData/Roaming/npm/node_modules/next/dist/build/index.js:7:847)
I started my project by cloning Material UI's next.js example and just use that as it seems updated:
https://github.com/mui-org/material-ui/tree/master/examples/nextjs
However, thinking I just may of have an outdated or broken build, I re-cloned the next.js example and did next build as well, without modifying any files and I get the same error.
How can I fix this?
I just cloned that next.js example and it worked both with npm run dev, as well as npm run build->npm run start.
Judging by your error, I would check that "react-dom": "latest" is present in your package.json's dependencies. Did you run npm install after cloning the example?
The solution to this problem is to Just rerun these two commands again then your project will successfully Run. I also faced this problem but I got the solution.
npm i
yarn install
I ran into a similar problem when I included my nextjs app in a yarn workspace. I got around the issue by deleting the following directories in my nextjs app:
node_modules
.next
build
After removing them I ran yarn from the repo directory and started the nextjs app back up and it was working again.
I am new to react-native and have found an error that makes absolutely no sense to me.
I am trying to include a calendar library: https://github.com/wix/react-native-calendars
I have included the dependency for that library in my package.json file and run npm install
The project was running fine and as expected. I have simply added one line of code to the project:
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
Nothing else. However now I am getting a red error message when the app loads on device and this is what my console is saying:
error: bundling failed: Error: While trying to resolve module xdate
from file
/Users/Alex/Documents/workspace/mobile/node_modules/react-native-calendars/src/index.js,
the package
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/package.json
was successfully found. However, this package itself specifies a
main module field that could not be resolved
(/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js.
Indeed, none of these files exist:
*
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
*
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
at ResolutionRequest.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15)
at DependencyGraph.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
at dependencies.map.relativePath (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
at Array.map ()
at resolveDependencies (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
at Generator.next ()
at step (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
at
However I have checked in the directory and in fact /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js does exist. However I do not see any of this part: (.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
As to how /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index can exist, that doesn't make sense because xdate.js is not a directory.
Any help?
It Usually happens if you try to install a module while your packager is open.
Try to delete node_modules folder and close the packager.
Then reinstall everything by npm install in your project directory.
First close your JavaScript bundler (Metro bundler in my case) and restart the application. This will create fresh dependency graph. This should solve the issue.
Just restart the bundler - no need to delete the Node Modules folder
I came across this issue when adding and using react-native-elements when using VS Code and Android Studio emulator on Linux Mint
In VS Code I had a terminal running Expo with Metro Bundler via 'npm start' command. After installing the react-native-elements in the folder (using 'npm install --save react-native-elements') and adding the import into the .js file I got the "However, this package itself specifies a main module field that could not be resolved" error.
In my case, this just involved a ^C in the terminal session to stop the Metro bundler and then running 'npm start' again. There was no need to delete the node modules folder at all.
If you're still getting the error even after deleting the ./node_modules folder and running npm install again, try doing the install with the --update-binary flag, i.e npm install --update-binary. This should clear out and rebuild any previously built packages on your machine.
Please don't delete the node modules folder.
The bundler has least to deal with node modules folder.
Instead close all the terminals. If using VS-code close that also.
Close all the local host server ports and if possible restart the system.
This might solve the issue.
If anyone have same issue, and remove node_module not working. Then you can try remove all node_module, package lock and using yarn to install node_module instead npm. Hope this help
None of the solutions above helped me except for restarting my MacBook. Wasted 30 minutes trying to fix this issue as I couldn't believe restarting my computer could be a solution.
I'm using Laravel Mix to build an app using React on Laravel 5.6 (Ubuntu 16.04, Node 9.6.1). When I try to build the SCSS for the backend, all goes well.
mix.sass('resources/assets/sass/app.scss', 'public/css').options({
processCssUrls: false
});
However, when I try to build the React app, it fails.
mix.react('resources/assets/js/app.js', 'public/js').options({
processCssUrls: false
});
Cause of CSS import in modules. It starts processing CSS URLs and eventually fails.
The problem is that it fails in a very strange fashion, with
ERROR in ./resources/assets/img/banner_3_back.jpg
Module build failed: Error: write EPIPE
at _errnoException (util.js:1003:13)
at WriteWrap.afterWrite [as oncomplete] (net.js:852:14)
On some of the files (which are present). The permissions are equal among all files.
Actually, I don't want to mess with the CSS import URLs at all (but don't know how to exclude them).
So the question is how to either to solve the error or (better) to disable CSS url check in Laravel Mix imports?
This is a problem with image-webpack-loader 4.0.0 running on Ubuntu 16.04. There is a problem with the imagemin-mozjpeg package. You can fix this by installing libpng16-dev:
sudo apt-get install libpng16-dev
Reference