I have added dygraphs to a large, existing project which was created with create-react-app. Everything runs well, I am importing dygraphs using the common syntax:
import Dygraph from 'dygraphs';
However when I try to build my project with npm run build the ES6 bits of dygraphs cause the build to fail:
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
..dev/node_modules/dygraphs/src/dygraph-utils.js:325
Read more here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
Following the link and looking at line 325 the minifier is tripping over the ES6 => operator. Looking under node_modules/dygraphs, there are src and src-es5 directories. I renamed src to src-es6 and created a symlink:
src -> src-es5
Everything runs and builds just fine using this method but it doesnt seem like the best solution. The link provided suggests ejecting from the create-react-app rig and handling the build myself but that is not an option.
Any suggestions on a more proper way to handle this? Is there a specific way to import Dygraph from the es5 src directory instead?
I can confirm that the workaround as suggested by #danvk works fine.
All you need to do is go to package.json at location - node_modules/dygraphs/package.json and change module value from index to index.es5 and the build works just fine.
It's a bit of a hack, till the time this gets resolved. There is already a ticket opened for this
Related
I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
I init a new project using react native 0.61.2 , using react-native init proj command, after that when I try to react-native run-android, the build fails with this error :
FAILURE: Build failed with an exception.
Where:Script '..\node_modules#react-native-community\cli-platform-android\native_modules.gradle' line: 182
What went wrong:
A problem occurred evaluating script.
Unable to determine the current character, it is not a string, number, array, or object
The current character read is 'D' with an int value of 68
Unable to determine the current character, it is not a string, number, array, or object
line number 1
index number 0
as i mentioned, it's a fresh project.
any idea how to fix this ?
I ran into the same issue today and noticed that react recently released new versions to react-native and react.
I downgraded to versions i know work properly which are:
"react": "~16.8.0",
"react-native": "~0.60.0"
cleared all cache and the project loads correctly.
in order to do so change the dependencies in your package.json file
then delete your node_modules directory, package.lock file and run npm cache clean
finally run npm i
perhaps there are still issues in the new releases.
I am aslo facing the same issue. Downgrading works, however i have two other projects that r working fine and they are react native 0.61.2
Only new projects are giving this error. I read in some blogs that removing react community cli from global and trying again might do the trick.
Will try that tomorrow and post my findings.
Look for mistakes in your AndroidManifest.xml!!!
For me, I solved this by replacing the character ” with "
(And also read some people telling that unclosed tags did that too)
As dumb as it looks, I got to this error from following a tutorial.
(tip: VS code would often show these quotes in different colors, unless you have installed another XML files extension)
I ran into the same issue in a fresh project with RN 0.64.0. The project was created inside a monorepo that was using Yarn workspaces. In my case, Yarn had moved or "hoisted" the #react-native-community/cli-platform-android/native_modules.gradle file to the root node_modules directory.
The Android project's settings.gradle and build.gradle files are expecting the #react-native-community/cli-platform-android/native_modules.gradle file to be in the RN project's node_modules directory and not the repo's root node_modules directory.
Try updating line 2 of settings.gradle to something like:
apply from: file("../../../node_modules/#react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
And line 222 of build.gradle to something like:
apply from: file("../../../../node_modules/#react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
Obviously, you will need to adjust how many leading ../ you add to the path depending on how nested your project is.
You could also look into using the nohoist options available with Yarn to keep packages from moving around.
Trying to add bootstrapVue to my project has scrambled my dependencies in my webpack Vuejs project. Everything was dandy until I tried to implement this npm install and subsequent change to "webpack.config.js". Immediately everything began to fall apart. The dev server couldn't compile for various reasons, so I did 'npm uninstall style-loader css-loader'. That didn't help. Eventually I came across a solution that involved removing my changes to the "webpack.config.js" file. Cool, now I could at least run my project again.
Somewhere along the line my node_modules/babel-loader/package.json file started giving me problems. Inside, the bundleDependencies: has a value of false. VS Code is telling me it should be an array of package names. Okay, I'm not sure how I can remedy this warning, so I ignore it.
I added a new .vue component to my src/components file named 'Table.vue' to use within my main App.vue. Added my import Table from ".components/table"; line to my App.vue file. Now my dev server fails to compile for this reason: terminal error.
In this project, I've already installed: axios, vue-axios, sass-loader, node-sass, webpack, bootstrap, bootstrap-vue. I'm pretty new to all of this so any help would be greatly appreciated. Worst case scenario I just start from scratch and copy paste my code.
I am new, and when i first created my app based on the documentation using npm create-react-app i found it there were a lot of package included inside folder node_module when i code and i only use react and react DOM and etc from the basic.
node_modules
acorn
timer
ansi
and many more
I wonder if anyone can help my how to understand each use inside the node_module or where can i find the documentation for each use?
or how can i just reduce to what i want to use only to decrease the app size?
The answers are 2:
because you're using an automated scaffolding tool, which essentially does everything for you, and, you have just to code, it is supposed to locally deploy all the packages it needs to work (for example webpack is needed to bundle your code, babel to transpile it, ...
under node_modules you will find all the packages of the whole app. That's means you will find both your dependencies and the dependencies of your dependencies (this rule has some exceptions and you can find them in the npm documentation.
example:
// your code depends on A
var dependency = require('A');
// but then, inside your A dependency you can also find something similar to:
var b = require('B');
how can i just reduce to what i want to use only to decrease the app size?
You basically can't do it. They are all needed.
Most of the libraries that we pull from npm have dependencies. You may use only react and react-dom but there are react-scripts that require lots of stuff. I don't think that you have to worry about the size of the node_modules. That's not what you are suppose to ship in production.
If you want to see what are these all modules about you may open their folder and fine README.md file.
I am a semi noob in web development.
I just started playing around with angular2 today. And i ran into a problem..
If I were to install angular2 with npm to my local computer, which file is the js file that should be linked to the html page that show up on the client?
In their guide, i see a file called /node_modules/angular2/bundles/angular2.sfx.dev.js. But i don't even see this file at all.
Is there some script that i should run to build that file? Or is the file renamed? I am really confused.
I tried some file /angular2/bundles/angular2.js, but it doesn't even export ng variable to window!
I see that in https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js, eventually ng gets exported. But what changed in alpha 53? (the version i get for doing npm install angular2)
In my projects, I a using
"node_modules/angular2/bundles/angular2.dev.js"
You might additionally need to install/add systemjs, just in case you are using the systemjs library.