CodePane not working properly when using create-react-app

[treble37]

Hi,

I followed create-react-app my-presentation --scripts-version spectacle-scripts to create a simple presentation.

I have a CodePane like:

<CodePane lang="elixir" source={require("raw-loader!./assets/digger_step1.example")} />

I get the following error:

Failed to Compile displays in the browser along with a message Line 63: Unexpected '!' in 'raw-loader!./assets/demo.example'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax

I added "raw-loader": "^0.5.1" in the package.json and did npm install but that hasn't resolved the issue.

[kitten]

That is a conscious limitation of create-react-app. It says right here that it doesn't allow webpack loaders to be specified manually as port of import statements:

Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax

Furthermore it doesn't come with the support for any kind of raw-loader out of the box.

There's an ongoing issue on how to improve this situation: facebook/create-react-app#3722

Meanwhile you have three other options luckily:

• Copy the contents of your file over into a js file and use template strings (this will allow you to not change them drastically)
• Use rewired to add the raw-loader for specific file names yourself: https://github.com/timarney/react-app-rewired
• or (the probably worst option) eject and configure it yourself

I don't think there's a lot about it actually.

One option would for us to add a raw-loader to spectacle-scripts, which we can discuss, but that'd mean that spectacle-scripts would further diverge from the regular react-scripts.

cc @kenwheeler

[markerikson]

I'd be fine with adding raw-loader to spectacle scripts. After all, that's the point of having a custom fork of react-scripts in the first place. (Also, spectacle-scripts needs to have the latest version of react-scripts merged in anyway.)

[joshacheson]

Alright I love the heck out of spectacle and can't stand that this is still a thing 😂

I will very happily do whatever work is required here. What's the move? Add raw-loader to spectacle scripts?

[markerikson]

Pretty much, yeah.

[ryan-roemer]

It looks like this landed in spectacle-scripts a while ago FormidableLabs/spectacle-scripts#2 but we maybe forgot to publish it to npm.

Can someone verify / try things off of github master and report back here? Thanks!

[datagurkhas]

I am stuck on this issue too. I have been trying to use CodePane to load my code from a file and it doesn't seem to work. I wonder how these people got it working:

• https://github.com/sebald/spectacle-theme-nova/blob/master/example/index.js#L154

• https://github.com/FormidableLabs/spectacle/blob/master/example/src/index.js#L132

• https://github.com/jamiebuilds/spectacle-code-slide
  This also means I am unable to use spectacle-code-slide. If this extension no longer works with the current version, should we remove the reference from README.md?

[JCofman]

I had the same issue so the easiest way for me to resolve this was to:

1. Install dependencies

$ npm install react-app-rewired --save-dev
$ npm install raw-loader --save-dev
$ npm install @baristalabs/react-app-rewire-raw-loader --save-dev

2. Configure react-app-rewired create a config-overides.js file in the root directory and add the following:

/* config-overrides.js */
const rewireRawLoader = require("@baristalabs/react-app-rewire-raw-loader");

module.exports = function override(config, env) {
  config = rewireRawLoader(config, env);
  return config;
};

3. Replace standard scripts in the package.json with react-rewired:

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
},
"scripts": {
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
},

[mfellner]

Apparently it's enough to turn off the eslint check by adding this comment line:

/* eslint import/no-webpack-loader-syntax: off */

See facebook/create-react-app#1517

[jmagrippis]

All those workarounds are clever, but what's the problem we want to solve here? All we really want is to load plain text files, right?

So you can get around this problem just by suffixing your examples with .txt and not using the raw loader.

<CodePane lang="elixir" source={require("./assets/digger_step1.example.txt")} />
<CodePane lang="elixir" source={require("./assets/digger_step2.txt")} />

You could use imports at the top with this method, do anything you want. I don't think anybody is really precious about the .example suffix, it just happened to be in the docs because it just happened to work at the time.

[mfellner]

@jmagrippis Using .txt is OK but the downside is that it's more cumbersome to work with such files inside an editor, e.g. in VS code I need to manually set the correct file type, or to reuse them in some other context, e.g. use as actual working code.

Fortunately the raw-loader approach just works in the latest create-react-app version of spectacle: require('!raw-loader!./something.js'), the leading ! is essential.
One must also work around the linting errors, which is relatively easy with https://github.com/sharegate/craco, for example.

In the end this seems to be more an issue with create-react-app than with spectacle, imo. Possibly spectacle-scripts could offer some customisation over the cra defaults but then this creates another maintainability problem.

[drusellers]

Just checking in on this, loving this project so far, but def got tripped up trying to use CodePane and ComponentPlayground. Is there a punch list of work that has been identified to address this issue.

+1 for pulling in raw loader as that is the goal of the project - to present code, etc.