Comments (14)
Before creating the minimal reproduction sample, I tried to debug the compilation problem using the method documented at https://indepth.dev/posts/1166/this-will-make-you-more-efficient-at-debugging-webpack-unspecified-build-errors
This led to finding out that the error message source is from the index.html data being passed to a JavascriptParser:
In the above screenshot you can see the 'this.parser' value (JavascriptParser) and 'source' value (the index.html contents).
I did not manage to discover how that JavascriptParser ended up being used.
from bundle-tools.
I noticed that this issue would probably better fit under https://github.com/intlify/bundle-tools/ . If so, would it be possible to transfer this issue there?
from bundle-tools.
The rules don't seems right :
module: {
rules: [
{ enforce: 'post' },
{
enforce: 'post',
use: [
{
loader: '/home/projects/htmlplugin-t3ibcm/node_modules/unplugin/dist/webpack/loaders/load',
options: { unpluginName: 'unplugin-vue-i18n' }
}
]
},
{ test: /\.(.html)$/, exclude: /tests/, use: [ 'html-loader' ] },
{ test: /\.(json5?|ya?ml)$/, type: 'javascript/auto' }
]
},
it seams the loader will process every single file
from bundle-tools.
Where did you find these rules? The rules block in the reproduction sample is empty, so is this a result generated by some later processing step?
from bundle-tools.
By debugging the webpack run to check the rules, I noticed that in node_modules/unplugin/dist/index.js there is:
if (plugin.load) {
compiler.options.module.rules.unshift({
include(id) {
if (id.startsWith(plugin.__virtualModulePrefix))
id = decodeURIComponent(id.slice(plugin.__virtualModulePrefix.length));
if (plugin.loadInclude && !plugin.loadInclude(id))
return false;
return !externalModules.has(id);
},
enforce: plugin.enforce,
use: [{
loader: LOAD_LOADER2,
options: {
unpluginName: plugin.name
}
}]
});
}
Here the plugin.loadInclude
is undefined, and the function returns true
for HTML files, too.
I tested modifying the include(id)
function to have if(id.indexOf(".html") > 0) return false;
, and that made the build pass successfully. This is not a fix, but it supports the above suggestion that there is something wrong with the rules.
from bundle-tools.
Even with a workaround in place, the @intlify/unplugin-vue-i18n seemed to interfere with source maps next.
I ended up moving the @intlify/unplugin-vue-i18n usage to a separate project that has no other plugins defined. This project only compiles the locale data to precompiled messages. The result of this workaround project is then read in the main project and provided via the messages
parameter to createI18n
from vue-i18n.runtime.esm-bundler.js
.
Overall, to me it seems that @intlify/unplugin-vue-i18n attaches a bit too heavily into the Webpack build process and causes side effects in places it would not be expected to affect. When used in a separate project, it works fine.
from bundle-tools.
i used https://www.npmjs.com/package/webpack-config-dump-plugin to dump the config, it's the rules added by the unplugin-vue-18n, i did not found where in the source code, i only found the { test: /\.(json5?|ya?ml)$/, type: 'javascript/auto' },
but not the other ones
https://stackblitz.com/edit/htmlplugin-t3ibcm-fxv235?file=webpack.config.dump
the html rules, i added it myself, but it did not solve anything
from bundle-tools.
Thank you for reporting!
This issue is unplugin-vue-i18n.
So, I'll transfer to it.
from bundle-tools.
+1
from bundle-tools.
I have the same problem. Does anyone have a workaround or a bug fix for this?
from bundle-tools.
+1
from bundle-tools.
I got this working by doing separate webpack plugin that is triggered from main webpack. This ouputs translations to file that is used as precompiled messages. This is VERY HACKY SOLUTION, use with your own risk
CustomPlugin
const webpack = require('webpack');
const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack')
const path = require('path');
class NestedCompilationPlugin {
apply(compiler) {
compiler.hooks.beforeCompile.tapAsync('NestedCompilationPlugin', (compilation, callback) => {
const nestedCompilerConfig = {
mode: 'development',
devtool: 'source-map',
entry: path.resolve(__dirname, '../src/translations/compile.js'),
output: {
path: path.resolve(__dirname, '../src/translations/precompiled'),
filename: 'nestedBundle.js',
library: 'translations',
libraryTarget: 'commonjs2',
},
plugins: [
VueI18nPlugin({
include: [path.resolve(__dirname, '../src/translations/locales/**')]
})
]
};
const nestedCompiler = webpack(nestedCompilerConfig);
nestedCompiler.run((err, stats) => {
if (err) {
console.error(err);
return callback(err);
}
console.log(stats.toString({
colors: true
}));
callback();
});
});
}
}
module.exports = NestedCompilationPlugin;
In your main webpack import and add this plugin to plugins
../src/translations/compile.js
import { createI18n } from 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
import fi from './locales/fi.json'
import sv from './locales/sv.json'
import en from './locales/en.json'
const i18n = createI18n({
legacy: false,
locale: 'en',
messages: {
fi,
sv,
en,
},
})
export default i18n
Changes to your main webpack createI18n
import { createI18n } from 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
import { translations } from './precompiled/nestedBundle.js'
const i18n = createI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
allowComposition: true,
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: translations.default.global.messages.value,
})
export default i18n
from bundle-tools.
First time testdriving and hit this issue with html-loader.
I tried a few things like changing plugin order, tweaking options and down reving to 1.6. I get the same errors as the other folks.
from bundle-tools.
I have the same issue. However, it seems it only occurs using ejs
format. I switched to hbs
and it disappeared.
from bundle-tools.
Related Issues (20)
- Nuxt 3: Unexpected token 'export'. HOT 5
- Indirect dependency semver vulnerable to Regular Expression Denial of Service
- failed to load config vite.config.js HOT 1
- TS error unplugin-vue-i18n 0.12.3 in createI18n HOT 2
- Cannot read properties of undefined (reading 'length') HOT 3
- Improper parsing of linked messages with `-` after 0.12 HOT 2
- @intlify/unplugin-vue-i18n doesn't work with Nuxt 3.7 HOT 1
- Missing dependencies and missing MessageFunctionInternal definition HOT 1
- can not inclue js locale files HOT 2
- Changelog of unplugin-vue-i18n is not up to date HOT 3
- @intlify/unplugin-vue-i18n not support HMR with Static bundle importing HOT 1
- Dependency Dashboard
- Failed locale loading: Unexpected token 'const'. HOT 1
- Rollup 4 support HOT 1
- `onlyLocales` not working for SFC <i18n locale="xx">
- it is not installed using npm install HOT 1
- Webpack build does not work together with html-webpack-plugin HOT 2
- Using HTML in SFC results in parsing issue `Unexpected scalar at node end` HOT 2
- nuxt3国际化报错 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bundle-tools.