I have a Vue3 app under Vite. It's working marvellously in dev, but after adding a dependency, the production build falls over at runtime with require() is not defined. Grubbing down into node_modules, I see my dependency has a sub-dependency that has ES and commonjs variants, and in the .es5.js there's a require() statement. If I replace this with an import directly in the built file, my problem goes away. Have I put my finger on it? It's not my build chain? A require statement has no place in and ES module, am I right? If so, I'm dependent on the package author to fix this?
Related
I have a slight problem with a basic Node.JS method. When I'm trying to use "require()' method to import any downloaded (with 'npm install ..) module/library, I get a Visual Studio Code message that asks 'to convert 'require'(which is a Common JS module) into ES. If I do it, it transforms 'require()' into 'import..' though I want keep using 'require()'. Why is it so ? I read somewhere that Common JS is already included in the Node.JS environment though.
Then, when trying to compile my index.js file (with 'node index.js'), I obviously get an error about 'require' not recognized method.
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users...index.js from C:\Users...index.js not supported.
I tried then to install Webpack to fix this issue, but nothing change. I also kind of installed CommonJS (npm i common-js)..
Another common answer was to remove 'type':'module' from package.json file which normally should allow to use 'require', but I don't even have such a line in the file.
On top of that I've recently read that 'require' is not compatible with browser development tools (it's ok). But I'm trying to import a downloaded module/npm package in VSC terminal, not even in a browser.
As you understand I'm new to Node.JS, but I don't really get what's going on in this case...
I'm working in a project that has multiple typescript projects. I'm trying to have a common package for all the interfaces, types, enums, etc.
I thought I could make it work creating a NPM package with Typescript and have an index.ts with this content:
When I'm working in the projects that depend on this package, everything seems fine, but when I want to start the development environment I'm getting this error:
I've got the suggestion of running ts-node with --skipIgnore flag, but I'm getting the same error:
Maybe I needed to compile the code and import the .js (doesn't make ANY sense, but at this point 🤷🏽♂️)... no luck.
Let me share both tsconfig.json:
The one from the "common" package:
The one from the project that depends on the common package:
Things suggested and tried:
Because your target is ES6, commonjs modules cannot use your package. The dependent project should change its module type to ES6 as well - #kellys
Changing project's module to ES6, brings me this error:
All right, let's add moduleResolution: "node" ... and I'm getting:
So I'm adding "type":"module" in package.json:
I have following app structure:
Application A
Application B
Common package
Now Application A and B have in package.json the common package added:
{
dependencies: {
"commonPackage": "file:../../../commonPackage"
}
}
both apps use React, as well as the common package, all had React added with npm, and it worked, before we started to use react hooks.
Because when we started, we got an Invalid Hook Call Warning due to having "more than one copy of React", so to avoid that, in the common package, the react dependency was moved to peerDependencies so that the react instance from the app is used and not from the package.
It works great in the browser when we run both apps A and B, but when I run my mocha tests in the console, I get:
ERROR in ../commonPackage/~/#uifabric/utilities/lib/customizations/Customizer.js
Module not found: Error: Can't resolve 'react' in 'D:\myProject\commonPackage\node_modules\#uifabric\utilities\lib\customizations'
this is from the office-ui-fabric-react package we use, but it seems like a more general issue with dependency resolution.
Project is in TypeScript, we use webpack for the compilation of the app for the browser, and tsc to compile for the unit tests.
I found some answers, suggesting to npm link react in the common package to the react package in the application node_modules, but it seems wrong, since the common package is used by two applications, it would solve the issue only for one.
In the case above we finally came to a solution which was
adding back react as devDependency to Common package
using esm package to help our test runs understand es6 module export/import that came with fabric package. Just using mocha --require esm ...
ejecting and adding alias to webpack.config.js in Application
alias: {
'react': path.resolve('./node_modules/react')
}
Application A, B and hooks work now.
I am trying to convert Express.js project to binary, and I am using zeit/pkg libary. However, it gave me an error every time I try to use pkg.
Is there a way that I can force Node/Npm to use es5 instead of es6.
in your snapshot the module is being imported from ..er/node_modules/safefs/es6/lib/safefs.js
notice it is importing from es6 which has export keyword. that means its an es6 module and your node supports 'commonjs' require.
which is why this require may be failing.
you can download latest version of node where you can resolve es6 modules.
I am trying to use CommonJS module format, with create-react-app (CRA). The documentation for CRA says:
..Create React App can consume both CommonJS and ES modules. For Node.js
compatibility, it is recommended that the main entry point is CommonJS...
I am finding that when I import a module that offers ES6 module format (via is "module" property in "package.json"), then CRA uses this as the entry point for the module.
Thus - even when my project is using CJS entirely, it then tries to import ES6 modules - and fails.
So - Is this a bug? Or, am I misunderstanding the intended behaviour of create-react-app?
Reproducing
I have reproduced this here: https://github.com/mjashanks/cra-test. This project is a basic CRA skeleton, modified to used CJS.
Additionally, I have added a "test-module", whose a package.json includes a "main" (CJS) and "module" (ES6) entry point.
If we run npm start, the project fails to build, as the file "test-module/index.esm.js" is being used. (We can edit this file to use CJS format to make the project build and make this more clear).
"test-module/index.cjs.js" is never used.
Thanks :)
I found that this actually turned out to be an issue (actually expected behaviour) with Webpack: https://github.com/webpack/webpack/issues/5756