have same issues withe web pack project can you please help me to resolve that one. I didn't use react-scripts because it's web pack project. i have migrated react-bootstrap 1.6.4 to 2.1.1
Current Version: 2.1.1
the errors are:
ERROR in ./node_modules/react-bootstrap/esm/SplitButton.js Module
parse failed: Unexpected token (101:2) You may need an appropriate
loader to handle this file type. | renderMenuOnMount, |
rootCloseEvent, | ...props | }, ref) => /#PURE/_jsxs(Dropdown, { |
ref: ref, # ./node_modules/react-bootstrap/esm/index.js 67:0-55 #
./src/containers/Layout.jsx # ./src/routes/index.jsx #
./src/containers/App.jsx # ./src/index.jsx # multi
(webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server
react-hot-loader/patch babel-polyfill whatwg-fetch ./src/index.jsx
the issue did not occur in react-bootstrap#2.0.0-alpha.1
Related
C:\Users\91904\Desktop!Pintrest\backend>sanity start
✔ Checking configuration files...
⠹ Compiling...webpack built e11ccaa43df8743d1a5d in 578ms
✔ Compiling...
Failed to compile.
Error in multi ./node_modules/#sanity/server/lib/browser/entry-dev.js
Module not found: Error: Can't resolve 'C:\Users\91904\Desktop' in 'C:\Users\91904\Desktop!Pintrest\backend'
# multi ./node_modules/#sanity/server/lib/browser/entry-dev.js
Error in multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js ./node_modules/#sanity/server/lib/browser/hot-client.js react react-dom
Module not found: Error: Can't resolve 'C:\Users\91904\Desktop' in 'C:\Users\91904\Desktop!Pintrest\backend'
# multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js ./node_modules/#sanity/server/lib/browser/hot-client.js react react-dom
Error in multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js ./node_modules/#sanity/server/lib/browser/hot-client.js react react-dom
Module not found: Error: Can't resolve 'C:\Users\91904\Desktop' in 'C:\Users\91904\Desktop!Pintrest\backend'
# multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js ./node_modules/#sanity/server/lib/browser/hot-client.js react react-dom
I have been searching about Next.js, the javascript framework of the moment, and I want to begin to practice. The problem is: it doesn't run in my computer by any means.
The natural form on creating a next project is with the command line:
npx create-next-app
or
yarn create next-app
The result is a template project with a file structure and a few scripts to run the server. The most basic script runs the server in development mode:
npm run dev
or
yarn dev
The result in terminal is the warning:
$ yarn dev
yarn run v1.22.5
$ next dev
(node:5348) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution
of the package at C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
ready - started server on http://localhost:3000
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp({ Component, pageProps }) {
> return <Component {...pageProps} />
| }
|
And when I enter the website in localhost:3000, the page on browser shows:
Internal Server Error
After making the http requisition from the browser, the terminal shows the following message:
event - build page: /next/dist/pages/_error
wait - compiling...
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp({ Component, pageProps }) {
> return <Component {...pageProps} />
| }
|
Error: Cannot find module 'C:\Users\maths\Meus Documentos\codigos\node\my-app\.next\server\pages-manifest.json'
Require stack:
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-components.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\api-utils.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\lib\start-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\cli\next-dev.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\bin\next
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at getPagePath (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
657)
at requirePage (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
1062)
at loadComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-compo
nents.js:1:807)
at DevServer.findPageComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\ser
ver\next-server.js:74:296)
at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\serv
er\next-server.js:126:120)
at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next-dev-
server.js:34:974)
at processTicksAndRejections (node:internal/process/task_queues:93:5)
at async DevServer.render (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\ne
xt-server.js:72:236)
at async Object.fn (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-serv
er.js:56:618)
at async Router.execute (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\rout
er.js:23:67)
at async DevServer.run (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-
server.js:66:1042)
at async DevServer.handleRequest (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\se
rver\next-server.js:34:1081) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\require.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\load-components.
js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\api-utils.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\next-server.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\next.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\lib\\start-server.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\cli\\next-dev.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\bin\\next'
]
}
I have tried several things to fix it, create the next project without the script from npx and yarn (by manually installing the dependencies), update versions of node and npm, etc. It seems that the program can't load the jsx, the first error points to the moment when the first jsx component appear in the code. The message says that webpack isn't configured with a valid loader to this code.
Environment:
Win 10
npm v7.3.0
node v15.5.0
next v10.0.4
react v17.0.1
react-dom v17.0.1
Downgrade your version of Nodejs to 14 or 12 Node version 15 will break your environment. If you want to still want to use 15 get node version switcher and switch the version based on the projects your working on.
I am working with an app using electron-vue. In windows, yarn run dev just works fine. But then I decided to switch to Ubuntu 18.04 and now everytime I executed yarn run dev, it returns like this:
ERROR in ./node_modules/iaccs-login/router/OneTimePassword.js
Module not found: Error: Can't resolve '../components/OneTimePassword' in '/mnt/d/iaccs/iaccs-base/node_modules/iaccs-login/router'
# ./node_modules/iaccs-login/router/OneTimePassword.js 4:15-55
# ./src/renderer/router/index.js
# ./src/renderer/main.js
# multi ./.electron-vue/dev-client ./src/renderer/main.js
ERROR in ./node_modules/iaccs-front-office-otc-voucher/router/index.js
Module not found: Error: Can't resolve '../components/OtcVoucher' in '/mnt/d/iaccs/iaccs-base/node_modules/iaccs-front-office-otc-voucher/router'
# ./node_modules/iaccs-front-office-otc-voucher/router/index.js 4:15-50
# ./src/renderer/router/FrontOffice.js
# ./src/renderer/router/index.js
# ./src/renderer/main.js
# multi ./.electron-vue/dev-client ./src/renderer/main.js
ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/iaccs-front-office-withdrawal/components/Withdrawal.vue
Module not found: Error: Can't resolve '../constants/Withdrawal' in '/mnt/d/iaccs/iaccs-base/node_modules/iaccs-front-office-withdrawal/components'
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/iaccs-front-office-withdrawal/components/Withdrawal.vue 9:0-92
# ./node_modules/iaccs-front-office-withdrawal/components/Withdrawal.vue
# ./node_modules/iaccs-front-office-withdrawal/router/index.js
# ./src/renderer/router/FrontOffice.js
# ./src/renderer/router/index.js
# ./src/renderer/main.js
# multi ./.electron-vue/dev-client ./src/renderer/main.js
ERROR in ./src/renderer/mixins/Auth.js
Module not found: Error: Can't resolve '../store/Modules' in '/mnt/d/iaccs/iaccs-base/src/renderer/mixins'
# ./src/renderer/mixins/Auth.js 1:12-63
# ./src/renderer/main.js
# multi ./.electron-vue/dev-client ./src/renderer/main.js
ERROR in ./src/renderer/store/index.js
Module not found: Error: Can't resolve './Modules' in '/mnt/d/iaccs/iaccs-base/src/renderer/store'
# ./src/renderer/store/index.js 5:0-32
# ./src/renderer/main.js
# multi ./.electron-vue/dev-client ./src/renderer/main.js
I already checked the files and nothing is missing. Is there something I did wrong?
Thanks!
SOLVED!
It turns out to be a very simple issue. I've been using windows for too long, I forgot that Linux is case-sensitive with the directory and file names. I just renamed my directories and files based on my code and yarn run dev now works!
Running webpack on a project which includes winston, produces a number of warnings (see below). Webpack is automatically including non-javascript files due to a lazy-loading mechanism in a dependency, logform.
You can see what's happening here - see the exposeFormat function: https://github.com/winstonjs/logform/blob/master/index.js
Webpack can't figure out which files to include, so it includes them all, including the README.md files, and attempts to process them with Typescript. I know that webpack's ContextReplacementPlugin should help me, but I can't get it to work.
I've tried adding this to my plugins list in webpack.config.js:
new webpack.ContextReplacementPlugin(/logform/, /(.*)\.js/)
I thought this should include all .js files in the folder. This gets rid of the warnings at build time, but at runtime, I get an error from webpack indicating that an attempt to require one of those files fails.
What am I doing wrong?
Warnings produced by Webpack
WARNING in ./node_modules/logform/index.d.ts
Module build failed: Error: Typescript emitted no output for //Users/aneil/code/project/node_modules/logform/index.d.ts.
You should not need to recompile .ts files in node_modules.
Please contact the package author to advise them to use --declaration --outDir.
More https://github.com/Microsoft/TypeScript/issues/12358
at successLoader (/Users/aneil/code/project/node_modules/ts-loader/dist/index.js:39:15)
at Object.loader (/Users/aneil/code/project/node_modules/ts-loader/dist/index.js:21:12)
# ./node_modules/logform sync ^\.\/.*$
# ./node_modules/logform/index.js
# ./node_modules/winston/lib/winston.js
# ./src/logger.ts
# ./src/services/pipeline/handlers.ts
WARNING in ./node_modules/logform/CHANGELOG.md
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| # CHANGELOG
|
| ### 1.4.2
# ./node_modules/logform sync ^\.\/.*$
# ./node_modules/logform/index.js
# ./node_modules/winston/lib/winston.js
# ./src/logger.ts
# ./src/services/pipeline/handlers.ts
WARNING in ./node_modules/logform/README.md
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| # logform
|
| An mutable object-based log format designed for chaining & objectMode streams.
# ./node_modules/logform sync ^\.\/.*$
# ./node_modules/logform/index.js
# ./node_modules/winston/lib/winston.js
# ./src/logger.ts
# ./src/services/pipeline/handlers.ts
WARNING in ./node_modules/logform/LICENSE
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| MIT License
|
| Copyright (c) 2017 Charlie Robbins & the Contributors.
# ./node_modules/logform sync ^\.\/.*$
# ./node_modules/logform/index.js
# ./node_modules/winston/lib/winston.js
# ./src/logger.ts
# ./src/services/pipeline/handlers.ts
Runtime errors after I add the ContextReplacementPlugin
Serverless: GET /api (λ: GraphQLPlayground)
Serverless: The first request might take a few extra seconds
Serverless: Error while loading GraphQLPlayground
[ 'Error: Cannot find module "./combine".',
'at webpackContextResolve (webpack:///./node_modules/logform_sync_(.*)\\.js?:39:11)',
'at webpackContext (webpack:///./node_modules/logform_sync_(.*)\\.js?:32:11)',
'at Function.get (webpack:///./node_modules/logform/index.js?:27:101)',
'at eval (webpack:///./src/logger.ts?:34:20)',
I figured the best way to solve this was to address the issue directly in the logform library, so I submitted this PR: https://github.com/winstonjs/logform/pull/24
In migrating from beta 31 to rc.1 in my Angular-CLI app, I am now getting some compilation errors, as it pertains to some of my custom icons/images. This is the error I'm getting:
ERROR in ./src/app/ui/nav-menu.component.css Module not found: Error:
Can't resolve './app/img/home-icon.svg' in
'/Users/mk/Documents/abc/src/app/ui' #
./src/app/ui/nav-menu.component.css 6:3777-3813 #
./src/app/ui/nav-menu.component.ts # ./src/app/app.module.ts #
./src/main.ts # multi webpack-dev-server/client?http://localhost:4200
./src/main.ts
Specifically, what does it indicate when the error states "can't resolve"? Does that imply the item isn't where the app is looking for it? Or something else?
If you are using angular-cli put static files such as images, fonts etc.. in assets folder and refer them in you HTML files as follows
<img src="assets/sample.jpg" alt="some alt">