using coffee-script with webpack #4276

Radivarig · 2016-06-30T13:58:54Z

When I require with webpack var CoffeeScript = require ('coffee-script') I get the following output

WARNING in ./~/coffee-script/lib/coffee-script/coffee-script.js
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./~/coffee-script/lib/coffee-script/coffee-script.js
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./~/coffee-script/lib/coffee-script/coffee-script.js
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./~/coffee-script/lib/coffee-script/coffee-script.js
Critical dependencies:
175:42-49 require function is used in a way in which dependencies cannot be statically extracted
179:26-33 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/coffee-script/lib/coffee-script/coffee-script.js 175:42-49 179:26-33

WARNING in ./~/coffee-script/lib/coffee-script/register.js
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./~/coffee-script/lib/coffee-script/register.js
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./~/coffee-script/lib/coffee-script/browser.js
Critical dependencies:
8:25-32 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/coffee-script/lib/coffee-script/browser.js 8:25-32

ERROR in ./~/coffee-script/bin/coffee
Module parse failed: /path_to_repo/node_modules/coffee-script/bin/coffee Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
    at Parser.pp.raise (/path_to_repo/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
    at Parser.pp.getTokenFromCode (/path_to_repo/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
    at Parser.pp.readToken (/path_to_repo/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
    at Parser.pp.nextToken (/path_to_repo/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
    at Parser.parse (/path_to_repo/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
    at Object.parse (/path_to_repo/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
    at Parser.parse (/path_to_repo/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/path_to_repo/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/path_to_repo/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/path_to_repo/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
 @ ./~/coffee-script/lib/coffee-script/register.js 52:13-48

ERROR in ./~/coffee-script/lib/coffee-script/coffee-script.js
Module not found: Error: Cannot resolve module 'module' in /path_to_repo/node_modules/coffee-script/lib/coffee-script
 @ ./~/coffee-script/lib/coffee-script/coffee-script.js 129:23-40 169:17-34

ERROR in ./~/coffee-script/lib/coffee-script/register.js
Module not found: Error: Cannot resolve module 'child_process' in /path_to_repo/node_modules/coffee-script/lib/coffee-script
 @ ./~/coffee-script/lib/coffee-script/register.js 7:18-42

ERROR in ./~/coffee-script/lib/coffee-script/register.js
Module not found: Error: Cannot resolve module 'module' in /path_to_repo/node_modules/coffee-script/lib/coffee-script
 @ ./~/coffee-script/lib/coffee-script/register.js 25:13-30

ERROR in ./~/coffee-script/lib/coffee-script/command.js
Module not found: Error: Cannot resolve module 'child_process' in /path_to_repo/node_modules/coffee-script/lib/coffee-script
 @ ./~/coffee-script/lib/coffee-script/command.js 16:8-32

ERROR in ./~/coffee-script/lib/coffee-script/grammar.js
Module not found: Error: Cannot resolve module 'jison' in /path_to_repo/node_modules/coffee-script/lib/coffee-script
 @ ./~/coffee-script/lib/coffee-script/grammar.js 5:11-27

ERROR in ./~/coffee-script/lib/coffee-script/repl.js
Module not found: Error: Cannot resolve module 'repl' in /path_to_repo/node_modules/coffee-script/lib/coffee-script
 @ ./~/coffee-script/lib/coffee-script/repl.js 11:13-28
webpack: bundle is now VALID.

if I include a fatter 160kb local file of coffer-script-1.9.3-min.js everything works but I'd like to avoid adding library build to source if possible.

Any ideas? Thanks

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

vendethiel · 2016-06-30T14:20:34Z

I'd say the error message is pretty self-explanatory: don't require coffeescript directly, use a loader.

Googling "webpack coffeescript loader" gave me https://github.com/webpack/coffee-loader as the first result.

Also, please try to refrain using github issues as a help forum – it's better to use StackOverflow.

Radivarig · 2016-06-30T14:58:53Z

I am trying to use CoffeScript.compile("coffeescript string code") in browser so loader won't work, that is why I posted here.

timhuff · 2017-04-05T15:47:36Z

Future traveler: I'm struggling with the same issue. Seems to not be an unreasonable thing to want (for example, the coffeescript.org website). I was wanting to do this for the purpose of writing an Electron app. My solution was to use IPC to communicate between the browser and the renderer. The browser is a node environment, so I compile it there and then send it back.

Radivarig · 2017-04-05T16:06:45Z

@timhuff using the built library file works for me so I added it as npm package called coffee-script_compiler to avoid adding it to my source, you can try it npm i coffee-script_compiler --save then just require it with webpack and use in browser.

timhuff · 2017-04-05T16:15:34Z

@Radivarig You're a life-saver, man. That's so much nicer. Thanks.

GeoffreyBooth · 2017-04-05T16:41:31Z

You want require('coffee-script/register').

akfish · 2017-04-13T19:38:58Z

I built a custom fork for my project with compiler API exposed for webpack.

Just npm install --save github:akfish/coffeescript#webpack and

import { compile } from 'coffee-script'

GeoffreyBooth · 2017-04-13T20:23:55Z

@akfish how does your fork compare with https://github.com/webpack-contrib/coffee-loader? As in, why would someone use your fork rather than coffee-loader?

timhuff · 2017-04-13T20:26:25Z

@GeoffreyBooth The issue is not compiling coffeescript with webpack. It's using the coffee-script package as a compiler inside a webpack application. In my case, I was making a coffeescript-based REPL of sorts (similar to what's on the top of the coffeescript website).

akfish · 2017-04-13T20:28:05Z

@GeoffreyBooth coffee-loader works at compile time, not runtime.
If someone is trying to make a tool that takes user input and compiles on-the-fly in browser, he'll need some way to pack the coffee compiler into his build.

GeoffreyBooth · 2017-04-14T00:15:18Z

Can you post a minimal example app of what you’re trying to accomplish? It sounds like you want to require something that contains a compile method?

timhuff · 2017-04-14T00:17:11Z

@GeoffreyBooth I don't think anyone's still attempting to do this. @Radivarig's tool solved it for me. @akfish was simply contributing his work for future visitors.

timhuff · 2017-04-14T00:27:44Z

@GeoffreyBooth But to answer your question, yea, the idea is to write something along the lines of:

coffee = require 'coffee-script'
output = coffee.compile userInput

And then package that up inside webpack

akfish · 2017-04-14T00:30:04Z

import { compile } from 'coffee-script'

// User input coffee source
let src = editor.text;

// Compile it in browser
let compiledCode = compile(src, opts)

// Run compiled code or whatever
doStuffWith(compiledCode)

Or imagining tools like codepen, jsfiddle, jsperf and etc if they want to add coffee support.

In the good old days, one can simply include the compiled coffeescript bundle with <script> tag.
But that's not how we do things in this new "Great JavaScript Fatigue™" era, where every projects, no matter big or small, should be packed equally with webpack.

Basically that's how this issue arises.

akfish · 2017-04-14T00:31:33Z

That and what @timhuff said.

connec · 2017-04-14T08:55:17Z

Does webpack not support bundling of NPM packages through import? I don't understand why the following won't work with vanilla CS' compile function:

// some file in a webpack bundle
import { compile } from 'coffeescript'

let compiledCode = compile(src, opts)

akfish · 2017-04-14T09:33:16Z

@connec Coffee-script's main script contains references to nodejs-only modules. Hence it cannot be packed. The alternative is to set a browser field in package.json pointing to a browser-specific entry script. I'll send a PR later.

connec · 2017-04-14T12:05:07Z

@akfish I see! That makes sense. Perhaps any file-handling logic should be moved into cli.coffee, since people directly using the main script (via require 'coffeescript') are also likely to be working with strings.

vendethiel closed this as completed Jun 30, 2016

vendethiel added the question label Jun 30, 2016

Radivarig mentioned this issue Jul 1, 2016

using CoffeeScript.compile in client with webpack #4277

Closed

akfish mentioned this issue Apr 14, 2017

[CS2] Add webpack support #4501

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

using coffee-script with webpack #4276

using coffee-script with webpack #4276

Radivarig commented Jun 30, 2016

vendethiel commented Jun 30, 2016

Radivarig commented Jun 30, 2016

timhuff commented Apr 5, 2017

Radivarig commented Apr 5, 2017

timhuff commented Apr 5, 2017

GeoffreyBooth commented Apr 5, 2017

akfish commented Apr 13, 2017

GeoffreyBooth commented Apr 13, 2017

timhuff commented Apr 13, 2017

akfish commented Apr 13, 2017

GeoffreyBooth commented Apr 14, 2017

timhuff commented Apr 14, 2017

timhuff commented Apr 14, 2017 •

edited

Loading

akfish commented Apr 14, 2017

akfish commented Apr 14, 2017

connec commented Apr 14, 2017 •

edited

Loading

akfish commented Apr 14, 2017

connec commented Apr 14, 2017

using coffee-script with webpack #4276

using coffee-script with webpack #4276

Comments

Radivarig commented Jun 30, 2016

vendethiel commented Jun 30, 2016

Radivarig commented Jun 30, 2016

timhuff commented Apr 5, 2017

Radivarig commented Apr 5, 2017

timhuff commented Apr 5, 2017

GeoffreyBooth commented Apr 5, 2017

akfish commented Apr 13, 2017

GeoffreyBooth commented Apr 13, 2017

timhuff commented Apr 13, 2017

akfish commented Apr 13, 2017

GeoffreyBooth commented Apr 14, 2017

timhuff commented Apr 14, 2017

timhuff commented Apr 14, 2017 • edited Loading

akfish commented Apr 14, 2017

akfish commented Apr 14, 2017

connec commented Apr 14, 2017 • edited Loading

akfish commented Apr 14, 2017

connec commented Apr 14, 2017

timhuff commented Apr 14, 2017 •

edited

Loading

connec commented Apr 14, 2017 •

edited

Loading