I'm using react-id-swiper in a project but IE11 breaks the app. I was reading that you need to transpile with webpack config but that doesn't work with Next.js webpack.
next.config.js
const webpack = require("webpack");
module.exports = {
webpack: (config, { defaultLoaders }) => {
config.module.rules.push({
exclude: [/node_modules\/(?!(swiper|dom7)\/).*/, /\.test\.js(x)?$/],
test: /\.js(x)?$/,
use: defaultLoaders.babel
});
return config;
}
};
Had this same issue last week and next-transpile-modules saved me. Next won't transpile extra NPM packages. So frustrating but at least this exists.
https://github.com/martpie/next-transpile-modules
Related
I'm running into an error after installing Apollo when trying to run my React Native Expo app. I've tried deleting node-modules and re-installing, resetting cache, restarting computer, and still no luck.
Android Bundling failed 456ms
While trying to resolve module #apollo/client from file >/mnt/c/Users/14044/Desktop/Coding/divii/client/App.tsx, the package >/mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/#apollo/client/package.json >was successfully found. However, this package itself specifies a main module field that >could not be resolved >(/mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/#apollo/client/main.cjs. Indeed, none of these files exist:
/mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/#apollo/client/main.cjs(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json)
/mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/#apollo/client/main.cjs/index(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json)
This is a conflict between #apollo/client v3.5.4 and RN metro bundler.
As a workaround until this issue is resolved, you can configure Metro by creating a metro.config.js file in the root of your React Native project with following content:
const { getDefaultConfig } = require("metro-config");
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();
exports.resolver = {
...defaultResolver,
sourceExts: [
...defaultResolver.sourceExts,
"cjs",
],
};
This workaround was posted on Apollo Github Releases page
here.
This is an issue with the latest version of Apollo Client (3.5.0 and up) and the way Metro bundler works. You need to configure Metro to understand the .cjs files used in #apollo/client by creating a metro.config.js in the root folder of your project.
Here is the link to a solution on the Apollo releases page.
I tried the solution, it didn't work, the error was solved, but the build broke for other packages in the project, so I tried a similar but different approach
Here is my metro.config.js
const {getDefaultConfig} = require('metro-config');
module.exports = (async () => {
const {
resolver: {sourceExts},
} = await getDefaultConfig();
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: [...sourceExts, 'cjs'],
},
};
})();
Try downgrading to #apollo/client 3.4.16. I just did a round of package updates and the 3.5.4 broke my build as well. I'm using the downgraded package with a downgraded version of graphql lib as well -- 15.7.2.
Those are the last versions that worked for me with the current version of Expo / RN.
Hope that helps you out!
For anyone using Expo and the new Apollo Client, you should update your metro.config.js to look like this:
const { getDefaultConfig } = require('#expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.sourceExts.push('cjs');
module.exports = defaultConfig;
It's important to make sure you use the expo metro config defaults otherwise eas will complain at build time.
Had the same issue in a Vanilla/Bare React Native Project with Apollo Client 3.5.8
The project already had the default metro.config.js
I just modified it to the following code :
const {getDefaultConfig} = require('metro-config');
const {resolver: defaultResolver} = getDefaultConfig.getDefaultValues();
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
...defaultResolver,
sourceExts: [...defaultResolver.sourceExts, 'cjs'],
},
};
With this change the issue was resolved
I have Vue.js project I've setup previously that dynamically adds defined .scss files to my .vue template files, so I can access my variables, mixins, etc. in the templates without #importing them, or having them duplicate code from imports.
My problem is I'm setting up a NativeScript/Vue.js project with vue-cli-plugin-nativescript-vue and was curious if anyone has successfully setup their webpack to allow the same functionality. It's my understanding that the plugin replaces webpack with the latest when you run, as specified in the docs https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule.
Below is my vue.config.js (which compiles with no error) but doesn't seem to be working. I'm probably missing something or don't understand exactly how this is working, any help is appreciated.
const path = require('path')
module.exports = {
chainWebpack: config => {
const ofs = ['vue-modules', 'vue', 'normal-modules', 'normal']
const cssRules = config.module.rule('css')
const postRules = config.module.rule('postcss')
const addSassResourcesLoader = (rules, type) => {
rules
.oneOf(type)
.use('sass-resoureces-loader')
.loader('sass-resources-loader')
.options({
resources: './src/styles/_global.scss', // your resource file or patterns
})
}
ofs.forEach(type => {
addSassResourcesLoader(cssRules, type)
addSassResourcesLoader(postRules, type)
})
return config
},
}
Vue CLI provides a config to augment your CSS loaders:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
// sass-loader#^8.0.0
prependData: `import "~#/styles/_global.scss";`,
// sass-loader#^9.0.0 or newer
additionalData: `import "~#/styles/_global.scss";`,
}
}
}
}
React native documentation state that
"You can also use this babel plugin that removes all the console.* calls. You need to install it first with npm i babel-plugin-transform-remove-console --save-dev, and then edit the .babelrc file under your project directory like this"
{
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}
I didn't find .babelrc file. Hence I made the following changes in babel.config.js file.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
env: {
production: {
plugins: ["transform-remove-console"]
}
}
};
But it's not working for me. The logs are displayed when I've tested them in Android Studio. What went wrong here?
The documented approach didn't work for my existing project either, but it worked in a new test project. I tried numerous dependency upgrades, adding/removing deps, plugins, etc. trying to figure out the source of the problem, but no luck. So finally I went with this workaround:
module.exports = {
plugins: ['#babel/plugin-proposal-numeric-separator', 'lodash'].concat(
process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : []
),
presets: [
'module:metro-react-native-babel-preset',
['#babel/env', { targets: { node: 6 } }]
]
};
This should work (recommended method)
const presets = ['module:metro-react-native-babel-preset'];
const plugins = ['module:react-native-dotenv'];
if (process.env.ENV === 'prod') {
plugins.push('transform-remove-console');
}
module.exports = {presets, plugins};
Or if you don't want to use any package for this you can do this.
Place this in index.js
if(!__DEV__){
console.log = () => {}
}
yarn run storybook failed with error
specific details are :
Module parse failed: Unexpected character '#'
File was processed with these loaders:
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
Storybook 5.2.3
webpack 4.41.0
Update:
This lead me to another error
[Vue warn]: Failed to mount component: template or render function not
defined. found in
and it got resolved when I added
const path = require('path');
module.exports = async ({ config, mode }) => {
config.module.rules.push({
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
},
}
],
});
return config;
};
and removed the previous vue-loader section.
After trying out different options, error got resolved when a webpack.config.js file was created in .storybook/ folder with the following content.
const path = require('path');
module.exports = async ({ config, mode }) => {
config.module.rules.push({
test: /\.vue$/,
loader: require.resolve('vue-loader'),
include: path.resolve(__dirname, '../src/'),
});
return config;
};
Important thing is resolving loader plugin like this require.resolve('vue-loader') and then re-run the yarn command again.
I'm trying to add the correct pdf loader to my nuxt.config.js file but nothing seems to be working so far. This is what I have in my build config, I'm pretty sure I need to add another rule to get pdf working but is not happening.
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/,
});
}
},
},
I had the same issue with my downloadable pdf files and solved it by moving the download's folder to the static directory.
You are able to archive this by extending the build config in the nuxt.config.js.
module.exports = {
build: {
extend(config) {
// Find the rule which contains a assets file extension
const assetsLoader = config.module.rules.find(rule => rule.test.test('.png'));
// Overwrite the test regex and add `pdf`
assetsLoader.test = /\.(png|jpe?g|gif|svg|webp|pdf)$/i;
return config;
},
},
};
One of the ways to resolve it is by loading the instance of jspdf in the client-side.
if(process.client) {
const jsPDF = require('jspdf');
require('jspdf-autotable');
let doc = new jsPDF();
// ...your code
}
As per the Nuxt Documentation, check this out Window Document Undefined.