I am trying to do a mini react project and am using external API. I am getting this weird error. Before I was getting error when doing any type of import, but then I added type: "module" in package.json, so now instead I get completely different type of error.
Error:
node:internal/errors:484
ErrorCaptureStackTrace(err);
^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".tmp" for /Users/rokas/Projects/quiz-website/src/node_7c47523b50d8c.tmp
at new NodeError (node:internal/errors:393:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
at defaultLoad (node:internal/modules/esm/load:81:20)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:605:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
at new ModuleJob (node:internal/modules/esm/module_job:63:26)
at #createModuleJob (node:internal/modules/esm/loader:480:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
Node.js v18.12.1
Thoughts?
Related
10 hours later and still cannot deploy my application due to below build failure. Using React/Next with Tailwind.
I believe it comes from PostCSS plugin but I cant find any of my errors (if it is one), it runs perfectly on localhost before production build. Any way to identify which class that is the error?
I get the following error when I deploy.
HookWebpackError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at makeWebpackError (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:41664:9)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:25354:12
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:140346:10), <anonymous>:34:1)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
-- inner error --
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1
I've seen other threads such as Unknown word error from CSS Minimizer plugin on React build, and tried following guidelines but I cannot find any Tailwind class which may be incorrect or to advanced, at least not manually. Any ways to do this with help from extension or similar?
Check out this thread: Why am I getting this error (Tailwind + Next.js)? HookwebpackError, CssSyntaxError
In my case, the issue was with my tailwind.config.js.
First, I'd look for any dynamic classnames, searching for [${ or similar in your codebase to find them.
After removing those and still failing, I restored a previous version of tailwind.config.js from git that I knew was previously working, and it was able to build succcessfully.
Specifically, the build was failing due to including:
extend: {
backgroundImage: {
"primary-underline": "linear-gradient(180deg,transparent 80%,hsla(205,100%,55%,0.5) 0);"
},
}
The ; at EOL was the culprit.
I am using same linting configurations on github and locally. When I create a PR, it gives me following error:
TypeError: Cannot read property 'value' of null
on line:
this.axios.defaults.headers.Authorization = `Token ${process.env.NEXT_PUBLIC_REACT_APP_API_TOKEN}`;
How can I fix it?
./server.sh
internal/modules/run_main.js:54
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/racal/JavaScript/pluralsight/AngularFundamentalsFiles/DemoApp/scripts/eventsController' imported from /home/racal/JavaScript/pluralsight/AngularFundamentalsFiles/DemoApp/scripts/web-server.js
at finalizeResolution (internal/modules/esm/resolve.js:272:11)
at moduleResolve (internal/modules/esm/resolve.js:652:10)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:695:13)
at Loader.resolve (internal/modules/esm/loader.js:97:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:42:40)
at link (internal/modules/esm/module_job.js:41:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
and in web console
angular.js:10413 GET http://127.0.0.1:5500/app/lib/app/data/event 404 (Not Found)
please help me
I wanted to change event data about an event object in javascript, a json-file
I have a simple NodeJS file named index.js includes the following lines:
const {Auth0Lock} = require('auth0-lock');
var lock = new Auth0Lock( MyClientId, MyDomain);
lock.show();
I used npm install auth0-lock to install auth0lock and have the proper package.json file. When I run this piece of code by node index.js, I get the following error:
C:\Users\....\node_modules\auth0-lock\lib\utils\url_utils.js:6
var parser = global.document.createElement('a');
^
TypeError: Cannot read property 'createElement' of undefined
Also, when I change const {Auth0Lock} = require('auth0-lock') to const Auth0Lock = require('auth0-lock'), I get the following error:
var lock = new Auth0Lock(
^
TypeError: Auth0Lock is not a constructor
Would you please help me to fix this error and have an auth0lock authentication dialog?
If you are using auth0-lock with NodeJS you need to use a bundler like webpack or browserify.
Please refer to this repo: for setup configuration with webpack.
Alternativel
I just upgraded React to 16.2.0 on my React-Native project to use the new Fragment syntax.
I have a component which returns something like this now:
return (
<>
<View>...</View>
<View>...</View>
</>
);
TypeScript doesn't complain about the syntax which is great, however I get an error when I try to run this code:
Bundling `index.js` [development, non-minified] 45.8% (1078/1593), failed.
error: bundling failed: SyntaxError in /Users/alexmngn/Workspace/MyProject/MyComponent.tsx: /Users/alexmngn/Workspace/MyProject/MyComponent.tsx: Unexpected token (68:17)
> 68 | return (<>
| ^
It doesn't seem to compile the fragment syntax back to ES5.
And when I try to use React.Fragment instead I get a TypeScript error:
/Users/alexmngn/Workspace/MyProject/MyComponent.tsx(1,28): error TS2305:
Module '"/Users/alexmngn/Workspace/MyProject/node_modules/#types/react/index"'
has no exported member 'Fragment'.
And the app doesn't run and throw an error as well Invariant Violation
I use the latest stable versions of all packages:
React: 16.2.0
React-Native: 0.51.0
TypeScript: 2.6.2
#types/react: 16.0.31
#types/react-native: 0.51.4
Is there anything specific I need to do to make it working with React-Native? To compile to ES5? Or even to be able to use React.Fragment without Typescript complaining? Seems like there is a type ReactFragment in the definition of the types but still get this error.
Thanks