Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Requiring .js from .html doesn't use defined loaders #124

Closed
wilsonpage opened this issue May 4, 2017 · 4 comments
Closed

Requiring .js from .html doesn't use defined loaders #124

wilsonpage opened this issue May 4, 2017 · 4 comments
Assignees
Projects
Milestone

Comments

@wilsonpage
Copy link

I'm submitting a bug report

Webpack version:
2.x

HTML-Loader version:
0.4.5

Please tell us about your environment:
OSX 10.x / Linux / Windows 10

OSX

Current behavior:

Webpack is not running defined loaders on modules imported into .html entrypoints.

Expected/desired behavior:

I expect the following module to be run through my defined babel-loader, but it's choking on ES6 syntax.

<script async src="${require('./index.js')}"></script>
  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.
module.exports = {
  context: `${__dirname}/src`,
  entry: './index.html',

  output: {
    path: `${__dirname}/.dist`,
    filename: '[name].[hash].js',
  },

  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          'file-loader',
          'extract-loader',
          'html-loader?interpolate',
        ]
      },

      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['env'],
            },
          },
        ],
      },
    ]
  }
}
  • What is the expected behavior?

Imports within .html files should be treated as defined in the webpack config.

@wilsonpage
Copy link
Author

wilsonpage commented May 4, 2017

ERROR in ./index.html
Module build failed: /Users/wilsonpage/Documents/s/project/src/index.js:4
import Converter from './lib/converter';
^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at /Users/wilsonpage/Documents/s/songwhip/songwhip-site/node_modules/extract-loader/lib/extractLoader.js:73:24
    at require (/Users/wilsonpage/Documents/s/songwhip/songwhip-site/node_modules/extract-loader/lib/extractLoader.js:56:33)
    at /Users/wilsonpage/Documents/s/songwhip/songwhip-site/src/index.html:1:1159
    at ContextifyScript.Script.runInContext (vm.js:35:29)
    at ContextifyScript.Script.runInNewContext (vm.js:41:15)
    at Object.extractLoader (/Users/wilsonpage/Documents/s/songwhip/songwhip-site/node_modules/extract-loader/lib/extractLoader.js:87:12)

@joeyciechanowicz
Copy link

I'm seeing the same thing occurring when using html-loader and also null-loader to handle images in tests.

Webpack version: 3.3.0
html-loader version: 0.4.5

@danieldiekmeier
Copy link

I think this may have had to do with the way extract-loader handled requires. They just released the v1.0.0 in which this was fixed. (At least in my experience.) Maybe give that one a try!

@michael-ciniawsky
Copy link
Member

Closing in favor of #33

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

No branches or pull requests

4 participants