I have been fighting with this trying to find a solution and trying solutions left and right, and I can't seem to figure this one out.
With React Native we have .ios and .android file extensions. Each of which the React Native packager will handle for us. Now, I'm using webpack (because I love to torture myself) and I cannot get it to resolve the filename extensions properly. Using the React Native Webpack Server (which there seemed to be no solution for this), it returns an error that looks similar to this:
This is due to there being a .ios and .android file being called as: require('Spinner'); The React Native packager will resolve these files, webpack will not. I need to mix these two to get this to work, or is there now a magical solution to where I don't have to use webpack at all anymore.
I think I'm getting my point across with this alone, and wondered if there is a webpack extension or a resolve alias I can use to fix this issue. If needed I will post my webpack setup here.
Let me share my inspiration :)
You can split webpack config into two configs with single entry point in each. Then specify .ios.js and .android.js extensions in resolve section:
entry: {
'index.ios': ['./src/main.ios.js']
},
...
resolve: {
extensions: ['', '.js', '.ios.js', ...] // '.android.js' will be in other config
}
Or you can write own loader, but it needs more inspiration.
Related
I'm working on putting together a small app using vue, and I specifically need it to run on a device that does not support ES6. I'm using vue-cli-service build to build, and when trying to open this page on my ES5 device, I'm seeing this error SyntaxError: Unexpected token '...'. Expected a property name.
I have installed babel, and added this to my .babelrc: { "presets": ["#babel/preset-env"] }
I'm not really sure what else to try, I haven't been able to find anything that specifically addresses this. Even the vue-cli-service documentation suggests ways to support polyfill for ES5, but I don't think this is the same thing.
I had this problem with Vuetify and Safari 11.1
I guessed I needed to transpile the ES6 version of Vuetify for older browsers. The solution was difficult to search for, as most of the suggestions were about modifying webpack or babel configuration, which I find obscured inside Vue CLI.
I eventually uncovered the solution myself by rebuilding my project from scratch via Vue CLI, and the installer magically added a transpilation option for Vuetify which I was missing - I think because I had previously upgraded Vuetify across the ES5 to ES6 versions, and perhaps their upgrade script doesn't perform this step.
vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
],}
this is the equivalent of webpack
build: {
transpile: ['vuetify']
}
Restart the build and reload.
Of course you will need to find which of your packages it is - this is just an example. I just dug around in the error stack until finding something which belonged to Vuetify.
I am trying to reduce the size of my SPA build, which gets build using vue-cli build. I am using Chart.js and after building the application, I ran webpack-bundle-analyzer and it shows Chart.js with it's full size, and not chart.min.js.
What I am expecting is that it would use /dist/chart.min.js. I am not understanding this correctly, or is it actually using the non-minified file?
I got around to having another look at this and this is simply because vue-chartjs needs chart.js as peer dependency and is thus not taking care of anything in my side of the build step.
Related: https://github.com/apertureless/vue-chartjs/issues/249
The fix is to configure it accordingly in the webpack config:
resolve: {
alias: {
'chart.js$': 'chart.js/dist/Chart.min.js',
},
},
This is my babelrc file. installed module-resolver and declared root and aliases.
actually this do works!! but underline annoying me... please click images below I cannot post images cause I'm new here.
[https://i.stack.imgur.com/ZzN5O.png]
warning like this - module is not installed i think intelliJ recognize it as module..
[https://i.stack.imgur.com/GTcWx.png]
I changed my root "./" -> "./src" but it didn't work.
I also installed eslint but don't know about that well I think that won't help this problem
has anyone solved this kind of issue before?
IDEA provides no special support for babel-resolver; please follow WEB-28241 for updates.
The problem is that there are dozens of plugins defining their own ways to resolve modules, we can't afford providing special support for all them... You can try using webpack aliases instead, or try a workaround from https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0:
create a file config.js (you can use a different name if you like) in your project root dir
define your aliases there using the following syntax:
System.config({
"paths": {
"components/*": "./src/components/*"
}
});
components here is the alias you have defined in .babelrc
Now you can use imports like
import MyComponent from 'components/core/MyComponent';
in your code
Can anyone experienced with Webpack/npm components take a loot at: https://github.com/appcomponents/material-components/issues/4 ?
Basically - it is giving error Uncaught Error: Cannot find module "./components" when using this package with npm inside webpack project.
Simple for someone with knowledge but totally blocking for someone totally not into components/webpack.
It's some simple issue with path configuration which is making it impossible to use this really nice package.
I have copied my comment from the GitHub issue as this should have as much visibility as possible.
The issue is with the webpack.config.js. It's not resolving modules correctly.
I've created a pull request (#8) to resolve this issue. You can use that repo commit in the meantime, or you can modify the webpack.config.js file manually in node_modules/vue-material-components/. I've tested this with a known working Vue.js webpack config.
I'm putting together a streamlined development process with react and react-native that:
encourages packages,
uses babel to transform es6 to js (it compiles before publishing/installing),
has a playground that let's you play with both native and web components.
The web part of it is perfectly fine. It's the native one that's causing issues and it has to do with react-native's packager.
The bottom line is: if the package is either linked through npm link or required directly from the playground as in require('../../') react-native's dependency resolver will go forever trying to identify dependencies inside my package's node_modules, most times it never finishes doing it.
The temporary solution I've found is to install the package in playground but this involves re-installing it every time I do an update, which isn't great because you can't see your changes right away (even if it would be automated, it would take time).
I believe that a better solution would be to ask the dependency resolver to ignore those specific modules I don't need (those in devDependencies mainly!). I tried mangling react-native/packager/blacklist.js by adding paths to that list and even putting checks against the dependency resolver but none of that would work.
Can someone with more experience with the packager give me a hint as to how I'd go about making the dependency resolver pass? Alternatively, it would be great if the packager could be separated and the transform process left to choice but I don't know if that would be doable either.
I found out the following solution, based on the comment in default.config.js:
* If you need to override any of this functions do so by defining the file
* `rn-cli.config.js` on the root of your project with the functions you need
* to tweak.
Create a rn-cli.config.js in the root of your project with the following contents:
var blacklist = require('react-native/packager/blacklist');
var config = {
getBlacklistRE(platform) {
return blacklist([
/node_modules\/my-package\/excluded-dir\/.*/
]);
}
};
module.exports = config;
The second argument to the blacklist function is an additional list of blacklisted paths, which can be regular expressions. See react-native/packager/blacklist.js for more examples.