Git Product home page Git Product logo

surplus-loader's People

Contributors

adamhaile avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar avatar

surplus-loader's Issues

Certain valid Javascript sequences result in errors with surplus-loader

EDIT: Woops, this might be better suited for surplus. Feel free to move this over to there.

There was a similar issue over at the Parcel Surplus plugin (parcel-plugin-surplus) and the solution was to only transform files that had a surplus import (via AST introspection). That solution was the "silver bullet" and I think would be smart to do the same here.

This is a problem because even the maintainers of React/the JSX spec advise not to use .jsx and instead opt for .js, even for files with JSX within them.

ERROR in ./node_modules/ansi-regex/index.js
Module build failed (from ./node_modules/surplus-loader/index.js):
Error: bad element name at line 2 col 81: ``<]/g;};
''
    at ERR (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:373:19)
    at jsxElement (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:121:17)
    at program (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:91:35)
    at parse (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:83:16)
    at Object.compile (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:1512:49)
    at Object.preprocess (/private/tmp/test-surplus/node_modules/surplus-loader/index.js:7:33)
 @ ./node_modules/strip-ansi/index.js 2:16-37
 @ (webpack)-hot-middleware/client.js?reload=true&quiet=true
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

https://github.com/chalk/ansi-regex/blob/master/index.js#L6

Offending line is here. Funny enough, I'm a maintainer of that package ^^

Here are a few more:

ERROR in ./node_modules/memoizerific/memoizerific.js
Module build failed (from ./node_modules/surplus-loader/index.js):
Error: unrecognized content in begin tag at line 0 col 791: ``;o++)s(r[o]);return s})({1:[fu''
    at ERR (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:373:19)
    at jsxElement (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:138:21)
    at program (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:91:35)
    at parse (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:83:16)
    at Object.compile (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:1512:49)
    at Object.preprocess (/private/tmp/test-surplus/node_modules/surplus-loader/index.js:7:33)
 @ ./node_modules/@storybook/client-api/dist/story_store.js 74:43-66
 @ ./node_modules/@storybook/client-api/dist/index.js
 @ ./node_modules/@storybook/addon-actions/dist/preview/withActions.js
 @ ./node_modules/@storybook/addon-actions/dist/preview/index.js
 @ ./node_modules/@storybook/addon-actions/dist/index.js
 @ ./stories/index.stories.js
 @ ./stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/html-entities/lib/xml-entities.js
Module build failed (from ./node_modules/surplus-loader/index.js):
Error: unterminated string at line 101 col 38: ``";            i++;
          ''
    at ERR (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:373:19)
    at quotedString (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:331:17)
    at program (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:95:29)
    at parse (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:83:16)
    at Object.compile (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:1512:49)
    at Object.preprocess (/private/tmp/test-surplus/node_modules/surplus-loader/index.js:7:33)
 @ ./node_modules/html-entities/index.js 2:15-47
 @ (webpack)-hot-middleware/client-overlay.js
 @ (webpack)-hot-middleware/client.js?reload=true&quiet=true
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/core-js/modules/es.string.replace.js
Module build failed (from ./node_modules/surplus-loader/index.js):
Error: unterminated string at line 107 col 15: ``": return str.slice(tailPos);''
    at ERR (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:373:19)
    at quotedString (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:331:17)
    at program (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:95:29)
    at parse (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:83:16)
    at Object.compile (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:1512:49)
    at Object.preprocess (/private/tmp/test-surplus/node_modules/surplus-loader/index.js:7:33)
 @ ./node_modules/@storybook/client-api/dist/story_store.js 59:0-44
 @ ./node_modules/@storybook/client-api/dist/index.js
 @ ./node_modules/@storybook/addon-actions/dist/preview/withActions.js
 @ ./node_modules/@storybook/addon-actions/dist/preview/index.js
 @ ./node_modules/@storybook/addon-actions/dist/index.js
 @ ./stories/index.stories.js
 @ ./stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/object-inspect/index.js
Module build failed (from ./node_modules/surplus-loader/index.js):
Error: unterminated string at line 139 col 30: ``"/g, '&quot;');}

function is''
    at ERR (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:373:19)
    at quotedString (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:331:17)
    at program (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:95:29)
    at parse (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:83:16)
    at Object.compile (/private/tmp/test-surplus/node_modules/surplus/compiler/index.js:1512:49)
    at Object.preprocess (/private/tmp/test-surplus/node_modules/surplus-loader/index.js:7:33)
 @ ./node_modules/es-abstract/es2015.js 6:14-39
 @ ./node_modules/es-abstract/es6.js
 @ ./node_modules/array-includes/implementation.js
 @ ./node_modules/array-includes/polyfill.js
 @ ./node_modules/array-includes/shim.js
 @ ./node_modules/airbnb-js-shims/target/es2016.js
 @ ./node_modules/airbnb-js-shims/target/es2015.js
 @ ./node_modules/airbnb-js-shims/target/es5.js
 @ ./node_modules/airbnb-js-shims/index.js
 @ ./node_modules/@storybook/core/dist/server/common/polyfills.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Surplus is not defined

I'm getting Surplus is not defined but I'm not using TypeScript. I'm including the line import * as Surplus from 'surplus'; Surplus with every .jsx view, but while the JSX view is otherwise compiling with Webpack, it doesn't seem to convert the internal Surplus calls to the internal Webpack-resolved module name. Is there magic sauce that's needed to get Surplus to be locally resolvable in the .jsx file?

Just as an example, it fails on a line like: __ = Surplus.createElement('div'); (converted Webpack code)

Bundle not emitted when using surplus-loader

My webpack config looks like this:

module.exports = {
    mode: 'development',
    entry: path.resolve(CLIENT_SRC_PATH, 'main.ts'),
    output: {
        path: path.resolve(DIST_PATH, 'public'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        modules: [NODE_MODULES_PATH, CLIENT_SRC_PATH],
    },
    plugins: [
        new HtmlPlugin({ title: 'Kitchen Planner' }),
        new CopyPlugin([PUBLIC_PATH]),
    ],
};

If I change the module.rules.0.use to the following use: 'surplus-loader!ts-loader', the bundle is no longer emitted. Webpack doesn't give any errors in the console, it just silently omits the bundle.js output. Also the index.html no longer includes a script tag for it.

Surplus.data is not a function

I'm tryin to load surplus but seems like webpack isn't able to import Surplus correctly, I noticed a warning pops up when starting webpack-dev-server "WARNING in ./app/index.js
23:17-29 "export 'data' (imported as 'Surplus') was not found in 'surplus'"
I'm trying to follow your hello world example.

Packages versions:
Webpack 4.8.3
Surplus-loader 0.5.0
Surplus 0.5.2

This is my webpack config for JS|JSX files:

const exclude = /node_modules/
const include = /app|node_modules\/bootstrap\/dist|node_modules\/font-awesome/
const nib = require('nib')
const here = require('path-here')
module.exports = {
  entry: [
    './public/index.html',
    './app/index.js'
  ],
  output: {
    path: here('/public'),
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader', 'surplus-loader'],
        exclude
      },
      {test: /\.css$/, use: [{loader: 'style-loader'}, {loader: 'css-loader'}]},
      {test: /\.html$/, use: [{loader: 'html-loader', options: {ignoreCustomFragments: [/\{\{.*?}}/], minimize: true}}]},
      {test: /\.jpg$/, use: [{loader: 'url-loader', options: {mimetype: 'image/jpg'}}], include},
      {test: /\.png$/, use: [{loader: 'url-loader', options: {mimetype: 'image/png'}}], include},
      {test: /\.html$/, use: [{loader: 'html-loader', options: {ignoreCustomFragments: [/\{\{.*?}}/], minimize: true}}], include},
      {test: /\.json$/, use: [{loader: 'json-loader'}], include},
      {test: /\.less$/, use: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'less-loader'}], include},
      {test: /\.styl$/, use: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'stylus-loader'}, {loader: 'stylus-loader', options: {use: [nib()]}}], include},
      {test: /\.hson$/, use: [{loader: 'hson-loader'}], include},
      {
        test: /\.(woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{loader: 'url-loader', options: {mimetype: 'application/font-woff'}}],
        include: include
      },
      {
        test: /\.(ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{loader: 'url-loader', options: {mimetype: 'application/font-sfnt'}}],
        include: include
      },
      {
        test: /\.(eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{loader: 'url-loader', options: {mimetype: 'application/vnd.ms-fontobject'}}],
        include: include
      },
      {
        test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{loader: 'url-loader', options: {mimetype: 'image/svg+xml'}}],
        include: include
      }
    ]
  }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.