Giters

catamphetamine / webpack-isomorphic-tools

Server-side rendering for your Webpack-built applications (e.g. React)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SyntaxError: Unexpected token < (skipping require call, fallback to original loader)

egorovli opened this issue · comments

commented

Hi. Thanks for the awesome package, it's been a life saver many times 👍

I'm experiencing a weird issue though, although I think I copy-pasted a working project config into a new one. In the debug output webpack-isomorphic-tools skips certain files although they should be handled by an appropriate loader:

[webpack-isomorphic-tools] [debug] require() called for /Users/egorovli/Dev/project/src/files/icons/down.svg
[webpack-isomorphic-tools] [debug]  skipping require call for ./files/icons/down.svg
[require-hacker] [debug] Fallback to original loader
/Users/egorovli/Dev/project/src/files/icons/down.svg:1
(function (exports, require, module, __filename, __dirname) { <svg fill="#FFFFFF" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><g transform="translate(0,-952.36218)"><path style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" d="m 49.99998,1029.784 5.50004,-5.25 40,-37.99995 -11,-11.5937 -34.50004,32.78115 -34.5,-32.78115 -11,11.5937 40,37.99995 5.5,5.25 z" fill="#FFFFFF" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"></path></g></svg>


SyntaxError: Unexpected token <
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Module._extensions..js (module.js:646:10)
    at newLoader (/Users/egorovli/Dev/project/node_modules/pirates/lib/index.js:96:7)
    at Object._module2.default._extensions.(anonymous function) [as .svg] (/Users/egorovli/Dev/project/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:293:60)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/egorovli/Dev/project/src/client/components/Landing/index.jsx:18:36)
    at Module._compile (module.js:635:30)
    at Module._compile (/Users/egorovli/Dev/project/node_modules/pirates/lib/index.js:91:24)
    at Module._extensions..js (module.js:646:10)
    at Object.newLoader [as .jsx] (/Users/egorovli/Dev/project/node_modules/pirates/lib/index.js:96:7)
[nodemon] app crashed - waiting for file changes before starting...

I've created a gist with all the debug output, stats, assets, etc.: https://gist.github.com/egorovli/0f1ef236b5ec17940e60bcbd6e8b4efa

I run app with yarn dev:

"scripts": {
  "dev": "run-p dev:*",
  "dev:client": "webpack-dev-server -d --env.dev",
  "dev:server": "nodemon ./src/server/index.js -w ./src/server -x babel-node | bunyan"
}
"webpack-isomorphic-tools": "^3.0.5"
node v8.9.1
commented

Your webpack treats SVG files differently hence the error.
Configure your SVG file loading properly.
Example of React SVG loading:
https://github.com/catamphetamine/webpack-isomorphic-tools#svg-react-loader-css-stylesheets-with-css-modules-feature

commented
commented

Thanks. I know it may seem like an error in webpack config, but if you look in the files in the gist webpack is configured properly:

{
  test: webpackIsomorphicToolsPlugin.regularExpression('files'),
  include: /src\/files/,
  loader: 'file-loader',
  options: {
    name: env.dev ? '[path][name].[ext]' : 'assets/[hash:12].[ext]'
  }
}

if I console.log it I get:

{
  test: /\.(png|jpg|gif|ico|svg|xml|json)$/,
  include: /src\/files/,
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]'
  }
}

isomorphic config has correct extensions, too:

module.exports = env => ({
  webpack_assets_file_path: env.dev
    ? '../webpack.assets.json'
    : '../dist/webpack-assets.json',
  debug: true,
  assets: {
    files: {
      extensions: [
        'png',
        'jpg',
        'gif',
        'ico',
        'svg',
        'xml',
        'json'
      ],
      include: [
        /src\/files/
      ]
    }
  }
})

and in the assets the .svg file is correctly resolved:

"./files/icons/down.svg": "http://localhost:8081/files/icons/down.svg"

it also appears in the stats:

{
  "name": "files/icons/down.svg",
  "size": 875,
  "chunks": [],
  "chunkNames": [],
  "emitted": false
}

The same thing happens to any file, not just svgs:

[webpack-isomorphic-tools] [debug] require() called for /Users/egorovli/Dev/project/src/files/images/cover.jpg
[webpack-isomorphic-tools] [debug]  skipping require call for ./files/images/cover.jpg
[require-hacker] [debug] Fallback to original loader
/Users/egorovli/Dev/project/src/files/images/cover.jpg:1
(function (exports, require, module, __filename, __dirname) { ����
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:605:28)
    at Module._extensions..js (module.js:652:10)
    at newLoader (/Users/egorovli/Dev/project/node_modules/pirates/lib/index.js:96:7)
    at Object._module2.default._extensions.(anonymous function) [as .jpg] (/Users/egorovli/Dev/project/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:293:60)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/egorovli/Dev/project/src/client/components/Landing/index.jsx:7:1)
    at Module._compile (module.js:641:30)
    at Module._compile (/Users/egorovli/Dev/project/node_modules/pirates/lib/index.js:91:24)
    at Module._extensions..js (module.js:652:10)
    at Object.newLoader [as .jsx] (/Users/egorovli/Dev/project/node_modules/pirates/lib/index.js:96:7)
[nodemon] app crashed - waiting for file changes before starting...

😞

commented

Ok, I think I've found the culprit here, if I remove

include: [
  /src\/files/
]

from isomorphic config, everything works. Since I guess the relative path gets tested (./files/images/cover.jpg), not the absolute one. I replaced it with:

include: [
  /\.\/files/
]
commented