Module parse failed: Unexpected token (1:0) when combined with html-webpack-plugin #322

LariSinisalo · 2023-10-04T14:39:58Z

Reporting a bug?

When using webpack with both html-webpack-plugin and @intlify/unplugin-vue-i18n, the compilation fails with:

Error: Child compilation failed:
  Module parse failed: Unexpected token (1:0)
  File was processed with these loaders:
   * ./node_modules/unplugin/dist/webpack/loaders/load.js
   * ./node_modules/html-webpack-plugin/lib/loader.js
  You may need an additional loader to handle the result of these loaders.
  > <!DOCTYPE html>
  | <html>
  | <head>
... further lines omitted ...

The @intlify/unplugin-vue-i18n for some reason ends up as an additional loader for index.html, even though it is not being configured so. Omitting either plugin makes the compilation pass, so this seems to be a strange interaction between the plugins.

Expected behavior

I'd assume there should be no errors.

Reproduction

Please see https://stackblitz.com/edit/htmlplugin-t3ibcm

It should start building automatically and display the error in both terminal and the right hand side. If it does not start automatically, use in the terminal: npm install && npm start

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.12 - /usr/local/bin/pnpm
  npmPackages:
    @intlify/unplugin-vue-i18n: ^1.4.0 => 1.4.0 
    vue-i18n: ^9.5.0 => 9.5.0

Screenshot

Additional context

No response

Validations

Read the Contributing Guidelines
Read the Documentation
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussions

The text was updated successfully, but these errors were encountered:

LariSinisalo · 2023-10-04T14:48:46Z

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.

LariSinisalo · 2023-10-04T15:03:06Z

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?

lk77 · 2023-10-04T16:04:57Z

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

LariSinisalo · 2023-10-06T09:26:08Z

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?

LariSinisalo · 2023-10-06T10:29:47Z

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.

LariSinisalo · 2023-10-06T16:26:30Z

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.

lk77 · 2023-10-09T07:23:02Z

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

kazupon · 2023-10-16T02:34:40Z

Thank you for reporting!
This issue is unplugin-vue-i18n.
So, I'll transfer to it.

SuperSchek · 2023-10-24T13:43:19Z

+1

Druelik · 2024-01-15T08:34:06Z

I have the same problem. Does anyone have a workaround or a bug fix for this?

lehmat · 2024-01-19T08:35:27Z

+1

lehmat · 2024-01-19T09:52:27Z

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

ForesightImaging · 2024-02-02T21:16:54Z

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.

Arlisaha · 2024-03-08T15:56:30Z

I have the same issue. However, it seems it only occurs using ejsformat. I switched to hbs and it disappeared.

LariSinisalo added the Status: Review Needed Request for review comments label Oct 4, 2023

kazupon transferred this issue from intlify/vue-i18n-next Oct 16, 2023

kazupon added the Package: unplugin-vue-i18n label Oct 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module parse failed: Unexpected token (1:0) when combined with html-webpack-plugin #322

Module parse failed: Unexpected token (1:0) when combined with html-webpack-plugin #322

LariSinisalo commented Oct 4, 2023 •

edited

LariSinisalo commented Oct 4, 2023

LariSinisalo commented Oct 4, 2023

lk77 commented Oct 4, 2023 •

edited

LariSinisalo commented Oct 6, 2023

LariSinisalo commented Oct 6, 2023 •

edited

LariSinisalo commented Oct 6, 2023

lk77 commented Oct 9, 2023 •

edited

kazupon commented Oct 16, 2023

SuperSchek commented Oct 24, 2023

Druelik commented Jan 15, 2024

lehmat commented Jan 19, 2024

lehmat commented Jan 19, 2024 •

edited

ForesightImaging commented Feb 2, 2024

Arlisaha commented Mar 8, 2024

Module parse failed: Unexpected token (1:0) when combined with html-webpack-plugin #322

Module parse failed: Unexpected token (1:0) when combined with html-webpack-plugin #322

Comments

LariSinisalo commented Oct 4, 2023 • edited

Reporting a bug?

Expected behavior

Reproduction

System Info

Screenshot

Additional context

Validations

LariSinisalo commented Oct 4, 2023

LariSinisalo commented Oct 4, 2023

lk77 commented Oct 4, 2023 • edited

LariSinisalo commented Oct 6, 2023

LariSinisalo commented Oct 6, 2023 • edited

LariSinisalo commented Oct 6, 2023

lk77 commented Oct 9, 2023 • edited

kazupon commented Oct 16, 2023

SuperSchek commented Oct 24, 2023

Druelik commented Jan 15, 2024

lehmat commented Jan 19, 2024

lehmat commented Jan 19, 2024 • edited

CustomPlugin

../src/translations/compile.js

Changes to your main webpack createI18n

ForesightImaging commented Feb 2, 2024

Arlisaha commented Mar 8, 2024

LariSinisalo commented Oct 4, 2023 •

edited

lk77 commented Oct 4, 2023 •

edited

LariSinisalo commented Oct 6, 2023 •

edited

lk77 commented Oct 9, 2023 •

edited

lehmat commented Jan 19, 2024 •

edited